Question

Hi everyone I am currently using the below code to run ajax submission on my page and was wondering if it is the most effective way of handling it given the variety of methods used for capturing user data.

What would a better method entail?

This is the JavaScript code I’m currently using:

$(document).ready(function() {
    $("#submit").click(function() {
        $("#form").hide(300);
        $.post('run.php', $("#form").serialize(), 
        function(data) {
            $("#result").html(data);
        });
        return false;
    });
});

This is my form:

<form id="booking">
          <table width="600" cellpadding="2px" cellspacing="2px" style="font-size: 20px;">
            <tr>
              <th width="296" align="left">Date Of Wedding</th>
              <td width="288"><input name='date' type='text' class='larger' id='date' value='' size='20'/></td>
            </tr>
            <tr>
              <th align="left">Party Size</th>
              <td><input name='partySize' type='text' class='larger' id='partySize' value='' size='20' /></td>
            </tr>
            <tr>
              <th align="left">Catering Grade</th>
              <td>1:
                <input name='cateringGrade' type='radio' class='larger' value=1 size='12'/>
                2:
                <input name='cateringGrade' type='radio' class='larger' id='cateringGrade' value=2 size='12'/>
                3:
                <input name='cateringGrade' type='radio' class='larger' id='cateringGrade' value=3 size='12'/>
                4:
                <input name='cateringGrade' type='radio' class='larger' id='cateringGrade' value=4 size='12'/>
                5:
                <input name='cateringGrade' type='radio' class='larger' id='cateringGrade' value=5 size='12'/></td>
            </tr>
            <tr>
              <th align="left">&nbsp;</th>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <th align="left">&nbsp;</th>
              <td><input name="submit" type="button" value="Submit" id="submit"/></td>
            </tr>
          </table>
        </form>

Answer 1

$(document).ready(function() {
    $("#submit").click(function() {
        var form = $("#form");
        form.hide(300);
        $.ajax({
          url: 'run.php',
          type: form.attr('method'), // POST or GET,
          data: form.serialize(),
          success: function(data) {
             // handle with response
             $("#result").html(data);
          }
        });
        return false;
    });
});

But it is better to do it in form submit function like following:

$(document).ready(function() {
        $('form').submit(function(e) {
            e.preventDefault();
            var form = $(this);
            form.hide(300);
            $.ajax({
              url: 'run.php', // you can also use form.attr('action') if url is dynamic
              type: form.attr('method'), // POST or GET,
              data: form.serialize(),
              success: function(data) {
                 // handle with response
                 $("#result").html(data);
              }
            });
        });
    });