jquery submit form and then show results in an existing div

Question

I have a simple one text input form that when submitted, needs to fetch a php file (passing the inputs to the file) and then take the result (just a line of text) and place it in a div and fade that div into view.

Here is what I have now:

<form id=create method=POST action=create.php>
<input type=text name=url>
<input type="submit" value="Create" /> 

<div id=created></div>

What I need is the results of create.php?url=INPUT, to be dynamically loaded into the div called created.

I have the jquery form script, but I haven't been able to get it to work right. But I do have the library loaded (the file).

score 80 · Accepted Answer · answered Aug 02 '09 at 05:54

80

This code should do it. You don't need the Form plugin for something as simple as this:

$('#create').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#created').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});

answered Aug 02 '09 at 05:54

Paolo Bergantino

480,997
81
517
436

2

And since he wants : create.php?url=INPUT - he should set the form method to "GET" – sirrocco Aug 02 '09 at 06:06
I think that was just him describing the data that should be sent. The form's method says POST, so I'm assuming he wants that. – Paolo Bergantino Aug 02 '09 at 06:24
2

**God like!!!** Exactly what I was looking for. For such a simple question that users see on any number of sites every day there is very little documentation/examples on the web about. – Robert Johnstone Jan 21 '11 at 16:51
5

I love how you included the way to use the form method, action and url. Most people would have just given an example by hardcoding those values... – gloomy.penguin Apr 08 '13 at 19:56
This just saved my butt. Also, if you have text ABOVE the form that you need replaced, just stick the text at the top of the form, just INSIDE the
tag. It should render the same unless there's some weird css thing controlling text inside the form.
– Brian Peat Jan 02 '17 at 03:43
To get this to work you have to call `$('#create').submit();` after the above code to trigger it. `$('#create').submit()` is a shortcut for `.on(submit, ...`. – François Constant Sep 21 '21 at 11:39

score 6 · Answer 2 · edited Oct 20 '16 at 07:25

This works also for file upload

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: 'POST',
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {
            $('#created').html(data); //content loads here

        },
        error: function (xhr, desc, err)
        {
            console.log("error");

        }
    });        

});

score 2 · Answer 3 · answered Aug 02 '09 at 05:53

2

You must use AJAX to post the form if you don't want the page to be refreshed.

$('#create').submit(function () {
    $.post('create.php', $('#create').serialize(), function (data, textStatus) {
         $('#created').append(data);
    });
    return false;
});

answered Aug 02 '09 at 05:53

RaYell

69,610
20
126
152

Catching a submit button's click event is not the proper event to catch for a form submission. you want to catch the form's submit event. – Paolo Bergantino Aug 02 '09 at 05:54
I tried this, but it is taking me to the create.php page when i click submit. – mrpatg Aug 02 '09 at 05:59
the `return false;` should prevent that I believe. – cartbeforehorse Oct 29 '12 at 19:45

jquery submit form and then show results in an existing div

3 Answers3

Linked