I have an HTML form that I wanna to use to generate dynamically ADD more input fields:
<div class="row cloneDefault">
<div class="form-group col-md-1">
<br />
<h4 style="text-align:right">1.</h4>
</div>
<div class="form-group col-md-1">
<label class="control-label">First name</label>
<input type="text" value='' class="form-control" id="FirstnameField"/>
</div>
<div class="form-group col-md-2">
<label for="sname" class="control-label">last name</label>
<input type="text" value='' class="form-control" id="lastnameField"/>
</div>
<i class="remove">remove</i>
</div>
<form class="frm">
<div class="row">
<div class="form-group col-md-1">
<br />
<h4 style="text-align:right">1.</h4>
</div>
<div class="form-group col-md-1">
<label for="fname" class="control-label">First name</label>
<input type="text" value='' class="form-control" id="fname"/>
</div>
<div class="form-group col-md-2">
<label for="sname" class="control-label">last name</label>
<input type="text" value='' class="form-control" id="sname"/>
</div>
<i class="remove">remove</i>
</div>
<i class="add"> Add </i>
</form>
<style>
.cloneDefault{
display: none;
}
</style>
And JS to handle adding input fields dynamically:
$(document).ready(function() {
$(".add").click(function() {
$(".cloneDefault").clone(true).insertBefore(".frm > div:last-child");
$(".frm > .cloneDefault").removeClass("cloneDefault");
return false;
});
$(document).on('click', '.remove', function() {
$(this).parent().remove();
});
});
Now, I can easily retrieve text value from an input field by element id and then query cloud firestore:
const first_name = document.querySelector('#fname').value;
const last_name = document.querySelector('#sname').value;
firebase.firestore().collection("users").add({
fame: first_name,
sname: last_name,
}).then(function () {
console.log("success");
})
.catch(function (error) {
console.log("error:", error);
});
But how to save dynamically generated input fields in JS and save them on cloud firestore? I realised that my code to generate dynamically added input data may be unsuitable if I'd like to use it afterwards. What I wanted to do is similiar as this . Any idea?
I'm currently creating a dummy site and want to create multiple forms on one page.
So when you click each service you can send a form to request a quote. I got the first form working fine, however, when I send the second form it just sends the data from the first?
For the second form, I just replaced the ID to contactform2 instead of contactform as shown below.
<div id="registerpremium" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header col-md-12">
<img class=" logo_h modallogo" src="img/logo.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body signupmessage">
<img src="img/marketing.svg" alt="" class="img-fluid modalicon">
<h3 class="col-md-12 formtext py-4">eCommerce Premium</h3>
<p class="text-center">Please fill in the form below, we will then send you an email to confirm where to send your products.</p>
<form id="contactform" method="post" name="contactform" onsubmit="return false;">
<div class="form-group pt-3">
<label class="sr-only pt-5" for="name">Name</label>
<input type="text" class="form-control form-control-danger form-control-lg" name="name" id="Name" placeholder="Name*">
</div>
<div class="form-group">
<label class="sr-only" for="mail">Email</label>
<input type="email" class="form-control form-control form-control-lg" name="email" id="mail" placeholder="Email*">
</div>
<div class="form-group">
<label class="sr-only" for="mail">Phone Number</label>
<input type="phone" class="form-control form-control form-control-lg" name="phone" id="phone" placeholder="Phone Number">
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="checkbox" id="gdpr" name="gdpr" class="form-control md-textarea"></textarea>
<label for="gdpr" name="gdprlabel">I have read and consent to my data being collected as outlined in the Disclaimer</label>
</div>
</div>
</div>
<div class="modal-footer py-4">
<button type="submit" class="button button-header bg">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
For the second form, I just replaced the ID to contactform2
$('#contactform2').validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
gdpr: {
required: true
}
},
errorPlacement: function(){
return false;
},
submitHandler: function(){
var contactform = $('#contactform2').serialize();
$.ajax({
type: "POST",
url: 'ajax.php',
data: {
contactform: contactform
},
success: function(data){
$('#contactform2').hide();
$('.signupmessage').html('<p id="successmessage">' + data + '</p>');
},
error: function(xhr,textStatus,err){
console.log("readyState: " + xhr.readyState);
console.log("responseText: "+ xhr.responseText);
console.log("status: " + xhr.status);
console.log("text status: " + textStatus);
console.log("error: " + err);
}
});
}
});
PHP for the second form if you remove the 2 after contact form that is what I am using for the first form. The reason I know the first form sends is because I have test instead of test2 in the subject, title etc.
<?php
if (isset($_POST['contactform2'])) {
parse_str($_POST['contactform2'], $contactformData);
$name = $contactform2Data['name'];
$email = $contactform2Data['email'];
$phone = $contactform2Data['phone'];
$to = 'hello#samuelrhys.com'; //change to desired recepient
$subject = "test2";
$message = "test2". "\n" .$name. "\n" .$email. "\n" .$phone. "\n" .$message;
$headers = "test2" . "\r\n"; //change domain to that of Poppyfields
$result = mail($to, $subject, $message, $headers);
if ($result) {
echo "Thanks for contacting us, we'll be in touch soon!";
} else {
echo "Uh oh. We couldn't deliver your request at this time.";
}
}
?>
My Second form html
<div id="registerstandard" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header col-md-12">
<img class=" logo_h modallogo" src="img/logo.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body signupmessage">
<img src="img/marketing.svg" alt="" class="img-fluid modalicon">
<h3 class="col-md-12 formtext py-4">eCommerce Standard</h3>
<p class="text-center">Please fill in the form below, we will then send you an email to confirm where to send your products.</p>
<form id="contactform2" method="post" name="contactform2" onsubmit="return false;">
<div class="form-group pt-3">
<label class="sr-only pt-5" for="name">Name</label>
<input type="text" class="form-control form-control-danger form-control-lg" name="name" id="Name" placeholder="Name*">
</div>
<div class="form-group">
<label class="sr-only" for="mail">Email</label>
<input type="email" class="form-control form-control form-control-lg" name="email" id="mail" placeholder="Email*">
</div>
<div class="form-group">
<label class="sr-only" for="mail">Phone Number</label>
<input type="phone" class="form-control form-control form-control-lg" name="phone" id="phone" placeholder="Phone Number">
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="checkbox" id="gdpr" name="gdpr" class="form-control md-textarea"></textarea>
<label for="gdpr" name="gdprlabel">I have read and consent to my data being collected as outlined in the Disclaimer</label>
</div>
</div>
</div>
<div class="modal-footer py-4">
<button type="submit" class="button button-header bg">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
You need to change name tag value in HTML for access post request from PHP !!
So , basically i am trying to create a input field and when i enter a number it gives me the desired child of the same html.
now i want child to produce more children with unique name with javascript.
i am attaching the code for a better understanding.
<div class="row" id="child_nr">
<div class="col-xs-12">
<div class="form-group col-xs-6">
<div class="form-group col-xs-4">
<label for="name" class="control-label">Parameter Name: <font color="red">*</font></label>
</div>
<div class="form-group col-xs-8">
<input type="text" class="form-control required" id="param_name" name="param_name" placeholder="name" onblur="param()"/>
</div>
</div>
<div class="form-group col-xs-6">
<div class="form-group col-xs-3">
<input type="text" class="form-control required" id="parent_nr" name="parent_nr" value="0" onblur="param()"/>
</div>
<div class="form-group col-xs-5">
<label for="name" name="service_code" id="service_code" class="control-label">
Service Code </label>
</div>
<div class="form-group col-xs-4">
<input type="text" class="form-control required" name="service_code" id="service_code"/>
</div>
</div>
</div>
</div>
<script language="javascript">
function param(){
var value=parent_nr.value;
const name=document.getElementById("param_name").value;
for(var i=1;i<=value;i++)
{
const html='<div class="col-xs-12"><div class="form-group col-xs-6"><div class="form-group col-xs-7"><label for="name" class="control-label">Parameter Name'+i+': <font color="red">*</font></label></div><div class="form-group col-xs-5"><input type="text" class="form-control required" id="name" name="name" placeholder="name"/></div></div><div class="form-group col-xs-6"><div class="form-group col-xs-3"><input type="number" class="form-control required" id="parent_nr" name="parent_nr" value="0" onblur="param()"/></div><div class="form-group col-xs-5"><label for="name" name="service_code" id="service_code" class="control-label">Service Code </label></div><div class="form-group col-xs-4"><input type="text" class="form-control required" name="service_code" id="service_code"/></div></div></div>';
document.querySelector('#child_nr').insertAdjacentHTML('beforeend',html);
}
}
function sendData() {
var question = 'abc';
var c = 'cde';
$.ajax({
url: 'http://localhost/gtiemr/addnewparameter_laboratory',
type: 'POST',
data: { question: question, c: c },
success: function () {
alert('suc');
},
error: function (error) {
alert('error');
}
});
}
</script>
Also, i want to know how i can send the value to my controller using ajax so that i can send it to model.
I am validating form with jquery. So when form submit i am using event.preventDefault(); after validate form , form will be submit to respective action page.But in my case it doesn't work.
Code what i did-
$('form[name=contact_form]').submit(function(event) {
event.preventDefault();
var formData = $('form[name=contact_form]').serialize();
var phone = $.trim($('form[name=contact_form]').find('input[name=PHONE]').val()).length;
var intRegex = /[0-9 -()+]+$/;
var alert = $('#contact_alert');
var success = $('#contact_success');
if(phone==0){
phone.focus();
alert.html("<p class='alert alert-danger' style='text-align:left;'>Phone number is required</p>");
}
else if((phone < 10)){
phone.focus();
alert.html("<p class='alert alert-danger' style='text-align:left;'>Please enter a valid phone number</p>");
return false;
}else{
return true;
}
});
Html Page :
<?php
echo form_open_multipart('home/inquiry', array('name' => 'contact_form'));
?>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="form_type" value="C">
<input type="text" name="NAME" id="user-name" class="form-control" placeholder="Full Name"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="PHONE" id="user-phone" class="form-control" placeholder="Phone"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="EMAIL" id="user-email" class="form-control" placeholder="Email"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="SUBJECT" id="user-subject" class="form-control" placeholder="Reason for inquiry"/>
</div>
</div>
<div class="col-md-12">
<textarea class="form-control" name="MESSAGE" id="user-message" placeholder="Message"></textarea>
</div>
<div class="col-md-12 text-left">
<div class="form-group">
<input type="submit" name="submit" class="btn btn-warning">
</div>
</div>
</div>
<?php echo form_close(); ?>
Do not call event.preventDefault(); if you want the form to be submitted after it validates ok.
Returning false after failed validation is enough.
$(this).submit();
When it's valid.
Try to replace the return true; for $(this).submit();
I usually do something like
$("#submit").submit(function(e){
if(validateFields() == true){ //If all fields are valid
$("#submit").submit();
}
else{
e.preventDefault(e);
}
});
I have the following script that executes after a form has been clicked
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('CODE');
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="text" name="stripeToken" />').val(token));
// and re-submit
}
};
jQuery(function($) {
$('#payment-form').submit(function(e) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
function phpCall() {
$.ajax({
url: 'paymentEmail.php',
success: function (response) {//response is value returned from php (for your example it's "bye bye"
alert(response);
}
});
}
</script>
My problem is that the php paymentEmail.php does not run after the script is done.
My objective is as follow:
once and only this line has been run
$form.append($('<input type="text" name="stripeToken" />').val(token));
The followings happen:
The value of stripeToken gets posted to paymentEmail.php
paymentEmail.php gets executed.
If you're curious, below is how the paymentEmail.php looks like:
<?php
if(isset($_POST['paid'])){
$course_price_final = $_POST['course_price_final'];
$course_token = $_POST['stripeToken'];
$course_provider = $_POST['course_provider'];
$user_email = $_POST['user_email'];
$course_delivery = $_POST['course_delivery'];
$order_date = date("Y-m-d");
$insert_c = "insert into orders (course_title,course_price_final,course_provider,user_email,course_date,course_delivery,order_date,course_token)
values ('$crs_title','$course_price_final','$course_provider','$user_email','$course_date1','$course_delivery','$order_date','$course_token')";
$run_c = mysqli_query($con, $insert_c);
}
Thanks in advance
Update:
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('');
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
var appendedStripeToken = false;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="text" name="stripeToken" />').val(token);
function handleCall() { if (!appendedStripeToken) { appendedStripeToken = true; phpCall(); } } // and re-submit
}
};
function onSubmit() {
var $form = $('#'+id_from_form);
// Disable the submit button to prevent repeated clicks
$form.find('input').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
}
function phpCall() {
$.ajax({
url: 'paymentEmail.php',
success: function (response) {//response is value returned from php (for your example it's "bye bye"
alert(response);
}
});
}
</script>
Update 2:
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('CODE');
var appendedStripeToken = false;
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
handleCall(token);
}
};
function handleCall(token) {
if (!appendedStripeToken) {
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="text" name="stripeToken" />').val(token);
appendedStripeToken = true;
phpCall();
}
}
function onSubmit() {
var $form = $('#payment-form'); // TODO: give your html-form-tag an "id" attribute and type this id in this line. IMPORTANT: Don't replace the '#'!
// Disable the submit button to prevent repeated clicks
$('#paymentSubmit').prop('disabled', true); // TODO: give your html-submit-input-tag an "id" attribute
Stripe.card.createToken($form, stripeResponseHandler);
}
function phpCall() {
$.ajax({
url: 'paymentEmail.php',
success: function (response) { // response is value returned from php (for your example it's "bye bye")
alert(response);
}
});
}
</script>
</head>
<body>
<form action="" method="POST" id="payment-form" class="form-horizontal">
<div class="row row-centered">
<div class="col-md-4 col-md-offset-4">
<div class="alert alert-danger" id="a_x200" style="display: none;"> <strong>Error!</strong> <span class="payment-errors"></span> </div>
<span class="payment-success">
<? $success ?>
<? $error ?>
</span>
<fieldset>
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Choose Start Date</label>
<div class="col-sm-6">
<select name="course_date" class="address form-control" required>
<option><?php
if(isset($_GET['crs_id'])){
$course_id = $_GET['crs_id'];
$get_crs = "select * from courses where course_id='$course_id'";
$run_crs = mysqli_query($con, $get_crs);
while($row_crs=mysqli_fetch_array($run_crs)){
$course_date1 = $row_crs['course_date1'];
echo $course_date1 ;
}
}
?></option>
<option value=<?php
if(isset($_GET['crs_id'])){
$course_id = $_GET['crs_id'];
$get_crs = "select * from courses where course_id='$course_id'";
$run_crs = mysqli_query($con, $get_crs);
while($row_crs=mysqli_fetch_array($run_crs)){
$course_provider = $row_crs['course_provider'];
$course_date2 = $row_crs['course_date2'];
$course_price = $row_crs['course_price'];
$course_title = $row_crs['course_title'];
$course_priceFinal = $row_crs['course_priceFinal'];
$dig = explode(".", $row_crs['course_tax']);
$course_tax = $dig[1];
echo $course_date2 ;
}
}
?>/>
</select>
</div>
</div>
<input type="hidden" name="course_provider" value="<?php echo $course_provider; ?>" >
<input type="hidden" name="course_title" value="<?php echo $course_title; ?>" >
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Course Delivery</label>
<div class="col-sm-6">
<select name="course_delivery" class="address form-control" required>
<option value="classroom">Classroom</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Seats</label>
<div class="col-sm-6">
<select name="course_seats" class="address form-control" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<!-- Form Name -->
<legend>Billing Details</legend>
<!-- Street -->
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Billing Street</label>
<div class="col-sm-6">
<input type="text" name="street" placeholder="Street" class="address form-control" required>
</div>
</div>
<!-- City -->
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Billing City</label>
<div class="col-sm-6">
<input type="text" name="city" placeholder="City" class="city form-control" required>
</div>
</div>
<!-- State -->
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Billing Province</label>
<div class="col-sm-6">
<input type="text" name="province" maxlength="65" placeholder="Province" class="state form-control" required>
</div>
</div>
<!-- Postcal Code -->
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Postal Code</label>
<div class="col-sm-6">
<input type="text" name="postal" maxlength="9" placeholder="Postal Code" class="zip form-control" required>
</div>
</div>
<!-- Country -->
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Country</label>
<div class="col-sm-6">
<input type="text" name="country" placeholder="Country" class="country form-control">
<div class="country bfh-selectbox bfh-countries" name="country" placeholder="Select Country" data-flags="true" data-filter="true"> </div>
</div>
</div>
<!-- Email -->
<?php
$email = $_GET['user_email'];
// Note the (int). This is how you cast a variable.
$coupon = isset($_GET['crs_coupon']) ? (int)$_GET['crs_coupon'] : '';
if(is_int($coupon)){
$course_priceFinalAll = $course_priceFinal - ($course_priceFinal * ($coupon/100));
$coupon_deduction = $course_priceFinal * ($coupon/100);
};
?>
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Email</label>
<div class="col-sm-6">
<input type="text" name="user_email" value=<?php echo $email; ?> class="email form-control" required>
<input type="hidden" name="course_title" value=<?php echo $course_title; ?> class="email form-control">
<input type="hidden" id="box1" name="course_price" value=<?php echo $course_priceFinal; ?> class="email form-control">
</div>
</div><br>
<legend>Purchase Details</legend>
<div class="form-group">
<label class="col-sm-4 control-label">Coupon Code</label>
<div class="col-sm-6">
<input type="text" style="text-align:left; float:left; border:none; width:100px;" name="name" class="email form-control" placeholder="Coupon Code" value="<?php echo $coupon; ?>%" readonly>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Want to replace the current coupon code?</label>
<div class="col-sm-6">
<input type="text" name="name" class="email form-control" placeholder="Please enter another coupon code" value="">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" style="color:#FF6400; font-weight:normal;">Tax</label>
<div class="col-sm-6">
<input type="text" class="email form-control" name="name"style="text-align:left; float:left; border:none; width:100px;" placeholder="Please enter another coupon code" value=" <?php echo $course_tax; ?>%" readonly>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" style="color:#FF6400;font-weight:normal;">Price before Tax</label>
<div class="col-sm-6">
<input type="text" style="text-align:left; float:left; border:none; width:100px;" name="course_price_before_tax" class="email form-control" value=" $<?php echo $course_price; ?>" readonly>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" style="color:#FF6400; font-weight:normal;">Price After Tax</label>
<div class="col-sm-6">
<input type="text" style="text-align:left; float:left; border:none; width:100px;" name="course_price_after_tax" class="email form-control" value=" $<?php echo $course_priceFinal; ?>" readonly>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" style="color:#FF6400; font-weight:normal;">Coupon Deduction</label>
<div class="col-sm-6">
<input type="text" style="text-align:left; float:left; border:none; width:100px;" name="course_deduction" class="email form-control" value=" -$<?php echo $coupon_deduction; ?>" readonly>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" style="color:#FF6400"><b>Final Price</b></label>
<div class="col-sm-6">
<input type="text" style="text-align:left; font-weight:bold; float:left; border:none; width:100px;" name="course_price_final" class="email form-control" placeholder="Course Price Final" value="$<?php echo $course_priceFinalAll; ?>" readonly>
</div>
</div>
<!-- Coupon Code-->
<input type="hidden" name="coupon_code" class="email form-control" placeholder="Coupon Code" value=<?php echo $coupon; ?> readonly>
<!-- Price Final -->
<br>
<fieldset>
<legend>Card Details</legend>
<span class="payment-errors"></span>
<!-- Card Holder Name -->
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Card Holder's Name</label>
<div class="col-sm-6">
<input type="text" name="cardholdername" maxlength="70" placeholder="Card Holder Name" class="card-holder-name form-control" required>
</div>
</div>
<!-- Card Number -->
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Card Number</label>
<div class="col-sm-6">
<input type="text" id="cardnumber" maxlength="19" data-stripe="number" placeholder="Card Number" class="card-number form-control" required>
</div>
</div>
<div class="form-row">
<label class="col-sm-4 control-label">CVC</label>
<div class="col-sm-6">
<input type="text" size="4" class="email form-control" data-stripe="cvc" required/>
</div>
</div>
<br>
<div class="form-row"><br><br>
<label class="col-sm-4 control-label">Expiration (MM/YYYY)</label>
<div class="col-sm-6">
<div class="form-inline">
<select name="select2" data-stripe="exp-month" class="card-expiry-month stripe-sensitive required form-control" required>
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<input type="text" size="4" class="email form-control" data-stripe="exp-year" required/>
</div>
</div>
<br>
<!-- Submit -->
<div class="control-group">
<div class="controls">
<center><br>
<input id="paymentSubmit" class="btn btn-danger" name="paid" onClick="onSubmit()" type="submit" value="Pay Now" class="btn btn-success"></button>
</center>
</div>
</div>
</fieldset>
</form>
update
two minor issues:
With the button being disabled after a click, it wont allow to click again if for instance an error is returned as shown above. It should only disable it after the input has been released
$form.append($('<input type="text" name="stripeToken" />').val(token));
php code
<?php
$course_price_final = $_POST['course_price_final'];
$course_token = $_POST['stripeToken'];
$course_provider = $_POST['course_provider'];
$user_email = $_POST['user_email'];
$course_delivery = $_POST['course_delivery'];
$order_date = date("Y-m-d");
$insert_c = "insert into orders (course_title,course_price_final,course_provider,user_email,course_date,course_delivery,order_date,course_token)
values ('$crs_title','$course_price_final','$course_provider','$user_email','$course_date1','$course_delivery','$order_date','$course_token')";
$run_c = mysqli_query($con, $insert_c);
$location = "../paymentConfirmed.php";
header( "Location: $location" );
?>
Try this:
// This identifies your website in the createToken call below
Stripe.setPublishableKey('');
var appendedStripeToken = false;
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
handleCall(token);
}
};
function handleCall(token) {
if (!appendedStripeToken) {
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="text" name="stripeToken" />').val(token);
appendedStripeToken = true;
phpCall();
}
}
function onSubmit() {
var $form = $('#[put the form id here]'); // TODO: give your html-form-tag an "id" attribute and type this id in this line. IMPORTANT: Don't replace the '#'!
Stripe.card.createToken($form, stripeResponseHandler);
}
function phpCall() {
$.ajax({
url: 'paymentEmail.php',
success: function (response) { // response is value returned from php (for your example it's "bye bye")
// Disable the submit button to prevent repeated clicks
$('#[put the input id here]').prop('disabled', true); // TODO: give your html-submit-input-tag an "id" attribute
alert(response);
}
});
}
There are two TODO comments!
EDIT: Modified code
The request is asynchronous!
Create a function that executes your script and calls the phpCall() at the end.
Make your html formular call the new method.
-> The request should be started when the script was done.
EDIT: The new function could look like this:
// You don't need jQuery
function onSubmit() {
var $form = $('#'+id_from_form);
// Disable the submit button to prevent repeated clicks
$form.find('input').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
phpCall();
}
Call method on the submitButton and change his type from submit to button:
<input type="button" onClick="onSubmit()" value="Submit" name="submit" />
(You can remove the action and method attribute from the form tag)
<form id="my-form">
<!-- stuff -->
<!-- put the input tag here -->
</form>
You have defined the function phpCall() but you are not calling it anywhere within your script. Simply call the function or remove function declaration so that function internals run procedurally.