Loop through all inputs in a form

Ge64 · May 17, 2008

Hi all

At the moment I have the following function which gets 'obj' which represents a HTML form:

   function compilePostData(obj) {
  var poststr = "tags=" + escape(encodeURI(obj.tags.value)) + "&otherstuff=" + escape(encodeURI(obj.tags.value));
  
      makePOSTRequest('action.php', poststr);
   }

Rather than just having 'tags' and 'otherstuff', I would prefer it if the function could loop through and find all the inputs in the form and add them to var poststr automatically (excluding any buttons, if possible). Alternatively, if there is a way for a HTML form to send it's POST data to a javascript function on submit that would be easier. Anybody know how to do either?

Ge64 · May 17, 2008

I've found the answer, but I have a new question. I now use this:

   function compilePostData(obj) {
  var poststr = "";
  for (i = 0; i < obj.elements.length; i++) {
  poststr += "&" + escape(encodeURI(obj.elements[i].name)) + "=" + escape(encodeURI(obj.elements[i].value));
  }
      makePOSTRequest('action.php', poststr);
   }

This works fine, however, is there any way to simplify this? I tried using 'this' instead of 'document.getEle....etc' but it doesn't work, why?

	<form name="searchForm" action="javascript:compilePostData(document.forms['searchForm']);">
Tags to search: <input type="text" name="tags" />
</form>

KevinM1 · May 17, 2008

I've found the answer, but I have a new question. I now use this:
   function compilePostData(obj) {
  var poststr = "";
  for (i = 0; i < obj.elements.length; i++) {
  poststr += "&" + escape(encodeURI(obj.elements[i].name)) + "=" + escape(encodeURI(obj.elements[i].value));
  }
      makePOSTRequest('action.php', poststr);
   }
This works fine, however, is there any way to simplify this? I tried using 'this' instead of 'document.getEle....etc' but it doesn't work, why?
	<form name="searchForm" action="javascript:compilePostData(document.forms['searchForm']);">
Tags to search: <input type="text" name="tags" />
</form>

Hmm, what you're trying to do is a bit odd on the surface. It looks like you're trying to force POST data into a GET-like format.

In any event, your method of going through each input is correct. In order to use 'this', you need the function to know that the object in the current context is the form. I suggest trying some unobtrusive (read: not stuck in the middle of your HTML) JavaScript:

<html>
   <head>
      <title>Blah blah blah</title>
      <script type="text/javascript">
         window.onload = function()
         {
            var searchForm = document.getElementById("searchForm");
            searchForm.onsubmit = compilePostData;
         }

         function compilePostData()
         {
            var postStr = "";

            for(var i = 0; i < this.elements.length; i++)
            {
               postStr += "&" + escape(encodeURI(this.elements[i].name)) + "=" + escape(encodeURI(this.elements[i].value));
            }

            makePOSTRequest('action.php', postStr);
            return false;
         }
      </script>
   </head>
   <body>
   .
   .
   .
   <form id="searchForm" action="action.php" method="POST">
   .
   .
   .
   </form>
   </body>
</html>

With all that said, I don't really see the point in constructing POST data in this way, as PHP can automatically parse a form input's name from the data it holds:

<input type="text" name="tags" />

<?php
   foreach($_POST as $key => $value)
   {
      echo "Form input name: $key -- Form input value: $value"; //This will print: Form input name: tags -- Form input value: 
   }
?>

On the surface, it just looks like you're making more work for yourself, as you'll probably need to parse the name from the value any way. Just something to keep in mind.

Ge64 · May 18, 2008

If you fill in the 'action' field on a form, it will load the page again on submit, however I'm trying to use AJAX to pass the post data to a script so that I don't reload the page. If I could put a javascript function in the 'action' of the form somehow and that would work with method="POST" then that would be the easiest way to get the post data, but if that doesnt work then I need to keep using this. I'm not very good with JS so I haven't found a better way to do it

KevinM1 · May 19, 2008

If you fill in the 'action' field on a form, it will load the page again on submit

True, which is why I wrote, in my rewritten version of your function, 'return false;' Returning false should stop the default action (in this case, normal form submission and subsequent page reload) from happening. This is the same reason why a lot of hyperlinks with onclick callback functions return false -- chances are, you don't want the link to actually be followed.

I suggest trying my version of things before giving up. It might not work right off the bat (I wrote it off the top of my head, so I didn't test it), but something along those lines should work.

In any event, I also suggest trying to separate your JavaScript from your markup. By that, I mean, at the most, things like this:

<html>
<head>
   <title>Blah blah blah</title>
   <script type="text/javascript">
   window.onload = function()
   {
      //JavaScript stuff
   }
   </script>
</head>

<body>
</body>

</html>

But NOT things like this:

<body onload=someFunction()>

The reasons are many, but here's two off the top of my head:

1. By keeping code external, you can create reusable libraries of code. Very helpful if you have a fancy AJAX technique you want to port to another site.

2. You greatly reduce the burden of site construction and maintenance. It works more or less like the relationship between (X)HTML and CSS. By keeping JavaScript external, you can have one (or a handful) of files that give dynamism to your entire site. More than that, you don't have to dig through markup to find script errors. Everything is where it's supposed to be, so fixing/adding to it is much simpler as a result.

Just something to think about. IMO, the upfront work it takes to port everything to external files is nothing compared to combing through markup to copy a neat function or find script errors.

Sign In

Loop through all inputs in a form

Recommended Posts

Ge64

Link to comment

Share on other sites

Ge64

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Ge64

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information