logo
Tags down

shadow

How can i get the selected value in ion-alert radio alert


By : Dženit Hajdarević
Date : October 16 2020, 06:10 PM
around this issue
code :
      text: 'Ok',
              handler: (data) => {
                console.log('Confirm Ok', data); //handle data here eg.
                this.x = data.value1; // this assigns your veritable 'x' to the value 
                                      // of Radio 1
}


Share : facebook icon twitter icon

Show alert() if no radio button is selected


By : Hosam G. Zewain
Date : March 29 2020, 07:55 AM
I wish this helpful for you After click the button "Delete", How to display an alert if none of radio button is selected. My html form , Maybe the check for "checked" status doesn't work?
code :
//read value of radio button
alert($("input[name='radio-button-group']:checked").val());

//get bool, if radio button is checked
alert(typeof $("input[name='radio-button-group']:checked").val() != 'undefined');

Show alert when radio button value is selected


By : user3652321
Date : March 29 2020, 07:55 AM
To fix the issue you can do You should use the change event instead of the click event. The change event will only trigger when the value of the checkboxes changes, the click event will trigger everytime you click on them, even if you click on the one that is already selected. Also, instead of using inline events, just use a jQuery selector to attach the event to all of the checkboxes.
code :
$("#radio_form input[type=radio]").change(function () {
    alert( 'Redirecting to: .../' + $(this).val() );
    // This will redirect to the value, relative to the current path
    location.href = $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="radio_form">
  <input type="radio" name="choice" value="V1"> 
  <input type="radio" name="choice" value="V2"> 
  <input type="radio" name="choice" value="V3">
  <input type="radio" name="choice" value="V4"> 
</form>

If radio button is selected show alert


By : user3735469
Date : March 29 2020, 07:55 AM
wish of those help @Html.RadioButtonFor creates a proper input with name and id attributes.
You can access the value this way:
code :
$('input[name="Form.InstallType"]:checked').val();
$('input[name="Form.InstallType"]').on('change', function()
{
    var val = $('input[name="Form.InstallType"]:checked').val();        
    if (val === '1') alert('New');
});
<div class="genericFormField">
   New: @Html.RadioButtonFor(m => m.Form.InstallType, 'new')
   Pool: @Html.RadioButtonFor(m => m.Form.InstallType, 'pool')
   Refurb: @Html.RadioButtonFor(m => m.Form.InstallType, 'refurb')              
</div>
<script>
    $(document).ready(function() {
        AlertIfNewIsSelected(); // Check if it is selected on page load. According to the question in comments.
        $('input[name="Form.InstallType"]').on('change', AlertIfNewIsSelected);
    });

    function AlertIfNewIsSelected()
    {
        var val = $('input[name="Form.InstallType"]:checked').val();        
        if (val === 'new') alert('New');
    }
</script>

Ionic2 - Not able to keep the radio alert as selected


By : Salam Zakout
Date : March 29 2020, 07:55 AM
I wish this help you You can store the selected value in a property from your component, and use that property to check if any option should be selected by default when opening the alert:
code :
public selectedFilter: any;

// ...

setFilter() {
    let alert = this.alertCtrl.create(),
        firstInput = {
            type: 'radio',
            label: 'Side A',
            value: 'a'
        },
        secondInput = {
            type: 'radio',
            label: 'Side B',
            value: 'b'
        };

    // Set the status of each filter according to the selected value
    firstInput.checked = this.selectedFilter === 'a';
    secondInput.checked = this.selectedFilter === 'b';

    // Set the title
    alert.setTitle('Select a Radio Alert');

    // Add both inputs
    alert.addInput(firstInput);
    alert.addInput(secondInput);

    // Add the buttons
    alert.addButton('Cancel');
    alert.addButton({
        text: 'OK',
        handler: data => {
            console.log('selected value ' + data)

            // Save the selected value
            this.selectedFilter  = data;
        }
    });

    // Show the alert
    alert.present();
}

How to fix alert if no radio button is selected?


By : ThachBK
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further The problem is that your alert for not selecting a pet is inside of your loop that checks the radio button checks. If I select dog, when it loops over cat, it evaluates to false. Instead of running the else if inside your for loop, simply check whether pet and colour are set after the loop has ended (they're not set by default).
As for your cost returning NaN, that was because you were trying to grab the value of the array, rather than the element. It would actually make more sense to treat these as separate values, so I've created two new variables to handle this - selectedPetCost and selectedColourCost.
code :
function calculateCost() {

  var radioButton;
  var pet;
  var colour;
  var cost = 0;

  var selectedPet = ["Cat", "Dog", "Rabbit"];
  var selectedColour = ["Black", "Gold", "White"];
  var selectedPetCost;
  var selectedColourCost;

  for (var i = 1; i <= 3; i++) {
    radioButton = document.getElementById(selectedPet[i - 1]);
    if (radioButton.checked) {
      pet = selectedPet[i - 1];
      selectedPetCost = parseInt(radioButton.value);
      //alert(parseInt(radioButton.value));
    }
  }
  if (!pet) {
    alert('No pet selected!');
  }

  for (var i = 1; i <= 3; i++) {
    radioButton = document.getElementById(selectedColour[i - 1]);
    if (radioButton.checked == true) {
      colour = selectedColour[i - 1];
      selectedColourCost = parseInt(radioButton.value);
      //alert(parseInt(radioButton.value));
    }
  }
  if (!colour) {
    alert('No colour selected!');
  }

  if (pet && colour) {
    cost = selectedPetCost * selectedColourCost;
    alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
  }
}
<h1> Adopt a pet </h1>
<form>
  <p>Choose a type of pet:
    <br>
    <input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label>
    <br>
    <input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label>
    <br>
    <input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label>
    <br>
  </p>
  <p>Choose the colour of pet:
    <br>
    <input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label>
    <br>
    <input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label>
    <br>
    <input type="radio" id="White" name="colour" value="90"><label for="white">White</label>
    <br>
  </p>
  <p><input type="button" value="Submit" onClick="calculateCost();">
</form>
Related Posts Related Posts :
  • How to update all ionic cordova plugin at one command in Ionic-V4
  • How to give dynamics values for [routerLink] which it corresponds to values of an array?
  • Add and delete item from an array
  • How to unit test a button within an ngfor
  • How to launch a method after a cell value has been edited in ag-grid?
  • Can't select individual user accounts when creating a new Asp.Net Core 2.1 Angular project in Visual Studio 2019
  • How do I get the response code in angular 7
  • Angular PrimeNg: p-table not detected using @ViewChild
  • How to route within the tab component in ionic
  • How can i combine data from two API's into datasource
  • Find the last index from the array using ngFor
  • ngSelect always return undefined
  • Nested Forms in Angular Material Stepper trigger a ExpressionChangedAfterItHasBeenCheckedError
  • Angular library dependency exposure
  • Handling errors with RxJS and Angular async pipe
  • Kubernetes internal CORS issues between services
  • Ionic set marker on location or based on longitude and latitude
  • CAN NOT expand Angular Material table
  • Share a angular library across multiple projects
  • How to import pipe to 2 modules(AppModule and ChildModule)?
  • How to disable the drag option on Angular material Slide toggle component
  • Does Spartacus support Hybris on-premise?
  • Bind regular expression from json to typescript
  • How to get all attributes of an object
  • Using angular elements inside the same angular project
  • RxJS assign observable and get data in one stream
  • Why I can not use anguar/material elements?
  • Getting Error when running 'ng test' Command
  • How can I make another request within catchError?
  • angular 7 input number validation
  • Dont show digits after decimal using angular pipe
  • How to use same component in normal way and with angular material dialog both?
  • How to integrate ReSharper with WebStorm
  • Google cloud application yaml for angular 7
  • How to perform concurrent HTTP requests on rows of a table
  • Angular 7 - deploy workspace applications (projects) in isolation
  • how to turn off differential loading in Angular v8?
  • How to add and update npm packages for a new Angular app in Visual Studio 2019
  • Angular 7, Ngrx, Rxjs 6 - Accessing state between lazy loaded modules
  • cannot find symbol import com.google.firebase.iid.FirebaseInstanceIdService error in ionic3
  • AWS CodePipeline, build failed and getting error
  • CORS problem with Angular and laravel even after setting the CORS header and server response
  • Angular, when the variable is mentioned in the url, the variable is not replaced with its value. Ex: ${username}
  • How to apply two ngIf on single html element with two different conditions
  • Ionic not importing ngx-mathjax module
  • How to display base64 image on iPhone in Ionic 4
  • ngFor in columns with diferents properties
  • How catch the http errors with map
  • How to format a Date field in Angular project
  • focusing ng-select filter input on drop down open
  • Angular 7 PDFJS Component
  • NestJs Errors stemming from @types dependencies in node_modules when running start:prod on fresh project
  • How to override ion-back-button action in ionic 4 with angular 7
  • How can I have an array in input form?
  • Angular 6 component test with a variable into HTML
  • Why is ES7/array polyfill needed despite the tsconfig target is set to ES5
  • How to deal with Google recaptcha backend validation response delay
  • Logging in using @angular/fire/auth results in 403 error on localhost
  • In Angular, with ViewChild/ ViewChildren, how do I get the child of a child?
  • Material Dialog Close on mouseleave (angular material)
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk