动态表单附加字段

时间:2017-05-02 11:57:42

标签: javascript jquery html css dynamic

我一直在使用以下js小提琴来做我需要它但我只需要给每个添加一个新的id ..有没有人有任何想法或指针?

感谢。

http://jsfiddle.net/nj4N4/7/

<span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X </span>

2 个答案:

答案 0 :(得分:0)

转到控制台,查看ID

的每个width

var room = 1;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[ id='+ room +']" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div>';
    
    objTo.appendChild(divtest)
}
        
div { padding:10px;}
<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />

       <div id="room_fileds">
           <div>
            <div class='label'>Room 1:</div>
            <div class="content">
                <span>Width: <input type="text" style="width:48px;" name="width[id=1]" value="" /><small>(ft)</small> X </span>
                <span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span>
            </div>
           </div>
        </div>

答案 1 :(得分:0)

length []和width []可以正常工作 - 你将在$ _POST中获得两个数组。然后你可以做类似的事情:

foreach ($_POST['length'] as $key => $val) {
   echo "length: " . $_POST['length'][$key] . ", width: " . $_POST['width'][$key];
}

或者如果你想让它们编号,你可以使用房间号变量“room”,为每个字段编号,如:

divtest.innerHTML = '<div class="label">Room ' + room +':</div><div class="content">';
divtest.innerHTML += '<span>Width: <input type="text" style="width:48px;" name="width_' + room +'" value="" /><small>(ft)</small> X</span>';
divtest.innerHTML += '<span>Length: <input type="text" style="width:48px;" namae="length_' + room +'" value="" /><small>(ft)</small></span>'
divtest.innerHTML += '</div>';