NEW CODE FROM YOUR SUGGESTIONS (STILL NOT WORKING)
I am trying to get values from an registration form to a php page with the post method and then echo it in that page so I know it works. If it does I will try to get all the values and insert them into my user table. I dont mind the sql injection risks and that I have to clean the input for now I just want to make it work. But it doesnt, do you guys see what I do wrong? Also is it possible to instead get all the values in an array and post them so I dont have to use so many variables.
form.php (another page)
<?php include_once("connect.php"); ?>
<?php include_once("getTrycksaker.php"); ?>
<?php include_once("header.php"); ?>
<!-- BUILD COLUMN SYSTEM FOR CROSSDEVICE USABILITY -->
<div class="container">
<div class="row">
<div class="col-md-1 col-sm-0 col-xs-0"></div>
<div class="col-md-10 col-sm-12 col-xs-12">
<h3 class="title"> Registrering Företagskonto</h3><hr>
<div class="alert alert-info" role="alert">Ange vänligen inloggningsuppgifter samt namn och telefonnummer till företagets kontaktperson.</div>
</div>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
</div>
<div class="row">
<div class="col-md-1 col-sm-0 col-xs-0"></div>
<form class="form" method="post" id="compReg">
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" name="name" id="name" class="form-control" placeholder="Kontaktperson"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" name="email" id="email" class="form-control" placeholder="E-postadress"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span>
<input type="text" class="form-control" placeholder="Telefon"></div><br>
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" name="password" id="password" class="form-control" placeholder="Lösenord"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" name="cpassword" id="cpassword" class="form-control" placeholder="Upprepa Lösenordet"></div><br>
</div>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
</div>
<div class="row">
<div class="col-md-1 col-sm-0 col-xs-0"></div>
<div class="col-md-10 col-sm-12 col-xs-12">
<br><div class="alert alert-info" role="alert">Ange vänligen företagets namn, postadress samt organisationsnummer. Avvikande leveransadresser kan registreras vid order.</div>
</div>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
</div>
<div class="row">
<div class="col-md-1 col-sm-0 col-xs-0"></div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
<input type="text" class="form-control" placeholder="Företagsnamn"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
<input type="text" class="form-control" placeholder="Organisationsnummer"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
<input type="text" class="form-control" placeholder="Gatuadress"></div><br>
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
<input type="text" class="form-control" placeholder="Postnummer"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
<input type="text" class="form-control" placeholder="Postort"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-paperclip"></span></span>
<input type="text" class="form-control" placeholder="Eventuell c/o adress"></div><br>
</div>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
</div>
<div class="row">
<div class="col-md-1 col-sm-0 col-xs-0"></div>
<div class="col-md-10 col-sm-0 col-xs-0">
<label class="btn btn-info btn-file">Skapa Konto <input id="submitBtn" onclick="rAlert('Go')" type="submit" style="display: none;"><span class="glyphicon glyphicon-ok-sign" ></span></label>
<br><br><br>
</div>
</form>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
</div>
<?php include_once("footer.php"); ?>
process.php (another page)
<?php print_r($_POST);?>
You can get the values using element name.All the values are inside $_POST Array.Just print_r($_POST).You will see all the posted values.
In process.php;
extract($_POST);
echo $name;//prints name
echo $email;//prints email
The extract() function imports variables into the local symbol table from an array.This function uses array keys as variable names and values as variable values. For each element it will create a variable in the current symbol table.
You can use <?php print_r($_POST); ?> to check exactly what is being passed to php.
This will show all variables passed from the form and their values.
Also worth noting that only inputs with valid name attributes will be passed by the form.
I think, this example code will help you. run my code and use this idea in your code.
in form.php
<form class="form" method="post" action="process.php">
<input type="text" name="name[]" value="a"/>
<input type="text" name="name[]" value="b"/>
<input type="text" name="name[]" value="c"/>
<label>Skapa Konto <input type="submit" ></label>
in process.php
<?php
$nvals = count($_REQUEST['name']);
// do something with $_REQUEST['name'][$i] for example
echo 'Hello ' . $_REQUEST['name'][1] . '!';
?>
it will print that 'Hello b!'
if you want to get all values using for loop use this code.
<?php
$nofval = count($_REQUEST['name']);
for ($i = 0; $i < $nofval; $i++) {
echo 'Hello ' .$_REQUEST['name'][$i] . '!';
}
?>
Related
I have a webpage that contains a div that users can print using a print button that has an onclick javascript function. The div contains a couple of paragrapghs with bootstrap classes.The div also contains 3 bootstrap wells with bootstrap forms within them.
When I view the print preview, page 1 shows the first paragraph that is within the div, then no other content. The print preview shows more of the content being on page 2 and on page 3. However, it is cutting off some of the content at the end of the div.
I have spent several hours researching this issue and have tried several solutions, most of which try to modify overflow and float properties. None of these have resolved my problem.
I do have one css print rule that hides the print button when printing. I have disabled this css rule, but that has made no difference. I also have 1 page-break-before-always, which I have commented out, but this makes no difference.
These issues do not exist when using chrome.
My FireFox browser version is 52.0.2 (32-bit).
My Chrome browser is version 49.0.2.2623.112m.
My OS is windows XP.
p.s. keep in mind I am a pretty inexperienced developer.
<div class="row" id="sign_up">
<p class="lead text-danger text-center">Please sign me up for the 7 day Carnival Cruise.
<br>
Please print and fill out this sign-up form for each person.
</p>
<br>
<button type="button" onclick="printContent('sign_up')" class="btn btn-primary center-block"><span><i class="glyphicon glyphicon-print"></i></span> Print form</button>
<form class="well form-horizontal" action="" method="post" id="sign-up_form">
<fieldset>
<!-- Form Name -->
<legend>Sign-Up Form</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">First Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="" class="form-control" type="text" data-delay="5000">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group inline">
<label class="col-md-2 control-label" >Last Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Date input-->
<div class="form-group">
<label class="col-md-2 control-label" >Date of Birth:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input name="date" placeholder="MM/DD/YYY" class="form-control" type="date">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">E-Mail:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="" class="form-control" type="email">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Phone #</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="" class="form-control" type="tel">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Address:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">City:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-2 control-label">State:</label>
<div class="col-md-6 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="state" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Zip Code:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Emergency Contact Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="emerg_name" placeholder="" class="form-control" type="text" data-delay="5000">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Emergency Contact Phone #</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="emerg_phone" placeholder="" class="form-control" type="tel">
</div>
</div>
</div>
</fieldset>
</form>
<form class="well form-inline">
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Inside Cabin</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_yes" placeholder="" class="form-control" type="checkbox">
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Balcony Cabin</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_no" placeholder="" class="form-control" type="checkbox">
</div>
</div>
</form>
<form class="well form-inline">
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Yes.<br> I do want insurance</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_yes" placeholder="" class="form-control" type="checkbox">
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">No. <br>I don't want insurance</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_no" placeholder="" class="form-control" type="checkbox">
</div>
</div>
</form>
<p class="no-indent text-danger">I understand the payment / cancellation policy as stated above:
<br>
(sign) ________________________________________
</p>
<p><mark>Please bring or mail this completed form with payment.</mark></p>
<br>
<p style="page-break-before: always">
<p>
If you have any questions, please call Michelle # (810)-686-3524 or Denise # (989)-876-6102.
<br>
1390 E. Willard Rd.
<br>
Clio, MI 48420
<br>
810 - 686 - 3524
<br>
www.milesawaytravel.net
<br>
e-mail: <span class="text-primary">3524#Hughes.net</span>
<img class="responsive center-block" src="http://res.cloudinary.com/dx1tairmq/image/upload/v1499127232/miles%20away%20travel/newmatlogo.png" alt="miles away logo">
<button type="button" onclick="printContent('sign_up')" class="btn btn-primary"><span><i class="glyphicon glyphicon-print"></i></span> Print form</button>
</p>
</div>
I need help with this code..
I need to get date in those inputs from an external plain text to fill the fields..
I have read in many forums but I have no clue how to do that... if someone of you guys could help would be helpfull!
Thanks in advance..
Here's What I have:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post" name="ibisaserver">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaz:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">Direccion IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mascara Subred : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Direccion Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Direccion Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Guardar" class="btn btn-success btn-sm" onclick=" this.form.action ='/ibisaserver/' " title="Guardar"><i class="fa fa-save"></i> Guardar</button>
<button type="submit" name="Probar" class="btn btn-success btn-sm" onclick=" this.form.action ='/probarconexion' " title="Probar Conexión"><i class="fa fa-check"></i> Probar Conexión</button>
</div>
</form>
</div>
</div>
All I need to create an external plain text and the information there should appears on those fields.
Sorry for my bad english.
First: you have to load the text file using xmlHttp (if available on client system elsewhere you may use FileReader):
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', 'yourfile.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
second: if you have wrote data in different lines, split it to an array:
var myarray = mytext.split("\n");
and finally use the array to fill the form fields.
I don't know much about JS, I'm new in this world, I know about HTML and CSS but this time I was asked to make an aplication where I have to receive data from a plain text to my formulary using JS.
Here's my Plain Text data.txt:
Interfaces: test1,
IP: 192.168.1.1,
Mask : test,
Gateway : test,
DNS 1: test,
DNS 2: test,
Broadcast: test
Here's my Div:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
That's the script I got from you guys, because I was looking for code to do it and that's what I got.
The point is the data that contains "data.tx" should be on my formulary and if I modify any field there and I hit "save" button it has to write on my plain text as well.
Is there a way to make it work? thanks!
Entire code bellow.
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', '/data.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
</div>
I don't know i a more efficient solution exists, but below code is working.
Here is how I achieved it, using jQuery .load()
$(document).ready(function(){
// Load the file in an hidden div element.
$("#hiddenFileLoad").load("data.txt", function(){
// Callback executes when content is loaded
// Place the content in a var
var loadedText = $("#hiddenFileLoad").text();
console.log("loadedText:\n\n"+loadedText);
// Split into an array
var loadedTextSplitted = loadedText.split(",");
// Remove the label part for each
for (i=0;i<loadedTextSplitted.length;i++){
temp = loadedTextSplitted[i].split(": ");
loadedTextSplitted[i] = temp[1];
}
// Place each info in the HTML form
$(".form-panel").find("input").each(function(index){
$(this).val( loadedTextSplitted[index] );
});
}); // End of .load callback
});
I used and hidden div, in order to load the .txt file content, which I gave the "hiddenFileLoad" id.
I made absolutely no change to your HTML (except the hidden div add) and I used your txt file content.
I assume you know how to save to file...
I didn't make the save button to work.
Here is a live example on my server.
I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.
Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.
I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.
$.ajax({
type: "POST",
url: "phpindex.php",
data: $("#signUpForm").serialize(),
success:function(data)
{
if ("#error".val(data))
{
e.preventDefault();
}
}
});
});
My validation and database code is written in phpindex.php
***************signup form************************
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<h1>Sign Up</h1>
<div id="error"><?php if ($error!="") {
echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Your name">
<span class="fa fa-user"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address1</label>
<div class="col-sm-10">
<input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address2</label>
<div class="col-sm-10">
<input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="Email Address">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-5 col-sm-10">
<input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
</div>
</div>
<p><a class="toggleForms">Back to Log in</a></p>
</div>
</form>
***************login form*****************
<form method="post" id="logInForm">
<div class="container" id="logInContainer">
<h1>Log In</h1>
<div id="success"><?php if ($success!="") {
echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Emai</label>
<div class="col-sm-8">
<input type="email" class="form-control" placeholder="Email" name="email">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" placeholder="Password" name="password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-4 col-sm-10">
<input type="hidden" name="signUp" value="0">
<input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
</div>
</div>
<p><a class="toggleForms">Sign Up Here</a></p>
</div>
</form>
Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".
"#error".val(data)
I think you wanted to write something like this
$("#error").val(data)
This error would stop "preventDefault" from happening.
Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.
Lastly, I would consider calling, instead of preventDefault:
return false
Please see this thread as for the reasons why
event.preventDefault() vs. return false
I'm working on this form and I've been trying to add a field to get gratuity added in. I wanted to get a field with grand total to populate with the sum of the total and gratuity together so customers can see what they will be charged. I can not seem to get the field to run the total. I would love any help on this. Thanks!
FORM
<form method="post" action="" id="payment-form">
<div class="col-sm-12">
<div class="container">
<div class="row-fluid">
<?php foreach ($products as $product) : ?>
<div class="col-sm-6 container-cart">
<div class="thumbnail">
<?php if ($product->image_url): ?>
<img class="img-responsive" src="<?=$product->image_url ?>" />
<?php endif // image_url ?>
<div class="caption">
<div class="well">
<h3 class="product-title"><?= $product->title ?></h3>
<p class="product-description"><?= $product->description ?></p>
</div>
<div class="row-fluid">
<div class="input-group input-group-sm scrow">
<p class="lead">
<span id="item-price">$<?= money_format('%i', $product->price) ?></span>
<input type="hidden" class="price-integer form-control" value="<?= money_format('%i', $product->price) ?>">
</p>
</div>
<div class="input-group input-group-sm scrow">
<span class="input-group-addon">Quantity</span>
<input type="text" name="products[<?=$product->id ?>]" id="quantity" class="quantity form-control" autocomplete="off" value="<?=$_POST['products['. $product->id . ']'] ?>">
</div>
<div class="input-group input-group-sm scrow">
<span class="input-group-addon">Delivery Date</span>
<input type="text" name="delivery" id="delivery" class="form-control date-picker" autocomplete="off" value="">
</div>
<div class="input-group input-group-sm scrow">
<span class="input-group-addon">$</span>
<input type="text" name="base-total" id="base-total" class="readonly base-total form-control" value="" readonly>
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</div>
</div>
<?php endforeach // products ?>
</div>
</div>
</div>
<div class="containter">
<div class="row-fluid">
<div class="col-sm-6 col-sm-offset-3">
<span>Total :</span>
<div class="input-group scrow">
<span class="input-group-addon">$</span>
<input type="text" name="total-cart" id="total-cart" class="readonly total-cart form-control" value="" disabled="disabled">
<span class="input-group-addon">.00</span>
</div>
<span>Gratuity :</span>
<div class="input-group scrow">
<span class="input-group-addon">$</span>
<input type="text" name="gratuity" id="gratuity" class="gratuity form-control" value="">
<span class="input-group-addon">.00</span>
</div>
<span>Grand Total :</span>
<div class="input-group scrow">
<span class="input-group-addon">$</span>
<input type="text" name="grand-total" id="grand-total" class="readonly grand-total form-control" value="" disabled="disabled">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group input-group-sm scrow">
<button class="btn btn-default" type="submit">Submit Payment</button>
</div>
</div>
</div>
</div>
</form>
JAVASCRIPT
$('.quantity').on('keyup', function() {
var sum = 0;
$(".container-cart").each(function(i,o){
total = parseInt($(o).find("#quantity").val(), 10) * parseInt($(o).find("input.price-integer").val(), 10);
if(!isNaN(total) /*&& total.length!=0**/) {
$(o).find("#base-total").val(total);
sum += total;
}
});
$("#total-cart").val(sum);
});
$('#gratuity').on('keyup', function() {
grandTotal = parseInt($(o).find('#gratuity').val(), 10) += parseInt($(o).find('#total-cart').val(), 10);
$('$grand-total').val(grandTotal);
});
Change
$('$grand-total').val(grandTotal);
to
$('#grand-total').val(grandTotal);
Id selector is used as #id
Also, remove += in case to adding the values use just +
$('#gratuity').on('keyup', function() {
grandTotal = parseInt($(o).find('#gratuity').val(), 10) + parseInt($(o).find('#total-cart').val(), 10);
$('#grand-total').val(grandTotal);
});