How to submit form, programatically with jQuery?

Question

I have form, which when is submitted, is making ajax POST request, posting data fetched from form. Form is quite straight forwards.

<form id="form1">
    <input type="text" name="domain" id="field1">
    <input type="submit" name="my-submit" id="my-submit" value="Submit Form" class="btn btn-info btn-lg">
    <!--<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>-->
</form>

Then #response div where returned content is loaded.

# HTML code ...
<div class="modal-body" id="response">
    <p>Some text in the modal.</p>
</div>
# HTML code ...

And finally JavaScript...

$('#form1').submit(function(event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'check.php',
        data: $(this).serialize(),

        success: function (data) {
            //console.log(data);

            $('#response').html(data);
            $("#myModal").modal();
        }
    });
});

But then, I want to check in my index.php script, where all these above is, if is $domain variable passed in URL, like yoursite.com?domain=domain.com, and if is, to call submit(); function programatically with this code:

if(isset($_GET['domain'])) {
    $domain = $_GET['domain'];
    echo $domain;
    echo "
        <script>
            $('#form1').submit();
        </script>
    ";
    //exit();
}

Problem is, that nothing happens. How to achieve desired behaviour?

What does the console says

Tushar
– Tushar

2015-05-28 13:00:23 +00:00
Commented May 28, 2015 at 13:00 — Tushar
– Tushar, Commented May 28, 2015 at 13:00

jeroen · Accepted Answer · 2015-05-28 13:07:29Z

1

You should not do that. There is no reason to serve a page to the client, fill a form automatically and post back to the server.

Instead you should check if $_GET['domain'] domain is set and if it is, you should include your check.php file directly. And you should adapt check.php to handle both POST and GET parameters.

This would save you a round-trip to the client and does not rely on the client having javascript enabled.

answered May 28, 2015 at 13:07

jeroen

91.8k22 gold badges118 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alan Kis Over a year ago

Normally I use POST, and AJAX to post the form data to check.php. Another user case scenario is when user pass variable to URL, like yoursite.com/domain.com (will be rewritten with mod rewrite), but I don't check.php to return data, instead I wan't my index.php returns data. So my index.php will handle both $_GET and $_POST, because my check.php returns plain data to my modal window in index.php.

jeroen Over a year ago

@AlanKis Assuming that check.php echoes the data when you make a POST request, you just need to make sure it stores the variable in case of a GET request (when it is included) so that you can use that variable to generate your modal on page load.

Alan Kis Over a year ago

Brilliant idea, Jeroen. I will echo data in my #response div, but I am not sure how to trigger my modal window with $("#myModal").modal(); , or which event to trigger it, or trigger it programatically.

jeroen Over a year ago

@AlanKis That does not change, you trigger it the same way you do now but when the DOM is ready (standard jQuery) and if $_GET['domain'] is set, like you were trying to do with your automatic submit. The code to open your modal window does not require an ajax call to be made.

Raj · Accepted Answer · 2015-05-28 13:16:30Z

0

<form id="form1">
    <input type="text" name="domain" id="field1">
    <input type="submit" onclick="return call();" value="Submit Form">
</form>

<script type='text/javascript'>
function call()
{
  //ajax code;
  return true;//are your want form submit
  return false;// are your want cannot form submit
}
</script>

Don't forget to put return

answered May 28, 2015 at 13:16

Raj

1431 gold badge1 silver badge12 bronze badges

Collectives™ on Stack Overflow

How to submit form, programatically with jQuery?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related