在按钮单击和选项上添加新的div以选择显示文本框的选项

最佳资源

我正在进行这个项目。客户订单的第二阶段,必须将订单拆分为多个订单。

在每个新的div上,如果单击“添加另一个子订单”按钮,则用户可以上传示例材料,输入客户的要求,并回答他/她是否有样式代码的问题,如果可以,请从选项中选择并输入代码在将出现的文本框中,这对于每个子订单都是可能的。

从昨天开始,我一直在研究它,已经差不多整整了一天。我已经实现了添加子订单按钮,它可以工作,但是在每个子订单中,我都有样式代码,该代码不会在该子订单中显示所需的文本框,而只会在第一个子订单中显示,请对Java语言不满意,我需要帮助修复该问题以及如何获取子订单数组并将其发布到我的php变量中以提交给数据库。我认为名称字段必须以某种方式通过javascript递增,以便唯一地标识每个字段,请有人帮助我,完全迷失了前进的方向。

下面是我的代码;

<script>
  function showfield(name){
    if(name=='style[]')document.getElementById('div1').innerHTML='<label>Enter Style Code</label><br /> <input type="text" name="style[]" />';
    else document.getElementById('div1').innerHTML='';
  }
  $(document).ready(function() {
        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $(".form-group"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID
        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
          e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div style="margin-top:20px; border-top:1px solid #333333;"><label>Upload Sample Material</label><br /><input type="file" name="staff_passport" style="width:200px; height: 40px;" /><br/><br/><label>Customer&#39s Requirement</label><br /><textarea name="cust_requirement" style="width:200px; height: 150px;" /></textarea><br/><br/><label>Do you have a style</label><br /><select name="sketch_code" id="sketch_code" onchange="showfield(this.options[this.selectedIndex].value)"><option value="style[]">I have a style code</option><option value="">I don&#39t have a style code</option></select><div id="div1"></div><br /><a href="#" class="remove_field">Remove</a></div>'); //add input box
              }
            });
        $(wrapper).on("click",".remove_field", function(e){ //user click on remove  text
          e.preventDefault(); $(this).parent('div').remove(); x--;
        })
      });
    </script>

    <form action="orderadd2.php" method="post">
      <div class="form-group">
        <button class="add_field_button">Add another sub-order</button>
        <div style="margin-top:20px;">
          <label>Upload Sample Material</label><br />
          <input type="file" name="sample_material[]" style="width:200px; height: 40px;" /><br/><br/>
          <label>Customer's Requirement</label><br />
          <textarea name="cust_requirement[]" style="width:200px; height: 150px;" /></textarea><br/><br/>
          <label>Do you have a style</label><br />
          <select name="sketch_code" id="sketch_code" onchange="showfield(this.options[this.selectedIndex].value)">
            <option value="">I don't have a style code</option>
            <option value="style[]">I have a style code</option>
          </select>
          <div id="div1"></div>
        </div>
      </div>
      <input type="submit" class="btn btn-lg btn-color btn-block" value="ADD">
    </form>

非常感谢您的提前帮助。

bipin patel

我已经更改了您的代码,您可以使用jquery轻松地做到这一点,用此代码替换您的代码

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  function showfield(name,event){

  if(name=='iHaveStyle') {
    $(event).next('#div1').html('<label>Enter Style Code</label><br /> <input type="text" name="style[]" />');
  } else{
     $(event).next('#div1').html('');
  }

  }
  $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".form-group"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
      e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div style="margin-top:20px; border-top:1px solid #333333;"><label>Upload Sample Material</label><br /><input type="file" name="staff_passport[]" style="width:200px; height: 40px;" /><br/><br/><label>Customer&#39s Requirement</label><br /><textarea name="cust_requirement[]" style="width:200px; height: 150px;" /></textarea><br/><br/><label>Do you have a style</label><br /><select name="sketch_code" id="sketch_code" onchange="showfield(this.options[this.selectedIndex].value,this)"><option value="iHaveStyle">I have a style code</option><option value="">I don&#39t have a style code</option></select><div id="div1"></div><br /><a href="#" class="remove_field">Remove</a></div>'); //add input box
          }
        });
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove  text
      e.preventDefault(); $(this).parent('div').remove(); x--;
    })
  });
</script>

<form action="orderadd2.php" method="post">
  <div class="form-group">
    <button class="add_field_button">Add another sub-order</button>
    <div style="margin-top:20px;">
      <label>Upload Sample Material</label><br />
      <input type="file" name="sample_material[]" style="width:200px; height: 40px;" /><br/><br/>
      <label>Customer's Requirement</label><br />
      <textarea name="cust_requirement[]" style="width:200px; height: 150px;" /></textarea><br/><br/>
      <label>Do you have a style</label><br />
      <select name="sketch_code" id="sketch_code" onchange="showfield(this.options[this.selectedIndex].value,this)">
        <option value="">I don't have a style code</option>
        <option value="iHaveStyle">I have a style code</option>
      </select>
      <div id="div1"></div>
    </div>
  </div>
  <input type="submit" class="btn btn-lg btn-color btn-block" value="ADD">
