Condition on submit button for different radio buttons


#1

hi everyone.

I have created a form ,and in that i have two radio buttons ‘yes’ and ‘no’ and a submit button .I want that on clicking submit button if the radio button yes is checked ,then thatsame page should be loaded again,otherwise it should open another page.How to impose this condition in ionic2…Please help me in this.


#2

Any time I hear people talk about pages being “loaded again”, I suspect that they are not writing idiomatic Angular code. You should not be thinking in terms of reloading pages. Please describe what you are actually trying to achieve, and maybe people can help you find a more idiomatic way of doing it.


#3

I have a form with entries like account name,balance etc,and this corresponds to one account.There are two radio buttons on the same page ,which are if the user wants to create another account again or not ,ie yes or no.If the user checks the yes button ,then the user wants to create another account and now this same form with all the cleared values should be pushed else if he does not want to create another account then clicking on submit button will redirect him to another page.


#4

Do I need to create a new page with same entries and push that page:
Here is what I want to say:


#5

I may very well be misunderstanding your workflow, but as a user, I would consider this a very confusing UX. Radio buttons are for making an isolated choice, and I would be surprised if selecting one or the other had an effect on anything outside of that radio group.


#6

So how should I achieve this,means clicking on add account button I want that values should be added in the storage and also if the yes radio button is checked then the create account page should be pushed .Is there another way,If yes Please share about it.


#7

I would have two separate submission buttons with different (click) listeners: “create new account” and “do whatever with existing account”.


#8
addaccount()  
  {      
  console.log(JSON.stringify(this.account));   

  this.store.set(JSON.stringify(this.account));  
 }

can’t we do it on same button,I have done the same thing in java(android),but I am unable to do it in ionic2


#9
addaccount()
{
if(yes.checked==true)
{
this.navctrl.push(addaccountpage);
}
else{
this.navCtrl.push(homepage);
}
console.log(JSON.stringify(this.account));   

  this.store.set(JSON.stringify(this.account));  
}

cant we do something like this on my button click function in .ts file?


#10

At this point, it’s not a question of “can”. I’m saying I think you shouldn’t use only one button, because that’s contrary to decades of UI expectations about how radio buttons and ordinary buttons work. Obviously, you’re completely free to ignore my opinion about this.


#11

If i take two buttons also how to know if the button is checked… what should i code in if () condition?


#12

this is my. html code:

<label for="yes" class="control-label">
Create another Account</label>
      <ion-list radio-group > 
               <input type="radio" (ng-model)="account.yes "  name="yes"> YES      
   <input type="radio" (ng-model)="account.no" name="yes"> NO      </ion-list>          
    <button ion-button block  type="submit" (click)="addaccount()" color="blue"> 
Add Account
</button>

Is it correct?

#13

Make them type="button" instead of type="submit" so you can have separate (click) handlers.


#14

I tried this but it does not goes to the if condition,it always pushes Contact Page on clicking the button:

addaccount()
{
if(this.b1=="true")       
 {          
  this.navCtrl.push(FilesPage); 
       }  
      else 
       {     
       this.navCtrl.push(ContactPage);     
   }    
    console.log(JSON.stringify(this.account));     
 
    this.store.set(JSON.stringify(this.account));    
        }

This id my html code:


 <label for="yes" class="control-label">Create another Account</label>      <ion-list radio-group >          
      <input type="radio" (ng-model)="account.yes "id="b1"  name="yes"> YES    
     <input type="radio" (ng-model)="account.no"  id="b2" name="yes"> NO   
   </ion-list>    
   <button ion-button block   (click)="addaccount()" color="blue"> 
Add Account</button>    
  </ion-list>

Whats the error?