Question

我正在处理一些代码，要求用户输入文本。此外，用户可以选择单击“单击以添加”以创建其他文本输入字段。我能够使用下面的jquery来使用此功能。但是，当我尝试添加更多jquery来处理PHP的用户输入时（这首先在下面的.js文件中设置var dataString），我发现最初的“click to add”功能停止了工作。

我很难理解为什么以及任何可以提供的见解都会很棒。

这是我的HTML：

<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文件：

$(function() {

var count = $('#form_inputs p').length + 1;

$('#add').live('click', function(){
    $('<p><input type="text" name="user_response[]" id="u_response" /><a href="#" id="remove">remove</a></p>').appendTo('#input');
    count++;
    return false;
});

$('#remove').live('click', function(){
   if(count > 2)
   {
        $(this).parents('p').remove();
        count--;
        return false;
   }
});

var dataString = $('input#user_response').val();

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

Answer 1

您的ajax调用不会处理用户输入，因为它在ready函数中被调用，需要使用click事件处理程序与提交按钮绑定，就像使用remove和add一样。你也试图在dataString的名称上选择（也需要在ajax调用的click事件中），所以尝试选择器var dataString = $('input[name=user_response]').val();此外，新生成的输入的id必须是唯一的，所以使用一些为其赋予唯一ID的数字（如count变量）。删除按钮也是如此（尝试将其设为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）。

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

1 个答案: