Add form to existing page with an ajax request

Question

I haven't started coding this yet, so I don't have anything to show. I'm still trying to work out HOW to start. I will have a page that will have various forms on it depending on what the visitor is trying to do. I could put them all in hidden divs and just un-hide them as needed, and update certain field/values with ajax, but that doesn't seem the best idea to me.

Instead, what I was thinking was to send an ajax request to my server and return the HTML of a form, but If I remember correctly, that form won't actually be added to the DOM simply by writing it to the document.

So, my question is either "How do I add that HTML form with all its inputs into the DOM, overwriting any conflicting elements?" or "How should I dynamically add/replace a form on a page."

I am willing to use plain JS or JQuery for this. I use PHP for my server-side code.

While this might be an ***ok*** question, it is still entirely to broad to be sufficiently answered in one try. You will **need** to at least try something if you want people to help. How do you distinguish what works if you haven't experienced what doesn't work? — MonkeyZeus, Feb 25 '14 at 14:49
If you are new to AJAX please check this out: http://stackoverflow.com/questions/20150130/ajax-and-php-to-enter-multiple-forms-input-to-database/20150474#20150474 — MonkeyZeus, Feb 25 '14 at 14:51
And eventually this: http://stackoverflow.com/a/21617685/2191572 — MonkeyZeus, Feb 25 '14 at 14:51
@MonkeyZeus, I was hesitant to ask the question as-is because I know it's not quite enough to be a really GOOD question. I have used ajax enough to run into trouble with added content not showing up in the DOM. It looks like the JQuery `.load()`method mentioned by @Steve abstracts away all my trouble. — TecBrat, Feb 25 '14 at 15:04
I figured you knew what you were getting yourself into considering the `1.4k` rep =) The `success:` callback of AJAX is where you would be able to do something like `$( "#form-container" ).html(data);` granted that your PHP script simply responded with HTML data and you have set `dataType: 'html'` in the AJAX options. — MonkeyZeus, Feb 25 '14 at 16:47
The `.html()` method will overwrite everything that currently exists inside of whatever element `#form-container` pertains to — MonkeyZeus, Feb 25 '14 at 16:48
Just a small remark on that: try to use .done() instead of .success(). The latter method has been deprecated by [jQuery](https://api.jquery.com/jQuery.ajax/) — Ayame__, Feb 26 '14 at 06:45

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

If you want to load HTML via AJAX and place the content into the DOM, the easiest way is by using jQuery's load method.

Here is an example:

$( "#form-container" ).load( "forms/login-form.html" );

This inserts the HTML located at http://yourserver/forms/login-form.html and places it into the element whose ID is form-container.

In the case that you need to do some processing to the HTML before adding it to the DOM, I suggest using jQuery's .get method. There's a good example of this in bejonbee's answer.

edited May 23 '17 at 10:31

Community

1
1

answered Feb 25 '14 at 14:50

Stephen Melvin

3,696
2
27
40

That's almost TOO easy :) Thanks. I'll give it a try. – TecBrat Feb 25 '14 at 14:54
1

I ended up using `.load()` to put the form on the page and `.post()` to submit it. – TecBrat Mar 19 '14 at 07:03

score 0 · Answer 2 · answered Feb 25 '14 at 14:50

0

Since you do not have anything to show, look up jQuery. To be more specific look up what

$.html()
$.appendTo()
$('<form>')
$.load
$.get
$.ajax

do, and it should be fairly clear what will you need to do. http://jquery.com is a great resource.

answered Feb 25 '14 at 14:50

dkasipovic

5,930
1
19
25

score 0 · Answer 3 · answered Feb 25 '14 at 14:51

0

If you're using jQuery it should be as simple as this:

$.get( "ajax/form_html.html", function( data ) {
  var $form = $(data);
  $('.form_container').append($form);
  $form.on('submit', function (event) {
      // handle submit here if needed
  });
});

answered Feb 25 '14 at 14:51

Jonathan Beebe

5,241
3
36
42

If you don't need to parse the data returned by the AJAX request, `.load` can be used instead of `.get` – Stephen Melvin Feb 25 '14 at 14:53
1

True, I just included this as often I need to parse the html, or at least wire up a listener, and it's sometimes convenient to do it within the callback. – Jonathan Beebe Feb 25 '14 at 15:19
That's a good point. I'll add a note in my answer linking to yours. – Stephen Melvin Feb 25 '14 at 15:31

score 0 · Answer 4 · answered Feb 25 '14 at 14:55

If you create a form in your php file say form.php in this way:

<form action="" method="post" >
     <label>Name:</label>
     <input type="text" name="yourname" />
     <!-- more fields go here -->
</form>

You could get the form you need via ajax in jquery and just add it to the page in the div you want.

Say you have a div with ID "container" on the page that would make

$.ajax({url: 'location/of/form.php'}).done(function(data){
  $('#container').append(data); 
})

However your question is very general as MonkeyZeus has pointed out, a little more direction would be nice

score 0 · Answer 5 · answered Feb 25 '14 at 15:02

I can't really add much more to other answers, other than preference. I usually use $.ajax and return the response as a rendered HTML block that can be written to a div when dealing with your scenario:

$.ajax({
    type : "POST",
    url : "YOUR_REQUEST_URL_GOES_HERE.php",
    data : "YOUR_QUERY_STRING_KEY=" + YOUR_VALUE,
    success : function(data) {
        $("#success").html(data);
    },
    error : function(e) {
        $("#error").html(e);
    }
});

If you want a simpler function, use the $.get or $.load as already mentioned as it may serve your purpose more, but I like $.ajax personally.

Add form to existing page with an ajax request

5 Answers5