Can't pass extra form data with radio button data to php via ajax

Question

I have a simple form I have a radio button and 2 hidden fields. I want to pass the radio button value and the hidden fields value via ajax to a php page. The radio button value passes fine but not the hidden fields do not. I have hard coded the the values for table and id in the php page to make sure the value of the radio button is being passed for testing.

<input type="radio" name="contract" value="0" class="custom-switch-input">
<input type="radio" name="contract" value="1" class="custom-switch-input">
<input type="radio" name="contract" value="2" class="custom-switch-input">

<input type="hidden" name="table" value="timber_sales">
<input type="hidden" name="id" value="177">

$(document).ready(function(){
   $('input[type="radio"]').click(function(){
        var contract = $(this).val();

        $.ajax({
             url:"edit_do.php",
             method:"POST",
             data:{contract:contract,id:id,table:table},
        });
   });
});

Answer 1

You're setting the value of contract in your event listener, but not id or table .

To get this to work, the way you currently have it, you'll need to search the dom for the value of your hidden fields as well.

var contract = $(this).val();
var id = $('input[name="id"]').val();
var table = $('input[name="table"]').val(); 

Answer 2

You need to get the values from the hidden fields first. Just like you did with $(this).val() for the value of the radio button. So:

$(document).ready(function(){
   $('input[type="radio"]').click(function(){
        var contract = $(this).val();
        var id = $('input[name=id]').val();
        var table = $('input[name=table]').val();

        $.ajax({
             url:"edit_do.php",
             method:"POST",
             data:{
               contract: contract,
               id:id,
               table:table
             },
        });
   });
});

It is probably better to give the hidden fields an unique ID attribute and get them through $('#myuniqueid').val() , but at least the above work as long as you don't have any other fields named ID or table.

Answer 3

Your jquery event does not know about hidden fields. Try this:

            <form id="form1">
                <input type="radio" name="contract" value="0" class="custom-switch-input">
                <input type="radio" name="contract" value="1" class="custom-switch-input">
                <input type="radio" name="contract" value="2" class="custom-switch-input">

                <input type="hidden" name="table" value="timber_sales">
                <input type="hidden" name="id" value="177">
            </form>
            <form id="form2">
                <input type="radio" name="contract" value="0" class="custom-switch-input">
                <input type="radio" name="contract" value="1" class="custom-switch-input">
                <input type="radio" name="contract" value="2" class="custom-switch-input">

                <input type="hidden" name="table" value="timber_sales">
                <input type="hidden" name="id" value="177">
            </form>
            $(document).ready(function(){
                $('form').change(function(){
                    event.preventDefault();

                    var send = $(this).data();

                    $.ajax({
                        url:"edit_do.php",
                        method:"POST",
                        data:send,
                    });
                });
            });