jquery on submit form search for its corresponding div and hide form

Question

I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms Below is the html i have the same class name for all the forms and for the submit class also.

<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post"> 
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
 </form>
</div>

<div id="wpcf7-f63-p1-o2">

 <form name="" class="" action="" method = "post"> 
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
 <input type="submit" value="Send" class="but" />
 </form>
</div>

i tried the below code

<script> 
jQuery(".wpcf7-form").submit(function() 
{ 
jQuery("^wpcf7-f63-p1-").hide(); 
});
</script>'; 

Answer 1

In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();

Answer 2

Use this on form submit

 $('input[type="submit"]').click(function() {
      $form = $(this).parent();
      $('<p><a href="#">link to form</a></p>').insertBefore($form);
      $form.hide();
    });

Answer 3

Are you looking for jquery .find() ?

you could do something like this:

  $('form').submit(function(){ $(this).find('.myForm').hide(); $(this).find('.link').show(); } 

 .link { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form name="" class="" action="" method = "post"> <div class="myForm"> <input type="text" name="your-name" value="" size="40" /> <input type="text" name="email" value="" size="40" /> <input type="submit" value="Send" class="but" /> </div> <a class="link" href="#">Link</a> </form> 

Answer 4

ah error on your jquery selector, change your js to:

jQuery(".wpcf7-form").submit(function() 
{ 
jQuery("[id^='wpcf7-f63-p1-']").hide() 
return false;
});

working jsfiddle code

NB. you may need to delete the return false , I added it to see the elements getting disappeared after submit.