Develop Reference

How to auto compute values from database using JavaScript

I want to auto compute the remaining stock from inventory by typing in the input type named used. What I want to happen is after I type a number in 'Withdrawn' it should subtract to quantity then show the result to remaining stock. The values came from the database.
Here's what I did but I didn't work I don't know why can you please help me? I am still a beginner btw so correct my code if it looks wrong. Thank you
list.php:
<div class="modal fade" id="updatebtnmodal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update Used</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="myForm" action="<?php echo base_url().'admin/inventory/updateused/'.$inv['i_id'];?>" method="POST"
class="form-container mx-auto shadow-container" style="width:80%" enctype="multipart/form-data">
<div class="form-group">
<input type="hidden" name="update_id" id="update_id">
<label for="cname">Category</label>
<input type="text" class="form-control my-2
<?php echo (form_error('name') != "") ? 'is-invalid' : '';?>" name="cname" id="cname"
placeholder="Enter Item name" value="<?php echo set_value('cname',$inv['cat_id']); ?>" readonly>
<?php echo form_error('cname'); ?>
<span></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="update_id" id="update_id">
<label for="name">Item Name</label>
<input type="text" class="form-control my-2
<?php echo (form_error('name') != "") ? 'is-invalid' : '';?>" name="name" id="name"
placeholder="Enter Item name" value="<?php echo set_value('name'); ?>" readonly>
<?php echo form_error('name'); ?>
<span></span>
</div>
<div class="form-group">
<label for="d_date">Delivered Date</label>
<input type="text" class="form-control my-2
<?php echo (form_error('d_date') != "") ? 'is-invalid' : '';?>" id="d_date" name="d_date"
placeholder="Delivered Date" value="<?php echo set_value('d_date'); ?>"readonly>
<?php echo form_error('d_date'); ?>
<span></span>
</div>
<div class="form-group">
<label for="used">Withdrawn</label>
<input type="number" class="form-control my-2
<?php echo (form_error('used') != "") ? 'is-invalid' : '';?>" id="used" name="used" class="used" onchange="calc()"
placeholder="Enter No. Withdrawn Items" value="<?php echo set_value('used'); ?>">
<?php echo form_error('used'); ?>
<span></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="number" class="form-control my-2
<?php echo (form_error('quantity') != "") ? 'is-invalid' : '';?>" id="quantity" name="quantity" class="quantity"
placeholder="Enter Quantity" value="<?php echo set_value('quantity'); ?>">
<?php echo form_error('quantity'); ?>
<span></span>
</div>
<div class="form-group">
<label for="exp_date">Expiration Date</label>
<input type="text" class="form-control my-2
<?php echo (form_error('e_date') != "") ? 'is-invalid' : '';?>" id="e_date" name="e_date"
placeholder="Expiration Date" value="<?php echo set_value('e_date'); ?>"readonly>
<?php echo form_error('e_date'); ?>
<span></span>
</div>
<div class="form-group">
<label for="rem_qty">Remaining Stock</label>
<input type="number" class="form-control my-2
<?php echo (form_error('rem_qty') != "") ? 'is-invalid' : '';?>" id="rem_qty" name="rem_qty" class="rem_qty"
placeholder="Enter No. Remaining Stock" >
<?php echo form_error('rem_qty'); ?>
<span></span>
</div>
</div>
</div>
<button type="submit" name="updatedata" class="btn btn-primary ml-2">Make Changes</button>
Back
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Js:
function calc() {
var quantity = document.getElementById("quantity").innerHTML;
var used = document.getElementById("used").value;
var rem_qty = parseFloat(quantity) - used
if (!isNaN(rem_qty))
document.getElementById("rem_qty").innerHTML = rem_qty
}

Try this javascript code
function calc() {
var quantity = document.getElementById("quantity").value;
var used = document.getElementById("used").value;
var rem_qty = 0;
if(quantity >= used){
rem_qty = parseFloat(quantity) - used;
}
if(rem_qty != 0){
document.getElementById("rem_qty").value = rem_qty
}
}
I hope this code will help you out.

Stepformwizard is not getting hidden. Overflowing on right of the screen

