提交表单后如何隐藏表单

Question

我不太擅长编程。 我正在研究一项功能，那就是在提交表单数据后隐藏表单。 这里动态创建的表单数量。 一旦我们提交表单数据，我需要隐藏表单，以防止多次提交表单。 在这里，我在div内使用了表格，我也尝试了div的隐藏。 它无法正常工作，请让我知道解决方案。

 <script> $(document).ready(function(){ $(".nav-tabs a").click(function(){ $(this).tab('show'); }); }); function frmsubmit() { var frm = document.getElemetsByName('formdata')[0]; frm.submit(); frm.reset(); return false; } $('#submit_0').click(function() { $.ajax({ url:"section.php?status=result", data:$('#f_0').serialize(), success:function(data) { alert(data); $('#f_0')[0].reset(); } }); }); // Haven written same code for submit_0 to submit_10 </script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <h3>Enter the values:</h3><br> <ul class="nav nav-tabs"> <?php foreach($clasarr as $temp) { ?> <li><a href="#<?php echo $temp; ?>"> <?php echo $temp; ?> </a </li> <?php } ?> </ul> <div class="tab-content"> <?php $y=0; foreach($clasarr as $temp) { ?> <div id="<?php echo $temp; ?>" class="tab-pane fade"> <form name="formdata" action="" method="post" class="form-horizontal" id="f_<?php echo $y; ?>"> <div class="col-md-offset-2 col-md-10"> <h3> CLASS: <?php echo $temp; ?></h3> </div> <input type="text" name="idr" id="idr" value="<?php echo $id; ?>" hidden> <input type="text" name="clss" id="clss" value="<?php echo $temp; ?>" hidden> <div class="form-group"> <label class="control-label col-sm-2" for="totalb">Budgeted #:</label> <div class="col-sm-3"> <input type="text" class="form-control" name="totalb" id="totalb" value="<?php echo $totalarr[$y]; ?>"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="received">Received #:</label> <div class="col-sm-3"> <input type="text" class="form-control" name="received" id="received_<?php echo $y; ?>" onblur="getcsv(<?php echo $y; ?>),getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)"/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="deleted"> Deleted data #:</label> <div class="col-sm-3"> <input type="text" class="form-control" name="deleted" id="deleted_<?php echo $y; ?>" onblur="getcsv(<?php echo $y; ?>),getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)"/ > </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="csvno"> CSV Number #:</label> <div class="col-sm-3"> <input type="text" class="form-control" name="csvno" id="csvno_<?php echo $y; ?>" onload="getupload(<?php echo $y; ?>)"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="duplicate"> Duplicate #:</label> <div class="col-sm-3"> <input type="text" class="form-control" name="duplicate" id="duplicate_<?php echo $y; ?>" onblur="getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)" onclick="getupload(<?php echo $y; ?>)"/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="upload"> Upload #:</label> <div class="col-sm-3"> <input type="text" class="form-control" name="upload" id="upload_<?php echo $y; ?>"> </div> </div> <br><br> <div class="form-group"> <div class="col-sm-offset-2 col-sm-2"> <input class="btn btn-info" type="submit" name="submit" id="submit_<?php echo $y; ?>" value="submit" onclick="frmsubmit()"> <input class="btn btn-info" type="reset" name="Reset" value="Reset"> </div> </div> </form> </div> <?php $y++; } 

Answer 1

您正在尝试做的一个荒谬的简化版本。 div中的表单，在单击钩子上带有jQuery，在提交单击时将隐藏div。

 $('#submit').click(function() { $('#f_0').hide(); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="f_0"> <form name="formdata" action="" method="post" class="form-horizontal" id="f_1"> <input class="btn btn-info" type="submit" name="submit" id="submit" value="submit"> <input class="btn btn-info" type="reset" name="Reset" value="Reset"> </form> </div> 

Answer 2

您可能不需要input type = "submit"和onclick事件处理程序， submit输入就足够了。

另外，由于使用了ajax来提交表单数据，因此还需要防止提交按钮的默认行为。

用此替换input type "submit"

<input class="btn btn-info" type="submit" name="submit" id="someId" value="submit">

此外，在动态创建表单时，请使用class而不是id（假定id也是动态的，因此每次创建新表单都会更改id）

     <form name="formdata" action="" method="post" class="form-horizontal someFormClass" 
       id="someDynamicId">
                    // rest of the code
        </form>

为了防止默认行为，请添加event.preventDefault(); 在ajax成功委托内部，隐藏了从主体隐藏表单的事件

$('#submitButtonId').click(function(e) {
       e.preventDefault();
        var form = $(this).parents('form.someFormClass');
        $.ajax({
         //Rest of the code
        success:function(){
          $('body').find(form).hide()
         }

       })
    });

希望这个伪代码会有用

Answer 3

@AvinashT但是是否进行了ajax调用？

@ gurvinder372 ajax被调用，并且表单数据成功输入到表中

基于以上讨论，您只需要在成功处理程序中添加此行即可隐藏form

$('#submit_0').closest( "form" ).hide()

这里动态创建的表单数量。 一旦我们提交表单数据，我需要隐藏表单，以防止多次提交表单。

表单被多次提交， 因为您有两个处理程序 （一个通过onclick ，另一个通过submit click事件处理程序）。

您需要从表单标签中删除onclick="frmsubmit()" ，因为submit点击事件处理程序已经负责表单提交。