J'ai un form avec deux boutons radio avec des options d'expédition. Je veux vérifier si aucun des boutons radio n'est coché par l'utilisateur, alors il arrêtera la soumission du formulaire et affichera un message pour en cocher un pour continuer.

HTML / PHP

<form method="get">
    <label class="ship-method" style="float: left; margin-right: 20px;">
        <input type="radio" name="dm_shipping_option" id="tttm_courier" value="1" onclick="getCourier(1);" />
        <?php echo $shipping_costs; ?>&euro;&nbsp;<?php echo getValue('name','banners',3); ?>
        <?php echo "<br />"; ?>
        <span class="ship-desc"><?php echo getValue('content','banners',3); ?></span>
    </label>
    <label class="ship-method" style="float: left; margin-right: 20px;">
        <input type="radio" name="dm_shipping_option" id="client_courier" value="0" onclick="getCourier(0);" />
        <?php echo getValue('name','banners',2); ?>
        <?php echo "<br />"; ?>
        <span class="ship-desc"><?php echo getValue('content','banners',2); ?></span>
    </label>
</form>

JavaScript

<script type="text/javascript">
$(document).ready(function () {
    var isCheckedTTCourier = $('#tttm_courier').prop('checked');
    var isCheckedCourier = $('#client_courier').prop('checked');
    if (!isCheckedTTCourier || !isCheckedCourier) {
        alet("Please check a shipment option to continue");
        return false;
});
</script>
1
Zergster 14 janv. 2020 à 14:00

4 réponses

Meilleure réponse

Voir mes explications sous forme de commentaires dans le code source JavaScript ci-dessous.

jQuery( function( $ ) { // document ready
    $('form').on( 'submit', function( oEvent ) { // bind event handler on submit event
        // do your validation as you wrote: "I want to check if none of radio buttons are checked by user"
        // you can do other validation algos here as well
        if (   !document.getElementById('tttm_courier').checked   // button not checked
        &&   !document.getElementById('client_courier').checked ) // and also not checked
        {
            oEvent.preventDefault(); // stop form submit is better than `return false` as it would stop the event from bubbling which is considered to be a bad practice
            alert('Please check a shipment option to continue');
        }
    } )
} );
1
Axel 14 janv. 2020 à 11:54

Essayez ce frère

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<form>
<input type="radio" name="epackage" value="1">option 1<br>
<input type="radio" name="epackage" value="2">option 2
<input type="submit" name="payOnline" id="payOnline" value="Pay Online" style="color: red; font-weight: bold; width:100px; height:40px;"/> 
</form>
<script type="text/javascript">
$(function() {
    $("#payOnline").click(function(event) {

        if ($("input:radio[name='epackage']:checked").length == 0) {
            alert('Nothing is checked!');
            event.preventDefault();
            return false;
         }
         else {
            return true;
            // alert('One of the radio buttons is checked!');
         }
    });
});
</script>

Merci

1
rajat.gite 14 janv. 2020 à 11:19

Changez le script en:

<script type="text/javascript">
$('form').on('submit', function(formEvent) {
    formEvent.preventDefault();
    var isCheckedTTCourier = $('#tttm_courier').is(':checked');
    var isCheckedCourier = $('#client_courier').is(':checked');
    if (isCheckedTTCourier && isCheckedCourier) {
        event.run();
    } else {
        alert("Please check a shipment option to continue");
    }
});
</script> 
-2
Community 16 janv. 2020 à 16:56

Premièrement, il y a quelques problèmes dans votre code. L'instruction if ne contient pas de fermeture } et alet() doit être alert().

En ce qui concerne le problème, vous devez accrocher un gestionnaire d'événements au form qui vérifie pour s'assurer qu'au moins une radio est vérifiée. Si ce n'est pas le cas, vous pouvez annuler la soumission du formulaire en utilisant preventDefault() et montrer un alert() à l'utilisateur. Essaye ça:

jQuery(function($) {
  $('form').on('submit', function(e) {
    if ($(this).find('.ship-method:checked').length == 0) {
      e.preventDefault();
      alert("Please check a shipment option to continue");
    }
  }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get">
  <label class="ship-method" style="float: left; margin-right: 20px;">
    <input type="radio" name="dm_shipping_option" id="tttm_courier" value="1" /><br />
    <span class="ship-desc"></span>
  </label>
  <label class="ship-method" style="float: left; margin-right: 20px;">
    <input type="radio" name="dm_shipping_option" id="client_courier" value="0" /><br />
    <span class="ship-desc"></span>
  </label>
  <button type="submit">Submit</button>
</form>
1
Rory McCrossan 14 janv. 2020 à 11:08