Am not very expert in jquery and stepformwizard. Am working on code written by someone else. The issue is the multistepformwizard fieldset is used and the next step should be loaded only when Next button is clicked. But currently both of the steps are visible on the screen with extra horizontal scrollbar. I dont want the step 2 form to be visible. Here is the html and jquery code.
<div class="ztab-sec ztab-desbrd bksrvsec bksecrv2">
<div class="row">
<div class="col-md-12">
<form action="<?php echo base_url()?>service/service_request" method="POST" id="wizard_example_6" autocomplete="off">
<input type="hidden" value="<?php echo $ownerArr[0]['email_id']; ?>" name="email_id">
<input type="hidden" value="<?php echo $ownerArr[0]['phone']; ?>" name="mobile">
<fieldset>
<legend>Basic information about your car</legend>
<div class="row bkmargin">
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Vehicle Brand</label>
<select id="u_car_id" class="form-control" name="car_id" required>
<option selected disabled value="">Select a Car</option>
<?php foreach ($cars as $car_details) : ?>
<option value="<?php echo $car_details['user_car_id']; ?>"><?php echo $car_details['makesTitle']; ?> (<?php echo $car_details['modelsTitle']; ?>) <?php echo $car_details['car_reg_no']; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Variants</label>
<input type="text" class="form-control" name="variant" placeholder="Variants" required data-parsley-group="block0" id="variant" readonly pattern="^[a-zA-Z\s]*$">
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Transmission</label>
<input type="text" class="form-control" placeholder="Transmission" name="transmission" readonly required data-parsley-group="block0" id="transmission" pattern="^[a-zA-Z\s]*$">
</div>
</div>
</div>
<legend class="clearfix">Select service for your car? <a href="#" class="car-link pull-right" data-toggle="modal" data-target="#myModal3" >Add New Car</a></legend>
<div class="row bkmargin">
<div class="col-md-4 col-sm-4">
<div class="form-group besrvx">
<input id="option-one" name="service_type" value="1" class="styled-radio " type="radio" data-parsley-group="block0" required data-required-message="Please check one service">
<label class="srvlabel" id="1" for="option-one"><strong>Basic Service: </strong>
<span class="srvspa">3 months or 5000 kms (whichever is earlier)</span>
</label>
</div>
</div>
</fieldset>
<fieldset>
<legend>Vehicle picked up address </legend>
<div class="row bkmargin">
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Select Address</label>
<select class="form-control" id="user_add_id" name="pick_id">
<option selected disabled>Select Address</option>
<?php $i=1; foreach ($address as $user_details) : ?>
<option value="<?php echo $user_details['add_id'] ?>"> Address <?php echo $i; ?></option>
<?php $i++; endforeach; ?>
<option id="neww" class="neww" value="neww">Select new Address</option>
</select>
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Address Type</label>
<select class="form-control" id="add_type" name="add_type" disabled>
<option value="" selected disabled>Select Address Type</option>
<option value="Home">Home Address</option>
<option value="Office">Office Address</option>
<option value="Other">Other Address</option>
</select>
</div>
<div class="row bkmargin">
<noscript>
<input class="nocsript-finish-btn sf-right nocsript-sf-btn" type="submit" value="submit"/>
</noscript>
</div>
</fieldset>
</form>
I have skipped some part as its a long form. I want the second fieldset should only be visible when user clicks on next button
here is the jquery
w6 = $("#wizard_example_6").stepFormWizard({
onNext: function(b, a) {
return $("#wizard_example_6").parsley().validate("block" + b)
},
onFinish: function(b) {
return $("#wizard_example_6").parsley().validate()
}
});
var d = window.location.hash.match(/^#step-(\d+)/),
c = 0;
null !== d && (c = d[1] - 1);
w7 = $("#wizard_example_7").stepFormWizard({
startStep: c,
onNext: function(b, a) {
window.location.hash = "#step-" + (b + 2)
},
onPrev: function(b, a) {
window.location.hash = "#step-" + b
},
onFinish: function(b) {
window.location.hash = "#form-sended"
}
})
};
$(document).ready(function() {
prepare_example();
$("pre code").each(function(c, b) {
hljs.highlightBlock(b)
});
var d = $(location).attr("search").match(/t=([a-z]+)/);
"undefined" != typeof d && null != d ? ($(".sf-wizard").parent().removeClass("sf-sea").addClass("sf-" + d[1]), $(".bt-" + d[1]).removeClass("btn-default").addClass("btn-info")) : $(".bt-sea").removeClass("btn-default").addClass("btn-info")
});
Please help me with this. I have tried using but no luck also changed css display:none inplace of block but couldnt resolve the issue.

