How to hide an form after form is submitted

Question

I am not that much good at programming. i am working on one feature, that is form hiding after the submit of form data. Here number of forms created dynamically. i need to hide the form once we submit the form data, to prevent multiple submission of form. here i used form inside div i also tried for div hiding. it is not working please let me know the solution.

<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

You may not need both input type = "submit" and onclick event handler, the submit input will be enough.

Also there is a need to prevent default behaviour of the submit button since ajax is used to submit the form data.

Replace the input type "submit" with this

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

Also while dynamically creating the form use a class instead of id(presuming id is also dynamic so every new form creating will change the id)

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

To prevent the default behaviour add event.preventDefault();.Inside the ajax success delegate the event of hiding the form from body

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

       })
    });

Hopefully this pseudo code will be useful

Answer 2

@AvinashT But is the ajax call being made or not?

@gurvinder372 ajax is called and form data is entring into table successfully

Based on above discussion, you just need to add this line in the success handler to hide the form

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

Here number of forms created dynamically. i need to hide the form once we submit the form data, to prevent multiple submission of form.

Form is being submitted multiple times, because you have two handlers (one is via onclick and other via submit click event handler).

You need to remove the onclick="frmsubmit()" from the form tag since submit click event handler is already taking care of form-submission.

Answer 3

A ridiculously simplified version of what you're trying to do. A form, in a div, with a jQuery on click hook that will hide the div on submit click.

$('#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>