Develop Reference

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

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>';

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

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

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>

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.

Auto-complete input2 with the value from input1

On page 1.html I have this form:
<form id="my_form" action="2.html">
<input type="text" id="input1" value="" />
<input type="submit" />
</form>
After the user presses the button he is redirected to 2.html. On this page I have this input:
<input type="text" id="input2" value="" />
How can I get input2 "auto-completed" with the value inserted by the user in input1 ?
Tried this:
Changed 2.html to 2.php and <input type="text" id="input2" value="" /> to <input type="text" id="input2" value="<?php echo htmlspecialchars($_POST['input1'])?>" /> - no luck
Different approaches using sessionStorage - no luck.
I must be missing something simple, please help...

In the form on page 1.html you didn't provide a submission method. Try changing it to
<form id="my_form" action="2.html method="POST">
<input type="text" id="input1" name="input1" value="" />
<input type="submit" />
</form>

The reason your script is not working is because #input1 is missing name attribute .. try changing html of #input1 to this :
<input type="text" id="input1" name="input1" value="" />
Also, you were not declaring any method on form, by default if the method is not declared then it is set as GET. As you are getting values on second page by POST, declare form method to POST.
So, the html of form will be:
<form id="my_form" action="2.php" method="POST">
<input type="text" id="input1" name="input1" value="" />
<input type="submit" />
</form>

Add Value To URL On Form Submit With Jquery

I have this form below when i submit it i want it to append a value to the 6 urls generated from a php query.
<form id="emailform" action="" method="post">
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
This is an example of my link, sitename.com/demo.php?1=demo&2=haha How can i use the form and jquery to append &email=formvalue to the url so sitename.com/demo.php?1=demo&2=haha = sitename.com/demo.php?1=demo&2=haha&email=formvalue ?
Please keep in mind that these urls are generated dynamically with a query.
I tried using attr on a but it doesnt work. I know you have to check for the submit then use attr.
$('#emailForm').submit(function(){ //listen for submit event
}

You can use hidden field like this
<form action="" method="post">
<input type="hidden" name="new_value" value="value"/>
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
or you can add to action of form like this
<form action="http://action_url?new_value=value" method="post">
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>

You'd better to use markup input type="hidden" to submit the value
Your Form :
<form action = "sitename.com/demo.php" method="post" >
<input type="hidden" name="1" value="demo" />
<input type="hidden" name="2" value="haha" />
<input type="text" value="" size="30" name="email" />
<input type="submit" name="submit" value="Submit" class="containue-button" />
</form>
Then you just need to submit this form in javascript or jquery.
: )

use serilaize method
$('#emailForm').submit(function(){
//listen for submit event
var all_submit_data = $( '#emailForm' ).serialize() ;
//this will have all input fields values in serilized
}
ref : https://api.jquery.com/serialize/

Select all inputs within the form the triggered the function

I am trying to find away to select all inputs within a form using jquery, where the trigger was initiated from. so for example if the button was clicked in form 1 only the inputs from form 1 would be selected, and nothing from form 2 would be selected.
<form action="" method="POST"> <!--form 1-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input type="button" onclick="doit()" />
</form>
<form action="" method="POST"> <!--form 2-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input type="button" onclick="doit()" />
</form>

Try this...
$(':button').on('click', function(){
var form = $(this).parents('form:first');
$(form).children().each(function(evt){
if($(this).attr('type') == 'text'){
alert(this.value);
}
});
});
See this Example jsFiddle
Greetings.

$('input[type=button]').click(function(){
console.log( $('input',$(this).closest('form')) )
});
http://jsfiddle.net/kR3ws/1/

Use the event target to get to the parent form and the find all inputs in that form
function doit(event){
$(event.target).parent("form").find("input")
}
for this to work you will have change your html of the anchor tag to
<input type="button" onclick="doit(event)" />

Add id fields to your buttons and forms.
<form id="form1" action="" method="POST"> <!--form 1-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input id="btn1" type="button" onclick="doit()" />
</form>
<form id="form2" action="" method="POST"> <!--form 2-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input id="btn2" type="button" onclick="doit()" />
</form>
Then declare event like this :
$('#btn1').click(function(){
var data = $('#form1').serialize();
alert('form1 : '+data);
});
$('#btn2').click(function(){
var data = $('#form2').serialize();
alert('form2 : '+data);
});

Results page in other window

I have this simple form:
<form method="post" action".">
<input type="text" name="title">
<input type="submit" name"send">
</form>
I want that when a user click on submit, then will be open another window of browser with the results. Is it possible?

If you just need to open a new window:
<form method="post" action="..." target="_blank">
...
If you want a popup or lightbox or anything scripty:
<form method="post" action="..." onsubmit="yourFunction()">

Use this
<form method="post" action"thepagetodisplay.php">
<input type="text" name="title" id="title">
<input type="submit" name"send">
</form>
on thepagetodisplay.php
extract($_POST);
echo $title;