I've have HTML code from Listrak to display a form on my site. In Listrak, I've asked this form to redirect to a new page on Submit, where there is a second Listrak form. How can I use Javascript or jQuery to auto-populate the email field from Form 1 to Form 2?
Form 1:
<form method="post" action="#" id="form1">
<input type="text" name="email" size="40" maxlength="100" id="email" value=""/>
<input type="text" name="name" size="40" maxlength="100" id="name" value=""/>
<input type="submit" id="submit" value="Submit">
</form>
Form 2:
<form method="post" action="#" id="form2">
<input type="text" name="email" size="40" maxlength="100" id="email" value="auto.populated.from.form1"/>
<input type="text" name="hobbies" size="40" maxlength="100" id="hobbies" value=""/>
<input type="submit" id="submit" value="Submit">
</form>
Related
Please I have these two forms below. The first is the form that submit it's data to my database after my customer buys my product and were redirected to the registration page where the form is, while the second form is the form that submit it's data to my getresponse autoresponder campaign.
Now only the first form is what I wanted to be visible, I don't want the second form to be visible and I want to use one button to submit the two forms at one time, please how will I do that?
Thanks!
<!--====================================================================
Form that submit to my database and register my customers after purchase
======================================================================-->
<form class="form-horizontal templatemo-contact-form-1" role="form" action="sold.php" method="post">
<input type="text" class="form-control" id="name" placeholder="Enter Your First Name Here..." name="fname" required><br>
<input type="text" name="lname" class="form-control" id="name" placeholder="Enter Your Last Name Here..." required><br>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email Here..." required><br>
<input type="text" name="phone" class="form-control" id="name" placeholder="Enter Your Phone Number Here..." required><br>
<input type="password" name="pword" class="form-control" id="website" placeholder="Enter Your Password Here..." required><br>
<input type="password" name="cpword" class="form-control" id="subject" placeholder="Re-enter Your Password Here..." required><br>
<input type="text" name="addrss" class="form-control" id="name" placeholder="Enter Your Address Here..." required><br>
<input type="submit" value="Register" class="btn btn-success pull-right">
</form>
<!--======================================================
Form that submit to my getresponse autoresponder campaign
========================================================-->
<form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post">
<input type="text" name="name" value="Enter your name here..." type=text style="width: 100%">
<input type="text" name="email" value="Enter your email here..." type=text style="width: 100%">
<!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
<input type="hidden" name="campaign_token" value="ljqOk" />
<!-- Thank you page (optional) -->
<input type="hidden" name="thankyou_url" value="https://www.moneycreativesecret.com/spages/smf-sp1/"/>
<!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
<input type="hidden" name="start_day" value="0" />
<!-- Forward form data to your page (optional) -->
<input type="hidden" name="forward_data" value="post" />
<input type="submit" value="100% Free Access" class="btn btn-success pull-right">
</form>
I'm working on a contact-footer. The HTML looks like this:
<form action="indexTest.php" method="post">
<input spellcheck="false" class="first" type="text" name="name" placeholder="name">
<input spellcheck="false" class="first" type="text" name="email" placeholder="email">
<textarea rows="5" spellcheck="false" class="last" type="text" name="message" placeholder="message"></textarea>
<input type="submit" name="submit" value="" id="button" onclick="banner()">
</form>
Now if I click on "submit", the PHP-file is running. But as you see in the code, you see "onclick="banner()". But this doesn't work. Only the PHP works. It would like to run both a Javascript-function and PHP.
I want to achieve that if you click on 'submit'; the PHP-file runs and a banner is displayed by Javascript.
you can use onsubmit() function which first execute function then action event will work
<form onsubmit="return banner();" action="indexTest.php" method="post" name="theForm">
<input spellcheck="false" class="first" type="text" name="name" placeholder="name">
<input spellcheck="false" class="first" type="text" name="email" placeholder="email">
<textarea rows="5" spellcheck="false" class="last" type="text" name="message" placeholder="message"></textarea>
<input type="submit" name="submit" value="" id="button">
</form>
<script type="text/javascript">
function banner(){
alert('working');
document.theForm.submit();
}
</script>
hope it will help you
The javascript function can be attached to the form onsubmit event.
<form action="indexTest.php" method="post" onsubmit="banner()">
<input spellcheck="false" class="first" type="text" name="name" placeholder="name">
<input spellcheck="false" class="first" type="text" name="email" placeholder="email">
<textarea rows="5" spellcheck="false" class="last" type="text" name="message" placeholder="message"></textarea>
<input type="submit" name="submit" value="" id="button">
</form>
The onclick event maybe just run when the button type is "button".
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/
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/
I'm new to mobile development and I am trying to pass information from a form and I want to display it on another page. I have tried passing the info using cookies but with no success..
Here is my code for the form:
function submit_jobs_post(){
$.cookie('job_title', $('#job_title').val());
$.cookie('job_des', $('#job_des').val());
$.cookie('company_name', $('#company_name').val());
$.cookie('company_address', $('#company_address').val());
$.cookie('company_phone', $('#company_phone').val());
$.cookie('company_email', $('#company_email').val());
}
<form method="post" action="jobs_page.html" id="post_ads">
<label for="job_title">Job Title:</label>
<input type="text" name="job_title" id="job_title">
<label for="job_des">Job Description:</label>
<textarea name="job_des" id="job_des"></textarea>
<label for="company_name">Company Name:</label>
<input type="text" name="company_name" id="company_name">
<label for="company_address">Address:</label>
<input type="text" name="company_address" id="company_address">
<label for="company_phone">Phone:</label>
<input type="text" name="company_phone" id="company_phone">
<label for="company_email">Email:</label>
<input type="email" name="company_email" id="company_email" placeholder="Your email..">
<input type="submit" data-inline="true" value="Post Job" onClick='submit_jobs_post()'>
</form>
And here is my code for the page to receive the information. When I submit the form the data does not appear on this page.
window.onload = function()
{
$('#job_title_got').val($.cookie('job_title'));
$('#job_des_got').val($.cookie('job_des'));
$('#company_name_got').val($.cookie('company_name'));
$('#company_address_got').val($.cookie('company_address'));
$('#company_phone_got').val($.cookie('company_phone'));
$('#company_email_got').val($.cookie('company_email'));
};
<input type="text" name="job_title_got" id="job_title_got">
<textarea name="job_des_got" id="job_des_got"></textarea>
<input type="text" name="company_name_got" id="company_name_got">
<input type="text" name="company_address_got" id="company_address_got">
<input type="text" name="company_phone_got" id="company_phone_got">
<input type="email" name="company_email_got" id="company_email_got" >
Any help would be great, thanks in advance...