Dynamically created form values not being POST'ed

Forum Moderators: open

Message Too Old, No Replies

Dynamically created form values not being POST'ed

javascript dynamic form values not being posted

mattdw

8:42 pm on Aug 6, 2009 (gmt 0)

I have an issue I've been Googling for and haven't come up with an answer to yet. So I have some Javascript that allows for the dynamic adding of form elements, which works just fine. The problem comes when submitting the form--the newly created form fields are not submitted. If I add a little 'alert' to the submit button, I can see the values from the form just fine. However, the new values are not making it back to my CGI script. Using FireBug in FireFox, I can see that the POST data indeed does not even contain my new form variables. This is a snippet of code I have been using to create the form variables:

var newrow = document.createElement('tr');
var td1 = document.createElement('td');
td1.setAttribute('valign', 'top');
var input1 = document.createElement('input');
input1.type = 'text';
input1.setAttribute('size', 5);
input1.name = 'name2';
input1.value = '';
td1.appendChild(input1);
newrow.appendChild(td1);

Thanks for any input or suggestions.

dmcleary

10:03 am on Aug 7, 2009 (gmt 0)

Hi mattdw,

Not sure the direct answer to that but as a work around could you put the appropriate elements in the form but set them to display:none, only making them visible when appropriate?

Other than that, good luck with it.

Regards,

David

mattdw

1:01 pm on Aug 7, 2009 (gmt 0)

Hi David,

Thanks for the suggestion. Unfortunately in this case, that probably isn't the best solution, because I need the form elements to be created dynamically as needed. Basically I have some set form fields, and when you click a link, it adds duplicates of that field each time, so there is no way to tell how many times the user might need to click the link.

What I might do if I can't get this figured out soon is just eschew the javascript and instead just make the link send the page back to the server to generate the new fields. I just wanted the javascript solution because it is more elegant and avoids all the page refreshing.

Fotiman

1:35 pm on Aug 7, 2009 (gmt 0)

I just gave it a try with no problems. Below is a simple PHP test case. It checks to see if 'name2' exists in the POSTed form. If it does, then it just prints out the POSTed data, otherwise it will display the form.


<?php
if (array_key_exists('name2', $_POST)) {
  print_r($_POST);
  exit;
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>Untitled</title>
</head>
<body>
<div>
<form method="POST">
<table>
  <tbody id="formRows">
    <tr>
      <td><input type="text" name="foo"></td>
    </tr>
  </tbody>
</table>
<input type="submit" value="Submit">
</form>
</div>
<!-- Scripts -->
<script type="text/javascript">
var formRows = document.getElementById('formRows');
var newrow = document.createElement('tr');
var td1 = document.createElement('td'); 
td1.setAttribute('valign', 'top'); 
var input1 = document.createElement('input'); 
input1.type = 'text'; 
input1.setAttribute('size', 5); 
input1.name = 'name2'; 
input1.value = '';
td1.appendChild(input1);
newrow.appendChild(td1);
formRows.appendChild(newrow);
</script>
</body>
</html>

In that example I'm only appending a single input, but it shouldn't matter if you append more. When I submit the form, I saw that the data was correctly posted.

mattdw

2:30 pm on Aug 7, 2009 (gmt 0)

I figured out what it was. Fotiman, I also did a simplified test case. The actual code was more involved--I had simplified it for posting, which is why it ended up working. Turns out the CGI code I was working in that was generating the forms had a closing </form> tag out of place with some table tags. For some reason, while the browsers would choose to ignore this and post the hard-coded form values, the dynamic ones were being skipped. Once the tag issues were sorted out, the form posted as expected. Thanks for all of the suggestions and input.