Question

Im having an issue where Im getting an empty value for the value of a radio when my ajax form is submitted subsequent times.

Sequentially this is what happens:

1. User selects a radio and submits form
2. Get the value of the selected radio var enable = $('input[name=enable]:checked').attr('value');
3. Post the value via AJAX data: { 'enable' : enable, },

That all works fine. However if the user submits the form again the value of the radio is empty, nothing is submitted.

I am using styles and Jquery to hide the ‘standard’ radios and replace them with styled versions. With the style turned off, I can see that the radios are being selected correctly, however no value is submitted.

I can post some more code if need be. Thanks.

<form method="post" id="add-form" class="form" onsubmit="return false;">
<label>Enable Location</label>
<input type="radio" name="location_enable" id="location_enable" value="enable" checked="checked" />
<input type="radio" name="location_enable" id="location_disable" value="disable" />
<button>Submit</button>
</form>

Validate the form

        <script type="text/javascript">
        $().ready(function() {
            $("#add-form").validate({
                rules: {
                    location_enable: { required: true }
                },
                success: function(span) { 
                    span.html(" ").addClass("checked"); 
                },
                submitHandler: function(form) {
                    $('#add-form').submitForm();
                }
            });
        });
        </script>

Post the data

            <script type="text/javascript">
            $(document).ready(function() {
                $.fn.submitForm = function() {
                    var location_enable = $('input[name=location_enable]:checked').attr('value');

                    $.ajax({
                        type: 'POST',
                        data: { 'location_enable' : location_enable },
                        url: 'script.php',
                        dataType: 'json',
                        success: function($data) {
                            var result = $data.result;
                            var msg = $data.msg;

                            if (result == "success") {
                                formMessageDisplay(msg, result);
                                $(':input', '#add-form').each( function() {
                                    // Set the values to empty
                                    $(':input').val('');
                                });
                            }
                            else {
                                formMessageDisplay(msg, result);
                            }
                        },
                        error: function($data) {
                            formMessageDisplay('<?php echo AJAX_ERROR; ?>', result);
                        }
                    })
                }
            });
        </script>

On the first submission if the user selected ‘enable’ AJAX will post ‘enable’ as the value to script.php. Without reloading the page if the user submits the form again AJAX posts an empty value even is the user has selected ‘enable’.

Sorry, havent used jsFiddle before.

Within Firebug this is the output from two submissions without reloading the page.

json_action addEloc
location_address    Test
location_desc   Test
location_enable enable
location_loc    Test
location_map    enable
location_name   Testing radio
location_postcode   Test
location_state  QLD

Note the two ‘enables’ from the radio fields.

Second submission:

json_action addEloc
location_address    Test
location_desc   Test
location_enable 
location_loc    Test
location_map    
location_name   Testing radio
location_postcode   Test
location_state  QLD

There was no value for the two radios on the second submission.

Answer 1

This issue occurs due to your this script

if (result == "success") {
                formMessageDisplay(msg, result);
                $(':input', '#add-form').each( function() {
                    // Set the values to empty
                     $(':input').val('');
                });
}

You are setting ” to the all input type elements

$(':input').val('');

that’s why radio button values will also be set to ”, and will return blank response as it is returning now until you refresh the page.

Instead of doing this you can use reset() function to reset form values.

$('#add-form').reset();