Difference in jquery submission and button submission

Question

I have been trying to get my html form to launch automatically when the page is loaded rather than when a button is clicked however have been unable to get the $.ajax,$.get and $.post method to perform the submission identically to the submit button.

My first method was to used a regular button :

  <input style="width:80%;margin-left:10%;display:none;" class="span2" name="latest" id="latest" type="text" value="">
  <input style="" type="submit" value="Go" name="/latest">

This worked exactly as I expected, however i want the form to submit automatically when the page was loaded so :

    <div id="cont2">
      <script type="text/javascript">
      var a=$('#target').serialize();
$.ajax({
    type:'post',
    url:'/latest',
    data:a,
    beforeSend:function(){
        alert("click");
    },
    complete:function(){
        alert("complete");
    },
    success:function(result){
         alert(result);
         $( '#cont2' ).html();

    }
});
        </script>
</div>

This did not perform as expected, instead of returning the value from the /latest route it instead just returned the same page.

This method did not work either :

      <script type="text/javascript">
$.get( "/latest", function( data ) {
  $( "#cont2" ).html( data );
  alert( "Load was performed." );
});
        </script>

As the route is a POST route it is expecting a post submission however this did not work either:

     <script type="text/javascript">
  $('form[name=target]').submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), function(json) {
      alert(json);
    }, 'json');
    return false;
  });
        </script>

The route that is reached once the button is clicked that actually works is :

$f3->route('POST /', function($f3, $params) {
    if(isset($_POST['/latest']))
    {
        echo "accept";
    }
}

In short, when the button is clicked it all performs as expected. But when using jquery to submit the form (so i can be done automatically) I cannot get the form to return the same response. Any help solving this would be appreciated.

Possible duplicate of [How does AJAX work?](http://stackoverflow.com/questions/1510011/how-does-ajax-work) — Liam, Jul 18 '16 at 08:56

score 1 · Accepted Answer · answered Jul 18 '16 at 06:11

$.ajax and other methods you are using, submit form in a different way (in asynchronous manner) than the normal form submission(which results in page reload). If you want it to behave like it does when we click submit button of a form, you can trigger submit on that form.

<form id="myform" method="post" action="/your_form_handler">
  <input style="width:80%;margin-left:10%;display:none;" class="span2" name="latest" id="latest" type="text" value="">
  <input style="" type="submit" value="Go" name="/latest">
</form>


$(document).ready(function(){
  $("#myform").submit();
});//document ready

score 1 · Answer 2 · answered Jul 18 '16 at 07:05

Suppose your form be like,

<form action="your_url" style="display:none" id="your_form_id">      
    <input style="width:80%;margin-left:10%;" class="span2" name="latest" id="latest" type="text" value="">
    <input style="" type="submit" value="Go" name="/latest">
</from>

If you need to show your form after all elements on the current window loaded, you can use the code below too,

$(window).load(function () {
  $('#your_form_id').show();
});

Apart from here, if you want to submit your form on a specific url depending on your button clicked, then you should use

<input type="button" value="Go" name="Go" id="go"/>

instead of,

<input type="submit" value="Go" name="Go" id="go"/>

because if you use <input type ="submit"...../> then your form submitted according your form action value. So if you want to submit your form to a specific url then use button click function. See the example below,

<form action="to_some_url" id="someForm">
    <input type="button" value="Go" name="Go" id="goButton"/>
    <input type="submit" value="Go" name="Go" id="go"/>
</form>

<script>
$('#goButton').click(function(){
    $("#someForm").action= "another_url";
    $("#someForm").submit();
});
</script>

Here <input type="submit"..../> submits your form to_some_url and <input type="button"...../> submits your form to another_url. If you doesn't got your answer, please let me know.

Difference in jquery submission and button submission

2 Answers2