I have the below form, and after the form the PHP requests a Curl which can take a while. Because of this they keep pressing the submit button thinking that nothing has happened. This causes multiple entries in the database. Could someone help me and let me know what to put in to stop this.
I tried the Javascript solution in the first answer but it stopped the PHP script that followed. Not what I wanted. Sorry
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css2/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfonts-->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text.css'/>
<!--//webfonts-->
<center><img class="displayed" src="images/logo.jpg" alt="Logo" style="width:128px;height:128px;"></center>
</head>
<body>
<div class="main">
<form action="" method="POST" enctype="multipart/form-data" id="contactform" >
<input type="hidden" name="action" value="submit">
<h1><span>Sign Up</span> <lable> The Brook on Sneydes</lable> </h1>
<div class="inset">
<p>
<center><label ><?php echo $text; ?></label></center>
<label for="first">First Name</label>
<input type="text" name="first" id="first" value="" placeholder="" required/>
</p>
<p>
<label for="last">Surname</label>
<input type="text" name="last" id="last" value="" placeholder="" required/>
</p>
<p>
<label for="mobile">Mobile Number</label>
<input type="text" name="mobile" id="mobile" value="" placeholder="" required/>
</p>
<p>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" value="" placeholder="" required/>
</p>
</div>
<p class="p-container">
<input type="submit" name="submit" id="submit" value="Submit">
</p>
</form>
</div>
<!-----start-copyright---->
<div class="copy-right">
<p> © 2016 Spearhead Digital. All rights reserved.</p>
</div>
<!-----//end-copyright---->
</body>
</html>
<?php
if(isset($_POST['submit']) && !empty($_POST) ){
$first = $_POST['first'];
$last = $_POST['last'];
$mobile = $_POST['mobile'];
$email = $_POST['email'];
// Other Code
}
You can disable the submit button when submitting the form.
An example using jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#contactform').submit(function() {
$('input[type=submit]', this).prop("disabled", true);
});
});
</script>
Related
Here are codes that I have tried the last. With these codes I got nothing in input field. I want user can see what he has entered but cannot change the same. if he wants to change he has to go back to the previous page and refill the data with correct value.
For page 1 (with php extension)
<?PHP
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type = "text/css" href="index.css"/>
<title>EduLife Welcomes You</title>
<link rel="icon" type="image/png" href="title-icon.png"/>
</head>
<body>
<?php
// Set session variables
$_SESSION['dob'] = $dob;
$_SESSION['class'] = $class;
?>
[...javascript for calculating age...]
<form>
<h3>Check Eligibility : </h3>
Enter Date of Birth of the child: <input type="date" name="dob" id="dob" required/><br>
<input class="btn" type="button" value="Check Eligibility" onclick="ageCalculate()"><br>
You are eligible for the Grade : <span id="class" class="eligible"></span>
</form>
OK, I want to apply!</button>
</body>
</html>
CODE FOR PAGE 2(with php extension)
<?PHP
session_start();
$dob = $_SESSION['dob'];
$class = $_SESSION['class'];
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type = "text/css" href="admn-form.css"/>
<title>EduLife</title>
<link rel="icon" type="image/png" href="title-icon.png"/>
</head>
<div id="admn-form">
<form action="insert.php" method="POST">
<h2 id="form-name">Apply For Admission </h2>
<h2 id="part"> Part A - Information of the student</h2>
<h3><span style="color:blue">You applying for the Grade:</span><input for="class" name="class" id="class" value="<?php echo $_SESSION['class'];?>" readonly> </input></h3>
<h3>1. Name of the student</h3>
<p class="quest">
<label for="first-name"> First Name * : </label>
<input type="text" Name="firstname" placeholder="First Name" pattern="[A-Z]{2,15}" required>
<label for="middle-name"> Middle Name : </label>
<input type="text" Name="middlename" placeholder="Middle Name" pattern="[^\s][A-Z]+{2,15}">
<label for="last-name"> Last Name : </label>
<input type="text" Name="lastname" placeholder="Last Name" pattern="[^\s][A-Z]+{2,15}">
</p>
<h3>2. Select Gender of the student *</h3>
<p class="quest">
<input type="radio" id="female" name="gender" value="Female" required>
<label for="female">Female</label>
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>
<input type="radio" id="other" name="gender" value="Other" required>
<label for="other">Other</label>
</p>
<h3>4. Enter Birth-detail of the student</h3>
<p class="quest">
<label for="DOB"> Date of Birth *: </label>
<input type="date" name="dob" value="<?php echo $_SESSION['dob'];?>" readonly>
</p>
</form>
</div>
</HTML>
I the below script does not work. I am trying to pass values generated using a jquery function to php. when I run this code it. The form slides to the right, but no values are encoded. I am thinking I am doing something simple wrong.
<!DOCTYPE html>
<html>
<head>
<title>Target Example</title>
<?php
$x = $_POST['total'];
echo $x;
?>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js"></script>
<script>
$(document).ready(function() {
function compute() {
var a = $('#a').val();
var b = $('#b').val();
var total = a * b;
$('#total').val(total);
}
$('#a, #b').change(compute);
});
</script>
</head>
<body>
<form action="<?php echo $PHP_SELF;?>" method="post">
<div data-role="page" id="irr">
<div data-role="header">
<h1>Calculation</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="a">Diameter:</label>
<input type="number" name="a" id="a" value="" />
<label for="b">Diver:</label>
<input type="number" name="b" id="b" value="" />
<label for="total">Result:</label>
<input type="text" name="total" id="total" value="" />
<input type="submit">
</div>
What did we do here?
</div>
</div>
</form>
</body>
</html>
Your form action was not set correctly. Use $_SERVER['SCRIPT_NAME'] instead. Also, I used the short hand echo feature in case you are wondering. Hopefully that fixes it for you :)
<!DOCTYPE html>
<html>
<head>
<title>Target Example</title>
<?php
$x = $_POST['total'];
echo $x;
?>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js"></script>
<script>
$(document).ready(function() {
function compute() {
var a = $('#a').val();
var b = $('#b').val();
var total = a * b;
$('#total').val(total);
}
$('#a, #b').change(compute);
});
</script>
</head>
<body>
<form action="<?=($_SERVER['SCRIPT_NAME'])?>" method="post">
<div data-role="page" id="irr">
<div data-role="header">
<h1>Calculation</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="a">Diameter:</label>
<input type="number" name="a" id="a" value="" />
<label for="b">Diver:</label>
<input type="number" name="b" id="b" value="" />
<label for="total">Result:</label>
<input type="text" name="total" id="total" value="" />
<input type="submit">
</div>
What did we do here?
</div>
</div>
</form>
</body>
</html>
I have the following form asking for simple information, yet the data will not parse to my database. I have similar forms on other parts of my site, and they are connected to the database and retrieving data perfectly. Have pasted the code below and believe that MYSQL script is written as it is supposed to be. Why is the data not being retrieved once a use presses the submit button?
<?php
// Written by KV Ghumaan
session_start(); // Start session first thing in script
// Script Error Reporting
error_reporting(E_ALL);
ini_set('display_errors', '1');
// Connect to the MySQL database
include "storescripts/connect_to_mysql.php";
?>
<?php
// Parse the form data and add inventory item to the system
if(isset($_POST['fName'])){
$id = mysql_real_escape_string($_POST['id']);
$fName = mysql_real_escape_string($_POST['fName']);
$lName = mysql_real_escape_string($_POST['lName']);
$address = mysql_real_escape_string($_POST['address']);
$city = mysql_real_escape_string($_POST['city']);
$state = mysql_real_escape_string($_POST['state']);
$zipCode = mysql_real_escape_string($_POST['zipCode']);
//Add this product into the database now
$sql = mysql_query("INSERT INTO checkoutInfo (id, fName, lName, address, city, state, zipCode)
VALUES('$id','$fName','$lName','$address','$city','$state','$zipCode')") or die (mysql_error());
$pid = mysql_insert_id();
}
?>
<html>
<head>
<!--JQUERY-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jqueryui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jqueryui/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="jqueryui/jquery-ui.structure.css"/>
<link rel="stylesheet" type="text/css" href="jqueryui/jquery-ui.theme.css"/>
<!--GOOGLE FONT & EXTERNAL LIBS-->
<link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style/style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CHECKOUT</title>
</head>
<body>
<?php include_once("template_header.php");?>
<table width="100%" height="76vh" border="10%" cellspacing="10" style="padding: 2vh 10vw 0vh 10vw; border-style:none;">
<tr height="75%" cellspacing="0" style="border-style:none;">
<td width="30%" style="border-style:none; padding-top: 10vh;">
<form class="form" action="confirmation.php" enctype="multipart/form-data" name="checkoutForm" id="checkoutForm" method="POST">
<div id="billingQuestions">
<h3><strong>BILLING ADDRESS:</strong></h3>
<div id="formQuestions">
<label>First Name:*</label><br />
<input type="text" name="fName" size="40vw" required>
</div>
<div id="formQuestions">
<label>Last Name:*</label><br />
<input type="text" name="lName" size="40vw" required>
</div>
<div id="formQuestions">
<label>Address 1:*</label><br />
<input type="text" name="address" size="40vw" required>
</div>
<div id="formQuestions">
<label>Address 2:*</label><br />
<input type="text" size="40vw">
</div>
<div id="formQuestions">
<label>City: *</label><br />
<input name="city" type="text" size="40vw" required>
</div>
<div id="formQuestions">
<label>State: *</label><br />
<input name="state" type="text" size="40vw" required>
</div>
<div id="formQuestions">
<label>Zip Code: *</label><br />
<input name="zipCode" type="text" size="40vw" required>
</div>
<input type="submit" value="Submit"/>
</div>
</form>
</td>
</tr>
</table>
<?php include_once("template_footer.php");?>
</body>
</html>
I am using php and CodeIgniter. I am a novice at both of these (career VB.Net and C# developer). However, trying to create a basic registration form, I'm having a hard time getting jQuery validation to work.
header.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?><!DOCTYPE html>
<html>
<head>
<?php if(isset($title)) {?>
<title>Discuss Cards - <?php echo $title ?></title>
<?php } else { ?>
<title>Discuss Cards</title>
<?php } ?>
<link rel="stylesheet" href="<?php echo base_url();?>styles/forum.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="<?php echo base_url();?>js/jquery.validate.min.js"></script>
</head>
<body>
<?php if(isset($title)) {?>
<h1><?php echo $title?></h1>
<?php } ?>
<?php if (isset($page_description)) {?>
<p id="page_description"><?php echo $page_description?></p>
<?php } ?>
create.php
<script>
$("#createaccount").validate();
</script>
<?php $attributes = array('id'=>'createaccount');
echo form_open('user/create_account',$attributes); ?>
<?php echo form_label('Email','txtEmail');?>
<br />
<?php $data = array('type'=>'email','name'=>'txtEmail','id'=>'txtEmail','maxlength'=>'50','minlength'=>'2');
echo form_input($data); ?>
<br /><br />
<?php echo form_label('Username','txtUsername');?>
<br />
<?php $data = array('name'=>'txtUsername','id'=>'txtUsername','maxlength'=>'50','minlength'=>'5');
echo form_input($data); ?>
<br /><br />
<?php echo form_label('Password','pswPassword');?>
<br />
<?php $data = array('name'=>'pswPassword','id'=>'pswPassword');
echo form_password($data); ?>
<br /><br />
<?php echo form_label('Confirm Password','pswConfirmPassword');?>
<br />
<?php $data = array('name'=>'pswConfirmPassword','id'=>'pswConfirmPassword');
echo form_password($data); ?>
<br /><br />
<input type="submit" value="Register" name="Register" />
<?php echo form_close();?>
footer.php
<strong>© 2016</strong>
</body>
</html>
result...
<!DOCTYPE html>
<html>
<head>
<title>Discuss Cards - Create New Account</title>
<link rel="stylesheet" href="http://[::1]/forum/styles/forum.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://[::1]/forum/js/jquery.validate.min.js"></script>
</head>
<body>
<h1>Create New Account</h1>
<script>
$("#createaccount").validate();
</script>
<form action="http://[::1]/forum/index.php/user/create_account" id="createaccount" method="post" accept-charset="utf-8">
<label for="txtEmail">Email</label>
<br>
<input type="email" name="txtEmail" value id="txtEmail" maxlength="50" minlength="2">
<br>
<br>
<label for="txtUsername"></label>
<br>
<input type="text" name="txtUsername" value id="txtUsername" maxlength="50" minlength="5">
<br>
<br>
<label for="pswPassword">Password</label>
<br>
<input type="password" name="pswPassword" value id="pswPassword">
<br>
<br>
<label for="pswConfirmPassword">Confirm Password</label>
<br>
<input type="password" name="pswConfirmPassword" value id="pswConfirmPassword">
<br>
<br>
<input type="submit" value="Register" name="Register">
</form>
<strong>© 2016</strong>
</body>
</html>
Now, the links to the js and css files are correct. I used the example from http://jqueryvalidation.org/documentation/:
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
However, I feel that I'm missing something because it's not working. When I use their demo (http://jqueryvalidation.org/files/demo/), a new label is created under the input area which displays the error. However, when I test my code (Notepadd++, latest version of Google Chrome, WAMPServer 2.5), I only get Chrome validation. Could someone point out to me what I'm doing incorrect? Thanks.
A bit too long for a comment, but not sure if it is the only problem. The first thing I see is that the
<script>
$("#createaccount").validate();
</script>
is located before the form with id="createaccount". This means this javascript code is parsed and run before the element exists inside the DOM.
In order to run this JS when the DOM is loaded, you then need to wrap it into this specific jquery part :
$( document ).ready( function( ) {
$("#createaccount").validate();
}
(And ideally you put all JS at the end of the page, before the closing </body> tag)
I have been playing with bookmarklets and made one that wraps a page in an iframe then puts a form so I can submit data to my server but I can't get PHP variables from the page.
sample code (have been compiling to bookmarklet at: http://moxleystratton.com/javascript/bookmarklet-compiler):
javascript:void((function(){
var a=document;
a.write(
'<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>'+a.title+' - Edit Mode </title>
</head>
<body>
<section>
<div id="wrapper">
<iframe src="'+a.URL+'" >
</iframe>
</div>
</section>
<footer>
<form action="/sys/manage/seo.php" method="post">
<input type="hidden" value=rawData >
<label for="title">Title</label>
<input type="text" name="title" value="<?= $title;?>">
<label for="title">Meta-Description</label>
<input type="text" name="meta-desc" value="<?= $data->meta-desc;?>">
<label for="title">Meta-Keywords</label>
<input type="text" name="meta-key" value="<?= $data->meta-key;?>">
</form>
</footer>
</body>
</html>')})());
First fix your JS like this:
void((function(){
var a=document;
a.write(
'<!DOCTYPE html>\
<html>\
<head>\
<meta charset="UTF-8\
<title>'+a.title+' - Edit Mode </title>\
</head>\
<body>\
<section>\
<div id="wrapper">\
<iframe src="'+a.URL+'" >\
</iframe>\
</div>\
</section>\
<footer>\
<form action="/sys/manage/seo.php" method="post">\
<input type="hidden" value=rawData >\
<label for="title">Title</label>\
<input type="text" name="title" value="<?= $title;?>">\
<label for="title">Meta-Description</label> \
<input type="text" name="meta-desc" value="<?= $data->meta-desc;?>">\
<label for="title">Meta-Keywords</label> \
<input type="text" name="meta-key" value="<?= $data->meta-key;?>">\
</form>\
</footer>\
</body>\
</html>')})());
Demo here : http://jsfiddle.net/shahverdy/Z5EBk/