如何在.append输入字段

时间:2017-05-18 06:14:40

标签: javascript jquery html mysql ajax

我有一个按钮,可以创建一个新的输入字段和一个默认字段

<div class="container1">
   <button class="add_form_field">Add Title</button>
   <div class="form-group label-floating">
      <input type="text" id="title_name">
   </div>
</div>

这是创建新输入字段的jquery。

var max_fields      = 10;
var wrapper         = $(".container1"); 
var add_button      = $(".add_form_field"); 

var x = 1; 
$(add_button).click(function(e){ 
    e.preventDefault();
    if(x < max_fields){ 
        x++; 
        $(wrapper).append('<div><input type="text" id="title_name"/><a href="#" class="delete">Delete</a></div>'); //add input box
    }
else
{
alert('You Reached the limits')
}
});

$(wrapper).on("click",".delete", function(e){ 
    e.preventDefault(); $(this).parent('div').remove(); x--;
});

我有一个ajax调用,根据登录的用户从我的数据库中获取标题名称。

$.ajax({
        url:'../ajax/getprofile.php',
        type:'POST',
        data:{userid:user},
        dataType:'JSON',
        success: function(result){
        $('#title_name').val(result.title_name);
        }
});

当我使用console.log(result)来查看返回的数据时,我的ajax请求只返回了一个数据。enter image description here

我之前没有在我的问题中包含其他数据因为这些数据只返回一个数据..我只有title_name的问题

此代码仅适用于默认输入字段..就像来自我的数据库的数据仅显示在默认输入字段上而不显示在附加的输入字段上。

说我的用户ID为10001,我的数据库看起来像这样 的 tbl_title

id    |   name
10001 | sample
10001 | test

我想要实现的是,当我从ajax发出请求并返回请求的值时,它将显示在我的输入字段上。由于我的id类似于tbl_title(id),它应该显示两个数据输入字段。但不幸的是,只有第一个数据才显示在默认输入字段上我想要做的是,如果数据大于1,它也会显示在附加的输入字段上..但我不知道这是如何工作的。

b4我只有一个正在返回的数据,所以我更新了我的mysql以返回所有具有相似id的数据,所以现在我得到array1array2 array1在图片和array2上类似于图片,但唯一的区别是他们的title_name ..所以我应该怎么做才能在输入字段的数组上显示我的两个title_name

1 个答案:

答案 0 :(得分:0)

每个输入的id都相同。所以jQuery占据了这一行的第一个问题:

$('#title_name').val(result.title_name);

这就是为什么只有第一个输入有效...

尝试改变它:

$(wrapper).append('<div><input type="text" id="input_' + x + '"/> ...

$('#input' + x ).val(result.title_name);

可能不完全正确,但推动正确的方向;)身份证是问题。