change shipment option based on email validation

Question

I'm querying a database to check if an email exists / has already been used. if the email has been used I need to change a radio selector to another option

I have never used a toggle event based on a database query email validation so as of now I have the jquery setup returning alerts.

<!--/* shipment opt-in */-->
<div class="row--flex">
  <div class="form-group" data-sly-test="${!properties.defaultRefill}">
    <input type="radio" id="inServiceKit_shipmentOptInSupportingMaterials" name="shipmentOptIn" class="form-control" checked="checked" required>

    <label class="form_label" for="inServiceKit_shipmentOptInSupportingMaterials">
      Please send me the COPD In-Service Kit and additional Supporting materials
    </label>
  </div>

  <div class="form-group" data-sly-test="${properties.defaultRefill}">
    <input type="radio" id="inServiceKit_shipmentOptInRefillOnly" name="shipmentOptIn" class="form-control" checked="checked" required>

    <label class="form_label" for="inServiceKit_shipmentOptInRefillOnly">
      Please send me the COPD In-Service Refill Kit
    </label>
  </div>
</div>
<!--/* end shipment opt-in */-->

$('#inServiceKit_email').on('change', function() {
  //ajax request
  $.ajax({
    url: 'endpoint',
    data: {
      'email': $('#inServiceKit_email').val()
    },
    dataType: 'json',
    success: function(data) {
      if (data == true) {
        alert('email is in database')
      } else {
        alert('email is valid')
      }
    },
    error: function(data) {
      //error
    }
  });
});

the form now shows the "please send me the COPD In Service Kit and additional Supporting materials" label, so if users email is in database I want that to change to the other label and radio check " Please send me the COPD In-Service Refill Kit"

You've posted some code and described a feature you'd like to add, however your code shows no attempts to implement the functionality you describe, nor have you really asked a question. It seems like a simple `.hide()` and `.show()` based on the condition. Please edit your question to ask something *specific*, and to include your attempt(s). — Tyler Roper, Apr 22 '19 at 17:08
Additionally, if you're going to search for an answer to achieve this, note that the email validation, AJAX, etc, isn't really relevant. The question boils down to checking a radio button/toggling an element based on an `if` statement. There should be plenty of other questions to lead you towards that goal, ie: [How to check a radio button with jQuery?](https://stackoverflow.com/questions/5665915/how-to-check-a-radio-button-with-jquery), [jQuery Hide/Show if conditional statement](https://stackoverflow.com/questions/20541618/jquery-hide-show-if-conditional-statement), etc. — Tyler Roper, Apr 22 '19 at 17:21

score 1 · Accepted Answer · answered Apr 22 '19 at 17:38

As explained in the comments:

success: function(data) {
      if (data == true) {
        $("#inServiceKit_shipmentOptInSupportingMaterials").prop("checked", true);

        // This false may not be needed since they are in the same group
        $("inServiceKit_shipmentOptInRefillOnly").prop("checked", false);
      } else {
        $("inServiceKit_shipmentOptInRefillOnly").prop("checked", true);

        // This false may not be needed since they are in the same group
        $("#inServiceKit_shipmentOptInSupportingMaterials").prop("checked", true);
      }
    }

If the version of jQuery is less than 1.6 use:

success: function(data) {
      if (data == true) {
        $("#inServiceKit_shipmentOptInSupportingMaterials").attr('checked', 'checked');
      } else {
        $("inServiceKit_shipmentOptInRefillOnly").attr('checked', 'checked');
      }
    }

To check which radio button was selected, you can use:

$('input[name=shipmentOptIn]:checked').val()

While having the required in all inputs makes it clear and even encourage, if they have the same name, then you only need one of them to have the required keyword. Unless, they are generated dynamically.

change shipment option based on email validation

1 Answers1