</form>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

选择选项后显示文本框

来自分类Dev

如何从组合框填充文本框和选项按钮?

来自分类Dev

如何在按钮单击上浏览选项卡

来自分类Dev

使用JQUERY在按钮单击上打开新选项卡

来自分类Dev

当特定的选项是从下拉列表中动态表单角选择显示隐藏的文本框

来自分类Dev

单击选择按钮上的选项时如何显示图像?

来自分类Dev

在按钮上单击,通过文本框javascript循环

来自分类Dev

<JSP>如何使用选择框选项显示不同的输入文本框

来自分类Dev

使用VB在Word 2007中选择选项按钮时启用ActiveX文本框

来自分类Dev

单击按钮时显示文本框

来自分类Dev

在按钮上显示div单击

来自分类Dev

jQuery在文本框中添加/删除多个选择框选项

来自分类Dev

使用javascript在按钮单击上添加文本框

来自分类Dev

如果重新加载页面后仍选择其他选项,则显示隐藏的文本框

来自分类Dev

按钮上的Java单击可为文本框添加值

来自分类Dev

jQuery仅在先前div的文本框值不为空的情况下,在按钮单击上添加新的div

来自分类Dev

在按钮上单击INSERT从表格内的多个控件插入多个(文本框和标签)文本

来自分类Dev

在按钮上单击ng js的ng-repeat表行中突出显示文本框

来自分类Dev

单击tr隐藏并显示文本框,然后单击按钮在div中打印相同的文本框

来自分类Dev

使用JQUERY在按钮单击上打开新选项卡

来自分类Dev

单击按钮时无法显示文本框中的文本?

来自分类Dev

如何在单击按钮时在div上添加图像和文本框

来自分类Dev

动态选择框如何从我的文本框值向选择框动态添加选项

来自分类Dev

单击按钮添加新标签和文本框

来自分类Dev

单击按钮后在文本框中显示checkBox的文本

来自分类Dev

单击kendo按钮时如何在div中添加新的文本框?

来自分类Dev

使用 C# WPF 在按钮单击事件上使用文本框值更新 SQL 条目

来自分类Dev

单击按钮时,在 Shiny Application 的新选项卡中显示数据框的选择

来自分类Dev

基于选项按钮选择的 VBA 更新文本框值

Related 相关文章

  1. 1

    选择选项后显示文本框

  2. 2

    如何从组合框填充文本框和选项按钮?

  3. 3

    如何在按钮单击上浏览选项卡

  4. 4

    使用JQUERY在按钮单击上打开新选项卡

  5. 5

    当特定的选项是从下拉列表中动态表单角选择显示隐藏的文本框

  6. 6

    单击选择按钮上的选项时如何显示图像?

  7. 7

    在按钮上单击,通过文本框javascript循环

  8. 8

    <JSP>如何使用选择框选项显示不同的输入文本框

  9. 9

    使用VB在Word 2007中选择选项按钮时启用ActiveX文本框

  10. 10

    单击按钮时显示文本框

  11. 11

    在按钮上显示div单击

  12. 12

    jQuery在文本框中添加/删除多个选择框选项

  13. 13

    使用javascript在按钮单击上添加文本框

  14. 14

    如果重新加载页面后仍选择其他选项,则显示隐藏的文本框

  15. 15

    按钮上的Java单击可为文本框添加值

  16. 16

    jQuery仅在先前div的文本框值不为空的情况下,在按钮单击上添加新的div

  17. 17

    在按钮上单击INSERT从表格内的多个控件插入多个(文本框和标签)文本

  18. 18

    在按钮上单击ng js的ng-repeat表行中突出显示文本框

  19. 19

    单击tr隐藏并显示文本框,然后单击按钮在div中打印相同的文本框

  20. 20

    使用JQUERY在按钮单击上打开新选项卡

  21. 21

    单击按钮时无法显示文本框中的文本?

  22. 22

    如何在单击按钮时在div上添加图像和文本框

  23. 23

    动态选择框如何从我的文本框值向选择框动态添加选项

  24. 24

    单击按钮添加新标签和文本框

  25. 25

    单击按钮后在文本框中显示checkBox的文本

  26. 26

    单击kendo按钮时如何在div中添加新的文本框?

  27. 27

    使用 C# WPF 在按钮单击事件上使用文本框值更新 SQL 条目

  28. 28

    单击按钮时,在 Shiny Application 的新选项卡中显示数据框的选择

  29. 29

    基于选项按钮选择的 VBA 更新文本框值

热门标签

归档