Fatal编程技术网
  • javascript/
  • javascript验证在模式框的“添加更多”按钮中不起作用？

javascript验证在模式框的“添加更多”按钮中不起作用？

javascript php jquery

javascript验证在模式框的“添加更多”按钮中不起作用？,javascript,php,jquery,Javascript,Php,Jquery,我有一个包含表单的模式按钮，该表单包含添加字段的添加更多按钮。问题是添加更多按钮内的验证不起作用 下面是我的代码： index.php <a href="new_user_popup.php" style="color:white" target="_blank" data-toggle="modal" data-target="#myModal"> <button type="button" class="btn btn-info new_entry_btn" s

我有一个包含表单的模式按钮，该表单包含添加字段的添加更多按钮。问题是添加更多按钮内的验证不起作用

下面是我的代码： index.php

<a href="new_user_popup.php" style="color:white" target="_blank" data-toggle="modal" data-target="#myModal">

     <button type="button" class="btn btn-info new_entry_btn" style="margin-left:0%">
       New Entry
     </button>
    </a>

<script type="text/javascript">
$(function(){

$('#trigger').click(function(){
  $('#myModal').modal('show');
  return false;
})

});

$('#myModal').on('shown.bs.modal', function () {
    $(this).find('.modal-dialog').css({width:'auto',
                               height:'auto', 
                              'max-height':'100%'});
});
</script>

<div class="container">


    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Content will be loaded here from "remote.php" file -->
            </div>
        </div>
    </div>
</div>
**new_user_popup.php**

        <div class="col-md-8 col-sm-12 col-24">
            <div class="input_fields" style="color:black">
                 <button class="add_field  btn " onclick="incrementValue()" style="margin-left: 443px;">Add</button>
                 <div>
                 <input type="text" name="mytextt[]" hidden="" ></div>
        </div>
        </div>

<script type="text/javascript">


     $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields"); //Fields wrapper
    var add_button      = $(".add_field"); //Add button ID

    var wrapper_pre1         = $(".present_fields_1"); //Fields wrapper
    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 incrementa

              $('<div style="margin-left:50%;"><div class="form-group"><label class="control-label" for="selectbasic" style="margin-left:-220px;">Type of work</label><div class="col-md-6"><select id="type_of_work[]" name="type_of_work[]" class="form-control" style="margin-left:17%;width:222%"><option value="Option one">Audit Report</option><option value="Option two">ITR filing</option><option value="Option three">VAT Filing</option><option value="Option four">Accounting</option><option value="Option five">Registration</option><option value="Option six">Certification</option><option value="Option seven">Others</option></select></div></div><div class="form-group"> <label class="col-md-4 control-label" for="selectbasic" style="margin-left:-29%">Status</label><div class="col-md-6"><select id="status11' + x + '" name="status[]" style="width:210%;margin-left:-1%;" class="form-control"><option value="Pending">Pending</option><option value="Work in process">Work in process</option><option value="Completed">Completed</option></select></div></div><div class="form-group row"><label for="example-date-input" class="col-2 col-form-label" style="margin-left:-15.5%;";">DATE</label><div class="col-8"><input class="form-control datepicker pick" id="datee' + x + '" name="date[]" value="<?php echo $_POST['date'] ?>" style="width:86%;margin-left:10.6%;margin-top:-10%;" type="text" readonly></div></div><div class="form-group"><label class="col-md-4 control-label" for="textinput" style="margin-left:-36%">Comment</label><div class="col-md-4"><input id="comments11' + x + '" name="comment[]" type="text" placeholder="" class="form-control input-md" style="width:342%;margin-left:20%"></div></div></center><a href="#" class="remove_field" style="margin-left: 197px; margin-top: -40px;position:absolute"><img src="images/del24.png"></a></a></div>').insertBefore(add_button) //add input box        
     var newInput=$("#datee"+ x).datepicker({dateFormat: 'dd/mm/yy'});
          newInput.datepicker({dateFormat: 'dd/mm/yy'}).datepicker("setDate", new Date());
          $("#status11" + x).click(function () {

            if ($("#status11" + x).val() == "Completed") {
                $("#comments11" + x).attr("required", "required");
            }
            else
              $("#comments11" + x).attr("required", false);
        });

      }
    });

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

    $(wrapper_pre1).on("click",".remove_field_pre1", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

    </script>


$（函数（）{
$（“#触发器”）。单击（函数（）{
$（'myModal'）.modal（'show'）；
返回false；
})
});
$（'#myModal'）.on（'show.bs.modal'，function（）{
$（this.find（'.modal dialog'）.css（{width:'auto'，
高度：'自动'，
“最大高度”：“100%”；
});
**新建用户弹出窗口.php**
添加
$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields”）；//字段包装器
var add_button=$（“.add_字段”）；//添加按钮ID
var wrapper_pre1=$（“.present_fields_1”）；//字段包装器
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x$（'工作审核报告类型IT存档VAT存档AccountingRegistrationCertification其他状态PendingWork in processCompleted，因为该字段在大多数情况下都是使用$（文档）自动生成的：

改变这个


 $("#status11" + x).click(function () {

            if ($("#status11" + x).val() == "Completed") {
                $("#comments11" + x).attr("required", "required");
            }
            else
              $("#comments11" + x).attr("required", false);
        });

      }
    });


致：

//应该是这样的


