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

时间:2017-02-10 07:35:21

标签: javascript php jquery css mysql

我正在研究这个项目。客户订单的第二阶段,订单必须拆分多个订单。

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

自昨天以来,我一直在努力,差不多整整一天。我已经实现了添加子订单按钮,它可以工作,但是在每个子订单中,我有一个样式代码不会在该子订单中显示所需的文本框但只在第一个子订单中,请不要使用Javascript,我需要帮助修复它以及如何获取子序列并将它们发布到我的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>

非常感谢您的帮助。

0 个答案:

没有答案
相关问题