Ajax PHP Form Submission with Image and Text

I'm writing an app that allows my wife to add her recipes to a database i have set up. I have a form set up with both text and a file input for an image. It works fine and she can upload text and image to the database. Now, I'm trying to add a feature so that she can edit it. It's the same exact form only the data goes to a different PHP file for processing. When she clicks the "Edit" button it populates all the text inputs with the data pulled from the server and she can edit. She can also add a new photo if she wishes. Despite the fact that it's the same form, it will not upload the image. The text uploads fine, but the $_POST['recipeImage'] is always empty when I look at the object being sent to the server (recipeImage: "");
I am baffled and cannot see why this isn't working. Here is the code:
HTML FORM (IMAGE UPLOAD IS A BOTTOM):
<div id="editRecipeModal">
<div class="col-md-8">
<div class="card">
<form action="../PHP/modify_recipe.php" method="POST" role="form" class="form-horizontal" enctype="multipart/form-data" id="editRecipeForm" name="editRecipeForm">
<input class="form-control" type="hidden" value="" id="creatorIdEdit" name="creatorId">
<input class="form-control" type="hidden" value="" id="recipeIdEdit" name="recipeId" value="">
<div class="card-header card-header-text" data-background-color="purple">
<h4 class="card-title"><i class="far fa-edit"></i> Edit Recipe</h4>
</div>
<div class="card-content"
<div class="row">
<label class="col-sm-2 label-on-left">Recipe Name</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="text" name="name" maxlength="150" id="editRecipeName" required>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Prep Time</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="prepTime" id="editPrepTime" required>
<span class="help-block">Numbers Only. In minutes... ie: 120 Minutes</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Servings</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="servings" id="editServings" required>
<span class="help-block">Numbers Only...</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Calories</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="calories" id="editCalories" required>
<span class="help-block">Numbers Only</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Brief Description</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="description" id="editBriefDescription" rows="5" required></textarea>
</div>
</div>
</div>
<hr>
<div class="row">
<label class="col-sm-2 label-on-left">Ingredients</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="ingredients" id="editPasteIngredientsShow" rows="20" required></textarea>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Recipe Steps</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="directions" id="editPasteStepsShow" rows="20" required></textarea>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Search Tags</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="text" id="editTags" name="tags" required>
</div>
</div>
</div><br> <br> <br> <br>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" data-style="btn btn-primary btn-round" title="vegOrVegan" data-size="7" id="vegOrVeganEditSelect">
<option disabled selected>Dietary Restrictions</option>
<option value="" name="">None</option>
<option value="T" name="T">Vegetarian</option>
<option value="VG" name="VG">Vegan</option>
</select>
<input type="hidden" id="vegOrVeganEdit" name="vegOrVegan">
</div>
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" id="suggestedPairingEditSelect" data-style="btn btn-primary btn-round" title="Suggested Pairing" data-size="7">
<option disabled selected>Suggested Pairing</option>
<option value="" name="">None</option>
<option value="B" name="B">Beer</option>
<option value="WW" name="WW">White Wine</option>
<option value="RW" name="RW">Red Wine</option>
</select>
<input type="hidden" id="suggestedPairingEdit" name="suggestedPairing" value="">
</div>
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" id="" data-style="btn btn-primary btn-round" title="Some Other Attributes" data-size="7">
<option disabled selected>Some Other Attributes</option>
<option value="" name="">None</option>
<option value="B" name="B">Beer</option>
<option value="WW" name="WW">White Wine</option>
<option value="WW" name="WW">Red Wine</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;">
</div>
</div>
<div class="row" style="width: 80%; margin: 0 auto;">
<div class="col-sm-4"></div>
<div class="col-sm-4" style="text-align: center;">
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
<div class="fileinput-new thumbnail">
<img src="../assets/img/placeholder.jpg" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail"></div>
<div>
<span class="btn btn-rose btn-round btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="recipeImage" id="recipeImageEdit" />
</span>
<i class="fa fa-times"></i> Remove
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
<br><br>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4" style=" text-align: center; margin: 0; padding: 0;"><button class="btn btn-primary btn-lg modRecButton" type="submit" id="submitRecipe">Submit Changes</button></div>
<div class="col-sm-4 closePanel" style="text-align: center; margin: 0; padding: 0;" id="closePanel"><button type="button" class="btn btn-default btn-lg">Cancel Changes</button>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</form>
</div>
</div>
</div>
AJAX CODE
$(document).ready(function(e) {
$("#editRecipeForm").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: "../PHP/modify_recipe.php",
type: "POST",
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
success: function(response) {
let parsedResponse = JSON.parse(response);
let newObject = parsedResponse[0]
if (parsedResponse == 'notModified') {
showErrorModal();
}else{
reBuildAfterObjectChange(newObject.recipeId, parsedResponse);
}
},
error: function() {
showErrorModal();
}
});
}));
});
PHP CODE
<?php
include 'db_operations.php';
if(isset($_POST['name'])&& isset($_POST['description']) && isset($_POST['ingredients'])&& isset($_POST['directions']) && isset($_POST['suggestedPairing']) && isset($_POST['prepTime']) && isset($_POST['servings']) && isset($_POST['calories']) && isset($_POST['vegOrVegan']) && isset($_POST['recipeId']) && isset($_POST['creatorId']))
{
$result = '';
$name = $_POST['name'];
$description = $_POST['description'];
$ingredients = $_POST['ingredients'];
$ingredients = str_replace(';', '-', $ingredients);
$ingredients = str_replace('\n', ';', $ingredients);
$directions = $_POST['directions'];
$directions = str_replace(';', '-', $directions);
$directions = str_replace('\n', ';', $directions);
$suggestedPairing = $_POST['suggestedPairing'];
$prepTime = $_POST['prepTime'];
$servings = $_POST['servings'];
$calories = $_POST['calories'];
$vegOrVegan = $_POST['vegOrVegan'];
$recipeId = $_POST['recipeId'];
$creatorId = $_POST['creatorId'];
$tags = $_POST['tags'];
$time=time();
$lastModified = (date("Y-m-d H:i:s", $time));
modifyRecipe_recipes($name, $description, $ingredients, $directions, $suggestedPairing, $prepTime, $servings, $calories, $vegOrVegan, $lastModified, $creatorId, $recipeId, $tags);
}
if(isset($_POST['recipeImage'])){
$size = $_FILES['recipeImage']['size'];
if($size > 0){
$tmp_dir = $_FILES["recipeImage"]["tmp_name"];
$tmpImg = $_FILES['recipeImage']['name'];
$ext = strtolower(pathinfo($tmpImg, PATHINFO_EXTENSION));
$recipeImage = rand(10000, 10000000).".".$ext;
move_uploaded_file($tmp_dir, "../userRecipeImages/".$recipeImage);
$sql = 'UPDATE recipes SET recipeImage = :recipeImage WHERE creatorId = :creatorId AND recipeId= :recipeId';
$stmt = $conn->prepare($sql);
$stmt->bindParam(':creatorId', $creatorId, PDO::PARAM_STR);
$stmt->bindParam(':recipeImage', $recipeImage, PDO::PARAM_STR);
$stmt->bindParam(':recipeId', $recipeId, PDO::PARAM_STR);
$stmt->execute();
}
}
$modifiedRecipeDate = getLastModified_recipes($lastModified, $creatorId);
if ($modifiedRecipeDate === $lastModified) {
$newObject = getSingleRecipeById_recipes($recipeId, $creatorId);
echo json_encode($newObject);
}
else {
$result = "notModified";
echo json_encode($result);
}
?>

