referral-page.php
I have submitted email data and store in DB and then goto Primary page
<form action="store-db.php">
<input type="text" name="email" />
<input type="submit" value="Submit" />
</form>
I have stored email data in DB using ajax ( this was completed ). but I want to post email value to primary-page.php
primary-page.php ( email field should be prefilled if I come from referral otherwise it should be empty value )
<form action="thank-you.php">
<input type="text" name="name" value="" />
<input type="text" name="email" value="<?php echo !empty($_POST['email']) ? $_POST['email'] : ''; ?>" />
<input type="submit" value="Submit" />
</form>
After the ajax call to the DB has succeeded, why not just redirect to the thank you page, sending the email address in the query string ($_GET)?
Or maybe better: just submit to the php page and do the db storage there, before outputting "thank you" or "error"?
myself form action changed to primary-page.php
<form action="primary-page.php" id="primary_page">
<input type="text" name="email" />
<input type="submit" value="Submit" />
</form>
1) data validate and stored in DB using ajax ( store-db.php )
2) email value post to primary-page.php using function frm_submit()
var form_validate = $("#primary_page");
form_validate.validate({
rules: {
email: {
required: true,
email: true
}
},
submitHandler: function () {
var param = form_validate.serialize();
var btn_submit = $("#submit");
$.ajax({
type: "POST",
url: '/store-db.php',
data: param,
cache: false,
dataType: "json",
success: function (response) {
frm_submit();
}
});
});
function frm_submit() {
form = document.getElementById('primary_page');
form.submit();
}
Related
I'm parsing some form data into Ajax and looking to fire a block of php code.
So in the code I'm currently alerting out the email address on submit, I want to parse this into the newsletter_signup function and run the php block of code at the very bottom, with the email address from the form going into the php.
How can I do that?
<form action="/event" method="POST" id="signupForm">
<input type="hidden" name="event" value="mc_newsletter_add">
<input type="hidden" name="data[source]" value="newsletter">
<input checked=checked type="checkbox" name="data[newsletter_onetime]" id="newsletter_onetime" class="newsletter-optins">
<input checked=checked type="checkbox" name="data[promos]" id="promos" class="newsletter-optins">
<input class="modal-newsletter-input" id="EmailAddress" name="data[customers_email_address]" placeholder="Enter your email here" required="required" type="email" value="<?php if(isset($_GET['email'])){echo $_GET['email'];}?>" aria-required="true">
<input class="modal-newsletter-signup" id="newslettersignup" name="Submit" type="submit" value="Yes, sign me up" />
</form>
<script>
$("#signupForm").submit(function(e) {
e.preventDefault();
var form = $(this);
var email = $("#EmailAddress").val();
$.ajax({
type: "POST",
url: form.attr('action'),
data: form.serialize(),
success: function(data)
{
console.log(data); //data contain response from your php script
register_signup();
newsletter_signup(email);
form.replaceWith("<br /><p>Thanks for signing up!</p>");
}
});
});
function register_signup(){
ga( 'send', 'event', 'Newsletter Sign Up', 'submit' );
}
function newsletter_signup(email){
$('#signupForm').load(
"newsletter-call.php",
{
'key1': email,
}
);
}
</script>
Then this calls a php called newsletter-call.php with the following in:
<script type="text/javascript">
alert("Hit the page");
</script>
<?php $sib_tracking = new SIB_Tracking();
$email = $_POST['key1'];
$event = "marketing";
$result = $sib_tracking->track_event($email, $event); ?>
You can simply pass the email address through.
newsletter_signup(email);
And then proceed to use it as a parameter.
function newsletter_signup(email) {
console.log(email);
}
As to using it in the PHP, you could use the ajax request to perform the php action before outputting it to the JavaScript function.
Following the examples on this page: http://www.formget.com/submit-form-using-ajax-php-and-jquery/
I am converting the forms on one of my sites to use ajax for submission, that way uses can use the forward and back buttons, and their info isn't showing up in the address bar.
It's worked so far, on pages that have a single form. But one page has multiple forms on it.
Form from campers.php
<form id="retro1457806069">
<input type="hidden" id="class" name="classa" value="retro">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>
<form id="two1457806069">
<input type="hidden" id="class" name="classa" value="classtwo">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>
<form id="three1457806069">
<input type="hidden" id="class" name="classa" value="classthree">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>
Those are the actual form codes generated by my script (with all the excess text and such removed around them.
script.js:
$(document).ready(function() {
$("#submit").click(function() {
var classa = $("#classa").val();
var type = $("#type").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'class=' + classa + '&type=' + type;
if (classa == '' || type == '') {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "campersub.php",
data: dataString,
cache: false,
success: function(result) {
window.location.assign("gear.php")
}
});
}
return false;
});
});
campersub.php
<?php
session_start();
$_SESSION["class"]=$_POST["class"];
$_SESSION["type"]=$_POST["type"];
echo "Success.";
?>
The problem is, instead of adding the form information to the $_SESSION array and redirecting the browser to gear.php when I click on the first submit button, absolutely nothing happens. But when I click on the second or third submit buttons it redirects the page to campers.php?classa=classone&type=1 for example.
I have modified some things, having in mind mainly: 'Id attributes must be unique in the document'
(Even, If there are not other references in the code to the form elements by id then the id attribute can be removed)
So I have renamed ids as they have an unique value, then I fetch the click event for catch any input submit
NOTE: I have accessed to the other elements from the parent (its form) which contains the last clicked element because I'm not sure if it is the entire HTML you have.
campers.php
<form id="retro1457806069">
<input type="hidden" id="class1" name="classa" value="retro">
<input type="hidden" id="type1" name="type" value="1">
<input type="submit" id="submit1" value="Rent This Camper"></form>
<form id="two1457806069">
<input type="hidden" id="class2" name="classa" value="classtwo">
<input type="hidden" id="type2" name="type" value="1">
<input type="submit" id="submit2" value="Rent This Camper"></form>
<form id="three1457806069">
<input type="hidden" id="class3" name="classa" value="classthree">
<input type="hidden" id="type3" name="type" value="1">
<input type="submit" id="submit3" value="Rent This Camper"></form>
script.js
$(document).ready(function() {
$("input[type=submit]").click(function(e) {
// **Accesing by proximty of the last clicked element, and by its name.
e.preventDefault();
var classa = $(this).parent('form').find('input[name="classa"]').val();
var type = $(this).parent('form').find('input[name="type"]').val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'class=' + classa + '&type=' + type;
if (classa == '' || type == '') {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "campersub.php",
data: dataString,
cache: false,
success: function(result) {
window.location.assign("gear.php")
}
});
}
return false;
});
});
I think it must run with these changes...
i'm new to programming. I need to develop a rating system with check boxes and text-fields where user clicks the subjects from the list and add his rating/experience in the text field as shown in below image.
This is my HTML code.
<form action="" method="post">
<input type="checkbox" id="1" name="cb[1]" value="" onclick="document.getElementById('t1').disabled=!this.checked;" />
<label for="1">Checkbox No. 1</label>
<input type="number" max="5" min="1" id="t1" name="t[1]" value="" disabled="disabled" /><br /><br />
<input type="checkbox" id="2" name="cb[2]" value="" onclick="document.getElementById('t2').disabled=!this.checked;"/>
<label for="2">Checkbox No. 2</label>
<input type="number" max="5" min="1"id="t2" name="t[2]" value="" disabled="disabled" /><br /><br />
<input type="checkbox" id="3" name="cb[3]" value="" onclick="document.getElementById('t3').disabled=!this.checked;"/>
<label for="3">Checkbox No. 3</label>
<input type="number" max="5" min="1"id="t3" name="t[3]" value="" disabled="disabled" /><br /><br />
<input type="checkbox" id="4" name="cb[4]" value="" onclick="document.getElementById('t4').disabled=!this.checked;"/>
<label for="4">Checkbox No. 4</label>
<input type="number" max="5" min="1"id="t4" name="t[4]" value="" disabled="disabled" /><br /><br />
<input name="submit" type="submit" value="Submit" />
</form>
This is my php function.
global $usedTexts;
$usedTexts = array();
function postdata(){
if ( isset($_POST['submit']) && array_key_exists("t", $_POST) && is_array($_POST["t"]) && array_key_exists("cb", $_POST) && is_array($_POST["cb"])) {
$usedTexts = array_intersect_key($_POST["t"], $_POST["cb"]);
foreach($usedTexts as $subjectId=>$subjectExp){
if($subjectExp!=null){
echo "This is checkbox id = " . $subjectId . " and This is text field value = " . $subjectExp . "<br />";
}
}
}
}
I'm using wordpress and I want to submit checkbox ID and text Field value without refreshing the browser using Ajax. And also I want to display check box id and value as shown in the picture. I would be very much appreciated if someone can provide ajax code for this. Thanks :)
You can code this using XMLHttpRequest Object or an easier not necessary better is using JQuery. JQUERY AJAX API
Then you can do something like this
$('form').submit(function(event) { //make sure you give your form an ID
event.preventDefault();
$.ajax({ // Initiate an ajax call
type: "POST", // You seem to want post HTTP call
url: "URLPATH/youphpcode.php",
dataType: "json", // this is the data type to return usually JSON
data: votes,//data to send USUALLY JSON or hashmap/array
success: function(d)
{
$('#displayMSG').HTML('Your Votes have been submitted') // Maybe display a message or error.
}
});
});
To find out what fields they enabled and selected the values I have added a script here.
http://jsfiddle.net/eMEYP/10/
var votes = {}; // initialize it globally
$('#form').submit(function (event) {
event.preventDefault();
var votes = {}; // reset and empty the votes
$('input[type=number]:enabled').each(function (i) { // Check inputs by type and which are enabled and run a for each
votes[$(this).attr('id')] = $(this).val(); // Add items to the hashmap
});
var json = JSON.stringify(votes); //you can send DATA as the HASH or stringify it.
});
FULL CODE *
$('form').submit(function(event) { //make sure you give your form an ID
event.preventDefault();
var votes = {}; // reset and empty the votes
$('input[type=number]:enabled').each(function (i) { // Check inputs by type and which are enabled and run a for each
votes[$(this).attr('id')] = $(this).val(); // Add items to the hashmap
});
$.ajax({ // Initiate an ajax call
type: "POST", // You seem to want post HTTP call
url: "URLPATH/youphpcode.php",
dataType: "json", // this is the data type to return usually JSON
data: votes,//data to send USUALLY JSON or hashmap/array
success: function(d)
{
$('#displayMSG').HTML('Your Votes have been submitted') // Maybe display a message or error.
}
});
});
Use JQuery to prevent the default submit behavior of the form when you click the Submit button. It is like this but it is incomplete:
$('#form').submit(function(event){
event.preventDefault(); //This line prevents the default submit action of the id #form
//Put your AJAX code here that will submit your checkbox and textbox data
})
See http://api.jquery.com/submit/
I have a form and I need to add some data from database before submiting it.
My html code is:
<form action="https://91.199.226.106/services/authorize.php" id="arca" method="POST">
<input type="hidden" name="hostID" id="hostID"/>
<input type="hidden" name="mid" id="mid" />
<input type="hidden" name="tid" id="tid" />
<input type="hidden" name="additionalURL" id="additionalURL" />
<input type="hidden" name="orderID" id="orderID" />
<input type="hidden" name="currency" id="currency" />
<input type="hidden" name="opaque" />
amount<input type="text" name="amount" id="amount" value="" /><br>
<input type="submit" value="submit" />
</form>
<div id="script_area"></div>
<div id="error_area"></div>
And I have an event handler for form submit. Here is the code:
$("#arca").submit(function(e){
e.preventDefault();
var data="amount="+$("#amount").val()+"&&lang=eng";
$.ajax({
url: "ajax/get_arca_submit_params.php",
type: "POST",
data: data,
cache: false,
success: function (html) {
var splited=html.split("|",2);
if(splited[0]=="0")
{
$("#error_area").html(splited[1]);
}
else
{
$("#script_area").html(splited[1]);
$("#arca").submit();
//alert("aaaaa");
}
}
});
});
The PHP returns
"0|error message" or "1|script that sets fields values" that I place
in the div with id="script_area"
. The problem is that $("#arca").submit(); line ceeps on submiting the form on and on. How can I solve this problem? Thanks for help.
Replace $("#arca").submit(); with $("#arca")[0].submit();. This way you are calling the submit event on the underlying DOM element which won't trigger your callback and avoid the infinite loop.
You could change to bind a click event to submit button instead.
$("#arca").find('input[type="submit"]').click(function (e) {
e.preventDefault();
var data = "amount=" + $("#amount").val() + "&&lang=eng";
$.ajax({
url: "ajax/get_arca_submit_params.php",
type: "POST",
data: data,
cache: false,
success: function (html) {
var splited = html.split("|", 2);
if (splited[0] == "0") {
$("#error_area").html(splited[1]);
} else {
$("#script_area").html(splited[1]);
$("#arca").submit();
//alert("aaaaa");
}
}
});
});
i am using the following code to auto-submit a form
<script type="text/javascript">
$(function () {
$('#submit').click();
});
</script>
<div style="display:none">
<form method="post" action="http://mydomain/texting/register.php?list_id=15">
<input type="hidden" name="name" value="<?php echo $_SESSION['name2']; ?>" />
<input type="hidden" name="email" value="<?php echo $_SESSION['email2']; ?>" />
<input type="hidden" name="ok" value="1" />
<input type="submit" id="submit" value="Sign Up" style="visibility:hidden;" />
</form>
</div>
i want to submit the same data to two urls ...
http://mydomain/texting/register.php?list_id=15
http://mydomain.com/texting/register.php?list_id=<?php echo $_SESSION['city2']; ?>
how can edit my code to submit same form data automatically?
i tried this code
<script type="text/javascript">
function submitTwice(f){
f.action = 'http://mydomain.com/texting/register.php?list_id=<?php echo $_SESSION['city2']; ?>';
f.target='ifr1';
f.submit();
f.action = 'http://mydomain.com/texting/register.php?list_id=15';
f.target='ifr2';
f.submit();
}
</script>
*/
<script type="text/javascript">
$(function () {
$('submitTwice(f)').click();
});
</script>
<div style="display:none">
<iframe name="ifr1" width="20" height="20">
<form method="post" action="http://mydomain.com/texting/register.php?list_id=<?php echo $_SESSION['city2']; ?>">
<input type="hidden" name="name" value="<?php echo $_SESSION['name2']; ?>" />
<input type="hidden" name="email" value="<?php echo $_SESSION['email2']; ?>" />
<input type="hidden" name="ok" value="1" />
<input type="submit" id="submit" value="Sign Up" style="visibility:hidden;" />
</form></iframe>
</div>
<div style="display:none"><iframe name="ifr2" width="20" height="20">
<form method="post" action="http://mydomain.com/texting/register.php?list_id=15">
<input type="hidden" name="name" value="<?php echo $_SESSION['name2']; ?>" />
<input type="hidden" name="email" value="<?php echo $_SESSION['email2']; ?>" />
<input type="hidden" name="ok" value="1" />
<input type="submit" id="submit" value="Sign Up" style="visibility:hidden;" />
</form></iframe>
</div>
but it is not working, any suggestion to make it happen, the same data is to be sent to both the urls automatically using javascript
You can use jQuerys ajax and send the data with post, to both the urls.
first save all data you want to send in an valid data array. if you want it automated, you can do something like this:
var sendData = {};
$("#formId").find("input").each(function(i, item){
sendData[item.name] = item.value;
});
or as a simple string:
var sendData = "name=value&email=value";
then send the form data to both urls with ajax, as post type:
$.ajax({ url: "http://url1/", type: "POST", data: sendData,
success: function(response){
alert(response);
}
});
$.ajax({ url: "http://url2/", type: "POST", data: sendData,
success: function(response){
alert(response);
}
});
Note: make sure to return false to the button or sending form, you can do that something like:
$("formId").submit(function(){
// do ajax send data
return false;
}
EDIT: added unchecked code for this, with comments
$(document).ready(function(){
// grab the form and bind the submit event
$("#formId").submit(function(){
// collect all the data you want to post
var sendData = {};
this.find("input").each(function(i, item){
sendData[item.name] = item.value;
});
// send the request to both urls with ajax
$.ajax({ url: "url1", type: "POST", data: sendData,
success: function(response){
// handle response from url1
alert(response);
}
});
$.ajax({ url: "url2", type: "POST", data: sendData,
success: function(response){
// handle response from url2
alert(response);
}
});
// return false, to disable default submit event
return false;
});
});
just send name and email to the server script in a regular form,
then do two requests from within your register.php with something like HttpRequest or the like...
some freehand code:
client:
<form id="autoSubmitForm" method="post" action="/register.php?list_id=15">
<input type="hidden" name="name" value="<?php data['name2']; ?>" />
<input type="hidden" name="email" value="<?php data['email2']; ?>" />
<input type="submit" name="submit" value="Sign Up" style="visibility:hidden;" />
</form>
<script>
$(document).ready(function(){
$('#autoSubmitForm').submit();
});
</script>
server:
<?php
$name = $_POST["name2"];
$email = $_POST["email2"];
$url1 = 'http://lala'; //or relative to server root: '/lala'
$url2 = 'http://other';
sendRequest($url1, $name, $email);
sendRequest($url2, $name, $email);
?>
The implementation of sendRequest is worth another question (or reading the documentation of HttpRequest mentioned above)
Good luck, I see your duplicate question got closed...