Add Value To URL On Form Submit With Jquery - javascript

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/

Related

HTML form onsubmit error / method="post" not working

I have a working php/mysql form submission and I'm trying to disable the submit button once the form is submitted,
HTML
<form action="" onsubmit="document.getElementById('submit-button').disabled = true;" method="post">
<p><label>Username</label>
<input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label>
<input type="password" name="password" value="" /></p>
<p><label></label>
<input type="submit" id="submit-button" name="submit" value="Login" /></p>
</form>
It works fine without the onsubmit but when I add it i guess the post method isnt firing. I tried adding:
onsubmit="document.getElementById('submit-button').disabled = true; return true;"
but no luck.
Instead of using javascript. You can directly use php
<form action="" method="post">
<p><label>Username</label><input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label><input type="password" name="password" value="" /></p>
<p><label></label><input type="submit" id="submit-button" name="submit" value="Login" <?php echo ('POST' == $_SERVER['REQUEST_METHOD']) ? 'disabled' : ''?>/></p>
</form>
If you post then submit button will be disabled.
It seems that your form is submitted directly, executing the 'action' tag. If you want to stay on the same form try using an AJAX request instead..
Try:
<form action="" method="post">
<p><label>Username</label>
<input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label>
<input type="password" name="password" value="" /></p>
<p><label></label>
<input type="submit" id="submit-button" name="submit" value="Login" /></p>
</form>
with following script:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$("#submit-button").on("click", function(e){
// For demo purpose
e.preventDefault();
document.getElementById("submit-button").disabled = true;
});
</script>
Using jquery,
<form action="" method="post">
<p><label>Username</label><input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label><input type="password" name="password" value="" /></p>
<p><label></label><input type="submit" id="submit-button" name="submit" value="Login"/></p>
</form>
within script tags,
$(function(){
$("#submit-button").click(function(){
$("#submit-button").prop("disabled", true);
});
});

Form does not shows on clicking using JS

I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/

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>

Sending Dual Forms with one submit, while pulling the email field from first Form into the second

I have two forms I need to send - the first form is a PHP mailer that takes the info from a bunch of fields and mails it to a recipent. That form has a checkbox and if checked I need the email from that for to be sent via ANOTHER form to a list server adding them to mailing list. I need all this to happen when clicking the submit button from the first form. Can anyone help me with a solution. Thanks.
Form
<form class="form_1" method="post" enctype="multipart/form-data" onSubmit="return validate()">
<div class="field">
<div class="text2">
<input type="text" id="name" value="<?php echo $_POST['name'];?>" name="name" title="Name" />
</div>
<!--text2-->
<div class="req">*</div>
<!--req-->
</div>
<!--field-->
<div class="field field_right">
<div class="text2">
<input type="text" id="email" name="email" value="<?php echo $_POST['email'];?>" title="Email" />
</div>
<!--text2-->
<div class="req">*</div>
<!--req-->
</div>
Sign-up for newsletter
Upload Resume:
<div class="clearer"></div>
<br />
<div class="field">
<input type="submit" value="Send" class="btn3" />
</div>
<!--field-->
</form>
Form 2
<form action="http://www.example.com/mailing_list.html" method="post" name="xxxxxxx" onSubmit="return (!(UPTvalidateform(document.UPTmxxxxxx)));">
<input type="hidden" name="submitaction" value="3">
<input type="hidden" name="mlid" value="xxxxxx">
<input type="hidden" name="siteid" value="xxxxxx">
<input type="hidden" name="tagtype" value="q2">
<input type="hidden" name="demographics" value="-1">
<input type="hidden" name="redirection" value="http://www.xxxx.com/thankyou.php">
<input type="hidden" name="uredirection" value="http://">
<input type="hidden" name="welcome" value="">
<input type="hidden" name="double_optin" value="">
<input type="hidden" name="append" value="">
<input type="hidden" name="update" value="on">
<input type="hidden" name="activity" value="submit">
<tr><td colspan="2"></td></tr><tr><td> </td><td> <div class="text1"><input type="text" name="email" id="email" />
</div></td></tr><tr><td colspan="2"><button type="submit" name="send" value="send" class="button1"></button></td></tr>
On your form, have the button tie back to a javascript event
<input type = 'button' value='Submit!' onclick='submitForms()' />
Then have that javascript function, submitForms, actually submit both of your forms.
document.forms["form1"].submit();
document.forms["form2"].submit();
You will probably need to do the second submission using PHPs curl wrapper so that you only have one form for the user to fill in. Is there any reason you must have two forms?
So it would work like this:
User submits form
Code sends first email
If checkbox checked then submit curl request to second form
Complete
A recent SO answers contains a simple intro to the curl post request process: How to issue HTTP POST request?

Categories

Resources