You obviously forgot to change $_POST['recipeImage'] to $_FILES['recipeImage']
Files are contained in the $_FILES global variable not $_POST
Change this
if(isset($_POST['recipeImage'])){
to
if(isset($_FILES['recipeImage'])){

Animate progress Bar on execution of PHP script using JQuery

I got a form that sends some information on a PHP page.
I managed to animate the progress bar on form submit and I would like to animate the progress bar on the script execution duration too.
My script gets the information and sends them to a lot of email addresses (like newsletters).
My FORM with the progress bar:
<form class="form-horizontal fadeIn animated" id="formImport" action="PHP/traitementImport.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-2 control-label">Catégorie</label>
<div class="col-sm-10">
<?php
$sql2 = "SELECT idg, intitule, titrefr, titreuk FROM groupe;";
$req2 = mysqli_query($mysqli, $sql2) or die('Erreur SQL !<br/>' . $sql2 . '<br/>' . mysqli_error($mysqli));
?>
<select class="form-control" name="categ" style="height:34px;" id="listeGroup">
<?php
while ($data2 = mysqli_fetch_array($req2)) { // Remplissage du SELECT
$idg = $data2['idg'];
$intitule = $data2['intitule'];
$titrefr = $data2['titrefr'];
$titreuk = $data2['titreuk'];
?>
<option value="<?php echo $idg ?>" class="valGroup"><?php echo $intitule ?></option>
<option value="<?php echo $titrefr ?>" id="<?php echo $idg ?>titrefr" style="display:none;"></option>
<option value="<?php echo $titreuk ?>" id="<?php echo $idg ?>titreuk" style="display:none;"></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Titre FR</label>
<div class="col-sm-10">
<input type="text" id="inputRapportFR" name="rapportFR" class="form-control" placeholder="Titre du rapport français">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Titre UK</label>
<div class="col-sm-10">
<input type="text" id="inputRapportUK" name="rapportUK" class="form-control" placeholder="Titre du rapport anglais">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Rapport FR</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Choisir dossier <input id="rapportFR" name="rapportFR[]" type="file" multiple directory="" webkitdirectory="" mozdirectory="">
</span>
</span>
<input type="text" class="form-control file" placeholder="RAPPORT FRANCAIS" readonly />
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Rapport UK</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Choisir dossier <input id="rapportUK" name="rapportUK[]" type="file" multiple directory="" webkitdirectory="" mozdirectory="">
</span>
</span>
<input type="text" class="form-control file" placeholder="RAPPORT ANGLAIS" readonly>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="btnEnvoyer" type="submit" class="btn btn-default">Envoyer</button>
</div>
</div>
</form>
<div class="progress" style="display:none;">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="status"></div>
My Javascript Code:
(function () {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function () {
$(".progress").show();
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function (xhr) {
bar.width("100%");
percent.html("100%");
status.html(xhr.responseText);
}
});
})();
I want to call 'MyScript.php', execute it without changing page and display and animate my progress bar on execution of it.

Running a php code after script been successfully executed

I have the following script
<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>
Essentially the phpCall() should only execute after
$form.append($('<input type="text" name="stripeToken" />').val(token);
to be executed again, the user would have to refresh or land on the page, and hit the submit button again.
The problem here is that when a user hit submit, then the php code gets executed, which is great but when the page refresh or user relands on the page the php code gets executed regardless if the submit button was clicked.
Below is the php code, where I would like to store the value of this input and post it on the php page
<input type="text" name="stripeToken" />
php page:
<?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);
Update:
<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 2
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($('').val(token));

Try sending a variable via POST to your PHP:
function phpCall() {
$.ajax({
type: "POST",
data: {run: true},
url: 'paymentEmail.php',
success: function (response) {//response is value returned from php (for your example it's "bye bye"
alert(response);
}
});
}
And then in your php:
if ($_POST['run']) {
$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);
}

It might help you :
function phpCall() {
if( appendedStripeToken === true ){
$.ajax({
type: "POST",
data: {run: true},
url: 'paymentEmail.php',
success: function (response) {//response is value returned from php (for your example it's "bye bye"
alert(response);
}
});
}
}