使用JavaScript动态添加表单元素 - 不提交 [英] Add form element dynamically using javascript -- not submitting

问题描述

编辑：我从头开始解决了这个问题。对不起，浪费你们大家的时间。如果您感觉如此倾向，请投票结束。

当通过JavaScript添加输入字段时，我无法获取表单中的实际数据。这些字段显示在正确的位置，但是当我在服务器端执行var_dump（fieldname）时，没有任何内容显示出来。使用Live HTTP标头进行检查告诉我，浏览器并未尝试提交动态添加的表单域。

我是否需要以某种方式附加动态创建的表单输入到表单？

我的代码：

HTML

 < form id =att_formmethod =postname =add_attachmentsenctype =multipart / form-dataaction =＃ > 
 < - 低于输入以证明表单提交，而不是添加了dyn元素 - > 
< input name =data [one]type =text/> 
< div id =add_fields>< / div> 
< input type =submit/> 
< / form> 
  

Javascript

  function addFormField（）
 {
 var id = 1; 
 var htm =< p id ='row+ id +'>< input type ='text'size = '20'name ='txt []'id ='txt+ id +'/>< / p>; 
 $（＃add_fields.append（htm）; 
} 
  

当我提交表单时，我的名为data [one]的输入显示为一个POSTd值，但是添加了addFormField（）的输入不会显示在HTML中，而是显示在正确的位置，但不会POST。我需要将该元素作为子元素附加到我的表单元素中才能提交？

我见过提交使用javascript添加的表单输入字段这是我将数据专门添加到表单子的想法，但是将需要对CSS进行一些重构，所以我希望在上面的代码中可以做到简单。

预先感谢！

编辑：修正了错别字，但仍然不能正常工作我已经决定使用上面SO链接中讨论的免费JS方法，因为工作正常。

代码中有很多拼写错误。例如，你没有关闭jQuery的选择器标签。

你把
$（＃add_fields.append（ htm）;

应该是
$（＃add_fields）。append（htm） ;

但我相信你的问题主要在于在你如何试图通过PHP访问这些值时，我只是将你的源代码放在一个测试页面中，并且如果你正确地访问了这些值，它就会工作。 > <？php
foreach（$ _REQUEST ['txt'] as $ printme）
echo $ printme。< br />;
？ >


上述来源正常运作。

Edit: I fixed the problem by just starting from scratch. Sorry to waste y'alls time. Please vote to close if you feel so inclined.

I'm having trouble getting the actual data in a form to submit when the input fields are added via javascript. The fields show up, and in the right place, but when I do a var_dump( fieldname) on the server side, nothing is showing up. Inspecting with Live HTTP headers tells me that the browser isn't trying to submit the dynamically added form fields.

Do I need to somehow "attach" my dynamically created form inputs to the form?

My code:

HTML

<form id="att_form" method="post" name="add_attachments" enctype="multipart/form-data" action="#">
<-- below input to prove form submits, just not the dyn added elements -->
<input name="data[one]" type="text" />
<div id="add_fields"></div>
<input type="submit" />
</form>

Javascript

function addFormField()
{
 var id = 1;
 var htm = "<p id='row" + id + "'><input type='text' size='20' name='txt[]' id='txt" + id + "' /></p>";
 $("#add_fields".append( htm );
}

When I submit the form, my input named data[one] shows up as a POSTd value, but those added with addFormField() do not. They show up, in the HTML, at the correct place, but don't POST. Do I need to append the element as a child to my form element to get it to submit?

I've seen Submit form input fields added with javascript which is where I got the idea of appending the data specifically to the form child, but that will require some restructuring of my CSS. So, I'm hoping that it's something simple I can do in the above code.

Thanks in advance!

edit: fixed the typos, but still not working. I've decided to use the library free JS method discussed in the SO link above, as that works fine. Thanks for the help though!

解决方案

There were a lot of typos in your code. For example, you didn't close the selector tag for jquery.

You put $("#add_fields".append( htm );

Should have been $("#add_fields").append( htm );

Notice the missing parantheses.

But I believe your problem lies mainly in how you're trying to access the values through PHP. I just put your source in a test page and it all works if you access the values correctly.

<?php
foreach ($_REQUEST['txt'] as $printme) 
    echo $printme."<br/>";
?>

The above source works fine.

这篇关于使用JavaScript动态添加表单元素 - 不提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！