0

heres something that has bothered me for a while,i have several dynamically generated forms each with two radio buttons and a submit button,now the problem is that each time i submit a radio button selection,on click event is not fully consumed until another on change event happens,meaning that if the next form doesnt detect an onchange event on the radio buttons it uses the previous event and produces a value(of the previous submitted radio button) even if no selection is made.. Check the code below,thanks

$(function(){

var pName;
var selectedValue;
var checked;

$(".sel1").on('change',function(){
    $checked=$(this);
    alert($checked.val());
});

$(".submit_btn").on('click',function(event){
    event.preventDefault();

        var $this=$(this);
        var $cat_id=$this.data('uid');
          alert($selectedValue);

            $.ajax({
                url:"vote.php",
                method:"get",
                data:"cat_id="+$cat_id+"&hisId="+$selectedValue,
                success:function(result){

                       alert(result);

                }
            })

});

});

php code

<?php
                            }else{
                               ?> 
                                <div class="col-md-4 col-lg-4 col-sm-4 col-xsm-4 col-xxl-4 mt-4">
                                <div class="cat_holder">
                                    <form action="" class="ml-4">
                                         <div class="form-group">
                                         <label for=".sel1" class="cat_name"><?php echo $catNames; ?></label><br>

                                            <?php
                                            foreach($player_id as $real_player_id){
                                                $player_name=$caller->getPlayerNames($real_player_id);
                                                ?>

                                                <input class="text_style sel1" type="radio" name="id" value="<?php echo $real_player_id;?>"> <?php echo $player_name;?><br>

                                                <?php
                                                }
                                            ?>

                                          </select>
                                        </div>
                                        <div class="form-row">
                                            <div class="col-md-6 col-lg-6 col-sm-6 col-xsm-6 col-xxl-6">
                                                <input type="submit" value="Vote" class="btn btn-primary btn-block submit_btn" data-uid="<?php echo $realcatIds;?>">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
Cliff Ireri
  • 47
  • 1
  • 7
  • you mean the usual `if(isset($_POST['radio-button-name']) && !empty($_POST['radio-button-name']))` for `PHP` or the `if(!$('#radio-id').val())` for `JQuery`? – Toleo Apr 09 '18 at 11:41
  • Toleo,thanks im gonna try that – Cliff Ireri Apr 09 '18 at 11:43
  • Possible duplicate of [jQuery Form Validation before Ajax submit](https://stackoverflow.com/questions/11469616/jquery-form-validation-before-ajax-submit) – Toleo Apr 09 '18 at 11:47
  • Toleo should i give you a link so you can see what exactly im talking about? – Cliff Ireri Apr 09 '18 at 12:01
  • Just update you code here so everyone can see it. – Toleo Apr 09 '18 at 12:13
  • @Toleo Why isset and empty though? Empty already check if the variable is set. "That means empty() is essentially the concise equivalent to !isset($var) || $var == false." – Antonio Neto Apr 09 '18 at 12:14
  • @AntonioNeto `isset()` finds values like empty string `""` **true**, That why `!empty()` is needed. – Toleo Apr 09 '18 at 12:20
  • the link to the demo,its http://maganji.com/vote.php...once you submit your vote for the first time,notice all the other forms will submit even without selection.. – Cliff Ireri Apr 09 '18 at 12:25

0 Answers0