doonbfez815298
2014-10-24 20:40
浏览 139

ajax发送动态创建的输入框的值

I would like to send the values of dynamically generated input boxes to the php page. I got the below code which appends input box on click from another question and was wondering how could I be able to pass the values as an array to php page. can someone help me out?

<fieldset id="buildyourform">
<legend>Build your own form!</legend>
</fieldset>
<button class='sbn'>Add</button><!--this adds input boxes-->
<button class=submit">submit</button>a

$(document).ready(function() {
$(".sbn").click(function() {
    var intId = $("#buildyourform div").length + 1;
    var fieldWrapper = $("<div class='fieldwrapper' id='field' + intId + '>");
    var fName = $("<input type='text' class='fieldname form-control xd'/>");
    var removeButton = $("<input type='button' class='remove btn btn-primary' value='-' />");
    removeButton.click(function() {
        $(this).parent().remove();
    });
    fieldWrapper.append(fName);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);
});

$('.submit').click(function(){
    $.ajax({
        method:'POST',
        url:'test.php',
        data:{},
        success:function(response){
            //
        }
    });

 });
 });

图片转代码服务由CSDN问答提供 功能建议

我想将动态生成的输入框的值发送到php页面。 我得到下面的代码,从另一个问题点击附加输入框,并想知道我怎么能够将值作为数组传递给php页面。 有人可以帮助我吗?

 &lt; fieldset id =“buildyourform”&gt; 
&lt; legend&gt;构建您自己的表单!&lt; / legend&gt; 
&lt; / fieldset&gt  ; 
&lt; button class ='sbn'&gt;添加&lt; / button&gt;&lt;! - 这会添加输入框 - &gt; 
&lt; button class = submit“&gt; submit&lt; / button&gt; a 
 
  $(document).ready(function(){
 $(“。sbn”)。click(function(){
 var intId = $(“#buildyourform div”)。length + 1; 
 var fieldWrapper =  $(“&lt; div class ='fieldwrapper'id ='field'+ intId +'&gt;”); 
 var fName = $(“&lt; input type ='text'class ='fieldname form-control xd'  /&gt;“); 
 var removeButton = $(”&lt; input type ='button'class ='remove btn btn-primary'value =' - '/&gt;“); 
 removeButton.click(function(  ){
 $(this).parent()。remove(); 
}); 
 fieldWrapper.append(fName); 
 fieldWrapper.append(removeButton); 
 $(“#buildyourform”)。  append(fieldWrapper); 
}); 
 
 $('。submit')。click(function(){
 $ .ajax({
 method:'POST',
 url:'test。  php',
 data:{},
  success:function(response){
 // 
} 
}); 
 
}); 
}); 
   
 
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongzhengzhong1282 2014-10-24 20:45
    已采纳

    Corrected many items in the code. Here is the form (with proper form tags added) -

    <form name="myForm" action="" method="post">
    <fieldset id="buildyourform">
        <legend>Build your own form!</legend>
    </fieldset>
    </form>
    <button class='sbn'>Add</button>
    <!--this adds input boxes-->
    <button class="submit">submit</button>
    

    Here is the jQuery -

    $(".sbn").click(function () {
        var intId = $("#buildyourform div").length + 1;
        var fieldWrapper = $("<div class='fieldwrapper' id='field' + intId + '>");
        var fName = $("<input name='foo[]' type='text' class='fieldname form-control xd'/>"); // name added to element
        var removeButton = $("<input type='button' class='remove btn btn-primary' value='-' />");
        removeButton.click(function () {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(removeButton);
        $('#buildyourform').append(fieldWrapper);
    });
    
    $('.submit').click(function () {
        var formValues = $('.fieldname').serialize(); // gathers all of the form data from the elements with the class fieldname
        $.ajax({
            method: 'POST',
            url: '/echo/html/', // this is for the jsfiddle test, change to your URL
            data: formValues, // put the variable here
            success: function (response) {
                //
            }
        });
    });
    

    Most notably here is the addition of a name to the input fields and serializing only the ones that we want. You cannot post an input without a name, it just fails silently. Here is a working example Open the browsers console to see the posted data.

    打赏 评论
  • dongyipa0028 2014-10-24 20:52

    Try this:

    HTML:

    <form>
        <fieldset id="buildyourform">
            <legend>Build your own form!</legend>
        </fieldset>
        <button class='sbn'>Add</button><!--this adds input boxes-->
        <button class="submit">submit</button>
    </form>
    

    JS:

    $(document).ready(function() {
            $(".sbn").click(function(e) {
                e.preventDefault();
                var intId = $("#buildyourform div").length + 1;
                var fieldWrapper = $("<div class='fieldwrapper' id='field" + intId + "'>");
                var fName = $("<input name='test" + intId + "'' type='text' class='fieldname form-control xd'/>");
                var removeButton = $("<input type='button' class='remove btn btn-primary' value='-' />");
                removeButton.click(function() {
                    $(this).parent().remove();
                });
                fieldWrapper.append(fName);
                fieldWrapper.append(removeButton);
                $("#buildyourform").append(fieldWrapper);
            });
    
            $('form').submit(function(e) {
                 e.preventDefault();
                var postdata = $(this).serializeArray();
                $.post('test.php', postdata , function (response) {
                      console.log(response);
                      //
                });
            });
        });
    
    打赏 评论

相关推荐 更多相似问题