Setting hidden value using javascript dependant on one of two options

Question

I'm trying to set the values of a hidden field, dependent on which one of two buttons is clicked.

If attendYes is clicked, it should set attend to 1, whereas if attendNo is clicked, it should set attend to 0. It's currently saving the value as blank which would suggest it is not being set.

(Ignore the excess CSS... Adobe Muse is a nuisance when exporting)

Form with buttons

<form id="form1" name="form1" method="post" action="playerparent-profile.php?pid=<?=$pid?>">
   <div class="clearfix colelem" id="pu11327-5"><!-- group -->
    <div class="clearfix grpelem" id="u11327-5"><!-- content -->
     <p>&nbsp; <span id="u11327-2"><button type="submit" id="attendYes" class="global-button">Yes</button></span></p>
    </div>
    <div class="clearfix grpelem" id="u11329-5"><!-- content -->
     <p>&nbsp; <span id="u11329-2"><button type="submit" id="attendNo" class="global-button">No</button></span></p>
    </div>
   </div>
  </div>
 </div>         <input name="attend" id="attend" value="">
 </form>

Javascript

<script type="text/javascript">
if ($('#attendYes')) {
    $('#attendYes').click(function(e) {
        document.getElementById('attendYes').value = "1";
        $('#form1').submit();
        return false;
    });
}
</script>

<script type="text/javascript">
if ($('#attendNo')) {
    $('#attendNo').click(function(e) {
        document.getElementById('attendNo').value = "0";
        $('#form1').submit();
        return false;
    });
}

</script>

I have no doubt the actual javascript is the issue, but I'm not sure WHAT, as it looks as though it makes sense to me. Any help would be greatly appreciated.

Cheers.

Answer 1

You are using the wrong selector see comments below , also just use jQuery to set the value since you're using it already

Also, your form is being submitted BEFORE you set the value to the field this is happening because the element you used, <button>, is a submit button by default. You'll need to use a regular button, ie <input type="button"> see Can I make a <button> not submit a form?

  $(function() {
  if ($('#attendYes')) {
   $('#attendYes').click(function(e) {
    $('#attend').attr( "value", "1" ); //use jQuery here and use `attend` not `attendYes`
    $('#form1').submit();
    return false;
   });
  }
  if ($('#attendNo')) {
   $('#attendNo').click(function(e) {
    $('#attend').attr( "value", "0" ); //use jQuery here and use `attend` not `attendYes`
    $('#form1').submit();
    return false;
   });
  }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post" action="playerparent-profile.php?pid=<?=$pid?>">
   <div class="clearfix colelem" id="pu11327-5"><!-- group -->
    <div class="clearfix grpelem" id="u11327-5"><!-- content -->
     <p>&nbsp; <span id="u11327-2"><input type="button" id="attendYes" class="global-button">Yes</input></span></p>
    </div>
    <div class="clearfix grpelem" id="u11329-5"><!-- content -->
     <p>&nbsp; <span id="u11329-2"><input type="button" id="attendNo" class="global-button">No</input></span></p>
    </div>
   </div>
  </div>
 </div>         <input name="attend" id="attend" value="">
 </form>

Answer 2

there ya go:

$('#attendYes').on('click', function(){
    $('#attend').val("1");
    $('#form1').submit();
        return false;
});
$('#attendNo').on('click', function(){
    $('#attend').val("0");
    $('#form1').submit();
        return false;
});

What @Dagon is trying to say is that you are mixing Vanilla JS with Jquery when Jquery has functions to do some of the stuff that you are doing such as:
document.getElementById('attend').value = "0"; can be achived by using jQuery's: $('#attend').val("0");

I also think that the main issue with your original code was that you was trying to assign the value to the button you where clicking in each case instead of the input box... Here's a Jsfiddle with a working example you will need to remove the forward slashes from the form submit lines but the rest is good :D

http://jsfiddle.net/vimes1984/w1a3c6yk/8/