www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to properly submit for with ajax but without jquery

  1. #1
    Join Date
    Apr 2014
    Posts
    42

    How to properly submit for with ajax but without jquery

    First off, let me say that I've 'never' asked for code on a forum, but I've all but waved the white flag for this one. I'm trying to submit a form without a page refresh. I've tried writing my jquery (using ajax) code 40 different times from 40 different developers' advice, to no avail. So dare I say this is my last try. So my question is.

    How would I submit the following HTML form with ajax (without jquery) using the old school method (or the long way).
    Code:
    <form name='comment_form' id='comment_form' action='' method='POST'>              
               <input type='text' name='user_comment' id='user_coment' class='user_comment' placeholder='Leave a comment...' required>
                 <input type='hidden' name='hidden_folder' value='$random_directory'>
                 <input type='hidden' name='hidden_title' value='$title'>
                 <input type='hidden' name='hidden_name'  value='$image_name'>
                 <input type='hidden' name='hidden_location' value='$image_location'>
                 <input type='hidden' name='hidden_user' value='$posted_by'>      
                 <button type='submit' class='leave_comment button' name='leave_comment' required>Comment</button>
                 </form>

  2. #2
    Join Date
    Apr 2014
    Posts
    42
    P.S. (i'd like the action of the form to be the php page the form is already on)

  3. #3
    What you are looking for is called "serializing" -- you have to turn it into a query string... even when sending as POST.

    A simple form serialize goes something like this:
    Code:
    function serialize(formId) {
    	var
    		form = document.getElementById(formId);
    		tagList = form.getElementsByTagName('input'),
    		result = [],
    		t;
    	for (t = 0; t < tagList.length; t++) {
    		result.push(tagList[t].name + '=' +  encodeURIComponent(tagList[t].value));
    	}
    	tagList = form.getElementsByTagName('textarea');
    	for (t = 0; t < tagList.length; t++) {
    		result.push(tagList[t].name + '=' +  encodeURIComponent(tagList[t].value));
    	}
    	tagList = form.getElementsByTagName('select');
    	for (t = 0; t < tagList.length; t++) {
    		result.push(tagList[t].name + '=' +  encodeURIComponent(
    			tagList[t].options[tagList[t].selectedIndex].value
    		));
    	}
    	return result.join('&');
    }
    You can then pass that string to your .send() method on your AJAX object. For example:

    ajax.send(serialize('comment_form'));

    Now that said, it might help if you built a valid form since you have no block levels separating the input from their parent (you can't put INPUT directly under form, that's invalid markup -- use a FIELDSET!) and seem to be using PLACEHOLDER like it was a LABEL -- it isn't. :P

    It was bad enough when people were using JS to piss on form usability, without the W3C making an attribute for people to incorrectly use and abuse for same!

    Oh, side note. Unlike a real form submit, this will send ALL INPUT[submit], not just the one you clicked on. On a 'real' version you might want to filter all type="submit" and then add the one that was actually clicked on from your onsubmit handler.
    Last edited by deathshadow; 08-07-2014 at 01:59 AM. Reason: ooops, forgot ampersands between fields.

  4. #4
    Join Date
    Mar 2009
    Posts
    523
    Another approach you could use is to place your form in an iframe. After submission you can keep polling to see when a response is received and then extract the data from the iframe once it is and then do with it whatever it is you want. That might be simpler and easier to modify if needed.

  5. #5
    Join Date
    Oct 2013
    Posts
    609
    Quote Originally Posted by deathshadow View Post
    you can't put INPUT directly under form, that's invalid markup -- use a FIELDSET!
    Quiz:

    Which of the following does not validate?
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>HTML4.01 form</title>
    </head>
    <body>
    <h1>My form</h1>
    <form action="#">
    <fieldset>
    <input id="name" name="name" type="text">
    <input id="address" name="address" type="text">
    </fieldset>
    </form>
    </body>
    </html>
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>XHTML form</title>
    </head>
    <body>
    <h1>My form</h1>
    <form action="#">
    <p>
    <input id="name" name="name" type="text"/>
    <input id="address" name="address" type="text"/>
    </p>
    </form>
    </body>
    </html>
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 form</title>
    </head>
    <body>
    <form action="#">
    <input id="name" name="name" type="text">
    <input id="address" name="address" type="text">
    </form>
    </body>
    </html>
    Trick question
    Last edited by Kevin2; 08-07-2014 at 08:07 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles