如何在每个按钮单击的单独行中添加文本框?

时间:2014-10-16 11:46:23

标签: php html

我是php的新手,并且每次点击标题为添加房间的按钮时,都会添加有两个文本框的房间行。 请建议我如何进行。并且对于每个添加的房间行,应该有单个提交按钮。

前 - :

Room 1   textbox1 textbox2
Room 2   textbox1 textbox2

Button(Add room)

Button(Submit)

enter image description here

3 个答案:

答案 0 :(得分:1)

以下是我大部分时间都使用的代码:

<script>
$(document).ready(function(){
$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});
});
</script>

HTML

<div class="multi-field-wrapper">
         <div class="multi-fields">

          <div class="multi-field">
                <input name="file[]"  id="text" class="emcee_field1" style="float:none; margin-left:15px;" value="<?php echo $video[$rj]; ?>" type="text" required/>
                <input type="text" name="video_de[]"  class="emcee_field1" value="<?php echo $video_description[$rj]; ?>" style="float:none; min-width:200px; min-height:20px;" required>
                <img src="../images/cross_icon.png" class="remove-field"/>
          </div>

         </div>
         <button type="button" class="add-field">Add Video</button>
        </div>

答案 1 :(得分:0)

您必须创建html表单才能获取信息 http://www.w3schools.com/html/html_forms.asp

您应该在表单操作中添加文件名以引用.php文件。

<form action = "rooms.php">

你应该确定形成方法(POST或GET)
http://www.w3schools.com/tags/ref_httpmethods.asp

最后,您创建.php文件和$ _GET或$ _POST表单输入名称,您可以了解哪个房间在哪个变量。

答案 2 :(得分:0)

您可能应该使用jQuery。 类似的东西:

<script>
$(function(){
  $("button#addRoom").click(function(){
    $("div#rooms").append("<div class='room'>Demo</div><textarea class='roomText'></textarea>");
  })
})
</script>

然后你的html就像这样:

<div id="rooms">
  <div class='room'></div>
  <textarea class='roomText'></textarea>
</div>
<button id="addRoom">Add a new room</button>
<button type="submit">Submit</button>

我没有对此进行测试,因此您可能应该进行一些更改以使其正常工作。别忘了在这个上导入jQuery。