<script type="text/javascript">


     $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields"); //Fields wrapper
    var add_button      = $(".add_field"); //Add button ID

    var wrapper_pre1         = $(".present_fields_1"); //Fields wrapper
    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 incrementa

              $('<div style="margin-left:50%;"><div class="form-group"><label class="control-label" for="selectbasic" style="margin-left:-220px;">Type of work</label><div class="col-md-6"><select id="type_of_work[]" name="type_of_work[]" class="form-control" style="margin-left:17%;width:222%"><option value="Option one">Audit Report</option><option value="Option two">ITR filing</option><option value="Option three">VAT Filing</option><option value="Option four">Accounting</option><option value="Option five">Registration</option><option value="Option six">Certification</option><option value="Option seven">Others</option></select></div></div><div class="form-group"> <label class="col-md-4 control-label" for="selectbasic" style="margin-left:-29%">Status</label><div class="col-md-6"><select id="status11' + x + '" name="status[]" style="width:210%;margin-left:-1%;" class="form-control"><option value="Pending">Pending</option><option value="Work in process">Work in process</option><option value="Completed">Completed</option></select></div></div><div class="form-group row"><label for="example-date-input" class="col-2 col-form-label" style="margin-left:-15.5%;";">DATE</label><div class="col-8"><input class="form-control datepicker pick" id="datee' + x + '" name="date[]" value="<?php echo $_POST['date'] ?>" style="width:86%;margin-left:10.6%;margin-top:-10%;" type="text" readonly></div></div><div class="form-group"><label class="col-md-4 control-label" for="textinput" style="margin-left:-36%">Comment</label><div class="col-md-4"><input id="comments11' + x + '" name="comment[]" type="text" placeholder="" class="form-control input-md" style="width:342%;margin-left:20%"></div></div></center><a href="#" class="remove_field" style="margin-left: 197px; margin-top: -40px;position:absolute"><img src="images/del24.png"></a></a></div>').insertBefore(add_button) //add input box        
     var newInput=$("#datee"+ x).datepicker({dateFormat: 'dd/mm/yy'});
          newInput.datepicker({dateFormat: 'dd/mm/yy'}).datepicker("setDate", new Date());
      }
  });


     $(document).on('click',"#status11" + x,function () {

            if ($(this).val().toLowerCase() == "completed") {
                $("#comments11" + x).attr("required", "required");
            }
            else{
              $("#comments11" + x).attr("required", false);
            }
    });


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

    $(wrapper_pre1).on("click",".remove_field_pre1", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

    </script>




$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields”）；//字段包装器
var add_button=$（“.add_字段”）；//添加按钮ID
var wrapper_pre1=$（“.present_fields_1”）；//字段包装器
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x$（'工作审核报告类型IT归档增值税归档会计注册证书其他状态待处理工作已完成此逻辑也不起作用您还有其他逻辑吗idea@razzbeeremove来自$（添加按钮）的验证部分。单击（函数（e）{}）是的，js中的html导致了这个问题，格式非常好。我有一个模态名称新条目。当我点击模态窗体弹出窗口时，它包含添加按钮，动态添加字段。javascript在添加中不起作用button@razzee

<script type="text/javascript">


     $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields"); //Fields wrapper
    var add_button      = $(".add_field"); //Add button ID

    var wrapper_pre1         = $(".present_fields_1"); //Fields wrapper
    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 incrementa

              $('<div style="margin-left:50%;"><div class="form-group"><label class="control-label" for="selectbasic" style="margin-left:-220px;">Type of work</label><div class="col-md-6"><select id="type_of_work[]" name="type_of_work[]" class="form-control" style="margin-left:17%;width:222%"><option value="Option one">Audit Report</option><option value="Option two">ITR filing</option><option value="Option three">VAT Filing</option><option value="Option four">Accounting</option><option value="Option five">Registration</option><option value="Option six">Certification</option><option value="Option seven">Others</option></select></div></div><div class="form-group"> <label class="col-md-4 control-label" for="selectbasic" style="margin-left:-29%">Status</label><div class="col-md-6"><select id="status11' + x + '" name="status[]" style="width:210%;margin-left:-1%;" class="form-control"><option value="Pending">Pending</option><option value="Work in process">Work in process</option><option value="Completed">Completed</option></select></div></div><div class="form-group row"><label for="example-date-input" class="col-2 col-form-label" style="margin-left:-15.5%;";">DATE</label><div class="col-8"><input class="form-control datepicker pick" id="datee' + x + '" name="date[]" value="<?php echo $_POST['date'] ?>" style="width:86%;margin-left:10.6%;margin-top:-10%;" type="text" readonly></div></div><div class="form-group"><label class="col-md-4 control-label" for="textinput" style="margin-left:-36%">Comment</label><div class="col-md-4"><input id="comments11' + x + '" name="comment[]" type="text" placeholder="" class="form-control input-md" style="width:342%;margin-left:20%"></div></div></center><a href="#" class="remove_field" style="margin-left: 197px; margin-top: -40px;position:absolute"><img src="images/del24.png"></a></a></div>').insertBefore(add_button) //add input box        
     var newInput=$("#datee"+ x).datepicker({dateFormat: 'dd/mm/yy'});
          newInput.datepicker({dateFormat: 'dd/mm/yy'}).datepicker("setDate", new Date());
      }
  });


     $(document).on('click',"#status11" + x,function () {

            if ($(this).val().toLowerCase() == "completed") {
                $("#comments11" + x).attr("required", "required");
            }
            else{
              $("#comments11" + x).attr("required", false);
            }
    });


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

    $(wrapper_pre1).on("click",".remove_field_pre1", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

    </script>