Get value from div for PHP

Question

I have a table where I am using a select option and depending on the selection, through a script, which is provided below, a value appears in the following cell. My question is, how can I get the new appearing value in order to process it through php? For example, I select 'No' from the selection and in the next cell, the 'H' appears and I want to store the value of 'H'. Any help is greatly appreciated.

Part of the table's code

<td>
    <select id="ynA4" name="ynA4">
        <option selected disabled hidden style="display: none" value=""></option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
        <option value="TBC">TBC</option>
        <option value="N/A">N/A</option>
    </select>
</td>
<td>
    <script>
        $('#ynA4').change(function() {
            opt = $(this).val();
            if (opt == "Yes") {
                $('#hazardA4').html('');
            } else if (opt == "No") {
                $('#hazardA4').html('H');
            } else if (opt == "TBC") {
                $('#hazardA4').html('');
            } else if (opt == "N/A") {
                $('#hazardA4').html('N/A');
            }
        });
    </script>
    <div id="hazardA4"></div>
</td>

Solution: #1

For example, if 'No' is selected and I want the 'H' to be stored, the script will be like this,

} else if (opt == "No") { $('#hazardA4').html('<input type="hidden" name="hazardA4" value="H">H');

Solution: #2

<script>
    var ynA4_val;
    $(document).ready(function(){
        $('#ynA4').change(function() {
            opt = $(this).val();
            if (opt == "Yes") {
                $('#hazardA4').html('');
                ynA4_val = '';
                $('form').append('<input type="hidden" value="' +ynA4_val+ '" />');
            } else if (opt == "No") {
                $('#hazardA4').html('H');
                ynA4_val = 'H';
                $('form').append('<input type="hidden" value="' +ynA4_val+ '" />');
            } else if (opt == "TBC") {
                $('#hazardA4').html('');
                ynA4_val = '';
                $('form').append('<input type="hidden" value="' +ynA4_val+ '" />');
            } else if (opt == "N/A") {
                $('#hazardA4').html('N/A');
                ynA4_val = 'N/A';
                $('form').append('<input type="hidden" value="' +ynA4_val+ '" />');
            }
        }); //END #ynA4.change
    }); //END document.ready
</script>

Answer 1

You should wrap the <script> code in a document ready, or the script might fire and attempt to bind the change event to an element that doesn't yet exist in the DOM.

If you have only one form on the page, this will work. Else, replace $('form') with $('#yourFormID')

<script>
    var ynA4_val;
    $(document).ready(function(){
        $('#ynA4').change(function() {
            opt = $(this).val();
            if (opt == "Yes") {
                $('#hazardA4').html('');
                ynA4_val = '';
                $('form').append('<input type="hidden" name="ynA4" value="' +ynA4_val+ '" />');
            } else if (opt == "No") {
                $('#hazardA4').html('H');
                ynA4_val = 'H';
                $('form').append('<input type="hidden" name="ynA4" value="' +ynA4_val+ '" />');
            } else if (opt == "TBC") {
                $('#hazardA4').html('');
                ynA4_val = '';
                $('form').append('<input type="hidden" name="ynA4" value="' +ynA4_val+ '" />');
            } else if (opt == "N/A") {
                $('#hazardA4').html('N/A');
                ynA4_val = 'N/A';
                $('form').append('<input type="hidden" name="ynA4" value="' +ynA4_val+ '" />');
            }
        }); //END #ynA4.change
    }); //END document.ready
</script>

Note that there are now two ways to get at that information:

(1) Via the hidden form element posted with the form: $sumthin = $_POST['ynA4']

(2) Via the global variable ynA4_val in javascript, which you can add to the data being sent over AJAX.

(3) UPDATE: Note that I neglected to put a name="varname" attribute in the original answer. Fixed/Updated.

Answer 2

Solution

From the suggestion of @Ghost , For example, if 'No' is selected and I want the 'H' to be stored, the script will be like this,

} else if (opt == "No") { $('#hazardA4').html('<input type="hidden" name="hazardA4" value="H">H');