为什么当我为表单处理添加$. AJAX 时,添加输入字段的jquery停止工作?

qyyhg6bp  于 2022-12-12  发布在  jQuery
关注(0)|答案(1)|浏览(141)

我正在编写一段要求用户输入文本的代码。此外,用户可以选择单击“Click to add”来创建一个额外的文本输入字段。我可以使用下面的jQuery来实现此功能。但是,当我尝试添加更多的jQuery来使用PHP处理用户输入时(这是从下面的.js文件中var dataString的设置开始的),我发现最初的“单击添加”功能停止工作了。
我很难理解为什么,任何一个人能提供的见解都是很好的。
这是我的HTML:

<body>

<div id="form_inputs">
    <a href="#" id="add">click to add</a>
    <form method="POST">
        <div id="input">
            <p><input type="text" name="user_response[]" id="u_response" /></p>
        </div>
    </form>
    <button id="submit">submit answers</button>
</div>

这是我当前的js文件:$(函数()

3qpi33ja

3qpi33ja1#

AJAX 调用不会处理用户输入,因为它是在ready函数中调用的,需要使用click事件处理程序(就像您在remove和add中所做的那样)绑定到submit按钮。(这也需要在 AJAX 调用的click事件中)所以尝试选择器var dataString = $('input[name=user_response]').val();对于新生成的输入,s必须是唯一的,所以使用某种数字来给予它唯一的id(比如count变量)。对于remove按钮也需要这样(尝试将其作为remove类而不是id类,并更新您的click事件处理程序来使用它)。

$("#submit").live("click",function()
{
   var inputs = $('input[name^=user_response]');
   var dataString = [];
   for(var i = 0; i < inputs.length; i++)
   {
          dataString.push($(inputs[i]).val());
   }

$.ajax ({
    type: "POST",
    url: "test3.php",
    data: {'user_response':dataString},
    success: function(){
        $('#form_inputs').html('<div id="message"></div>');
        $('#message').html('<h4>thanks for submitting</h4>');
    }
})
});

如果你想做的事情有意义的话,你可以将dataString保留为一个数组,或者将它设置为一个真字符串,但是你会希望循环遍历每个输入,或者它只给予第一个输入(可能有更有效的方法使用jquery循环遍历)。

相关问题