I downloaded the Jquery Validation Engine from https://github.com/posabsolute/jQuery-Validation-Engine, it is working perfectly in IE and Firefox but it is not working on Chrome and Safari, the problem is that it does not matter if the fields are empty or invalid characters are entered, the form will always be submitted and since I'm using php to enter the data to a database obvioulsy the fields are entered as empty.
I am sure I included all needed scripts; have you read about any other member having issues with chrome and Safari using the plug in? I will really appreciate your help Pals.
Adding the code in edit (sorry friends):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
<script src="js/jquery-1.8.2.min.js" type="text/javascript">
</script>
<script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
</script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#collect").validationEngine('attach');
});
</script>
</head>
<body onLoad="formReset()" onUnload="formReset()">
<script>
function formReset()
{
document.getElementById("collect").reset();
}
</script>
<div class="formholder">
<form id="collect" class="formular" method="post" action="insert.php">
<fieldset>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required,custom[onlyLetterSp]] text-input" type="text" name="nombre" />
</label>
<br/>
<label>
<input value="" class="validate[required,custom[email]] text-input" data-prompt-position="topRight:0,20" type="text" name="email" />
</label>
<br/>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required,custom[phone]] text-input" type="text" name="telefono" />
</label>
<br/>
<label>
<select style="height:35px; width:200px;" name="informacion" class="select" form="contact-form" type= "select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</label>
<input class="submit" type="submit" value= ""/>
</fieldset>
<hr/>
</form>
</div>
</body>
</html>
see this code
It is working now ...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#collect").validationEngine('attach');
});
</script>
</head>
<body onLoad="formReset()" onUnload="formReset()">
<script>
function formReset()
{
document.getElementById("collect").reset();
}
</script>
<div class="formholder">
<form id="collect" class="formular" method="post" action="insert.php">
<fieldset>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required] text-input" type="text" name="nombre" />
</label>
<br/>
<label>
<input value="" class="validate[required] text-input" data-prompt-position="topRight:0,20" type="text" name="email" />
</label>
<br/>
<label>
<input value="" data-prompt-position="topRight:0,20" class="validate[required] text-input" type="text" name="telefono" />
</label>
<br/>
<label>
<select style="height:35px; width:200px;" name="informacion" class="select" form="contact-form" type= "select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</label>
<input class="submit" type="submit" value= "test"/>
</fieldset>
<hr/>
</form>
</div>
</body>
</html>
Related
I am using php, MySQL, and Ajax. When I submit the form data is not stored in the database table. But when put action="insert.php" data is submitted to the database table but the page gets refreshed. I am badly stuck here. Can anyone please advice me that how can I solve this problem?? Thanks in advance guys. codes are given below :
index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll"><br>
<label>Name : </label>
<input type="text" name="name" id="name"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" name="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#cForm').on('submit', function(e){
e.preventDefault();
$.ajax({
url:"insert.php",
method:"POST",
data:$('#cForm').serialize(),
success:function(data)
{
if(data == 'ok')
{
document.getElementById("cForm").reset();
}
}
});
});
});
</script>
</div>
</body>
</html>
insert.php
<?php
$con=mysqli_connect("localhost","root","","test");
if(isset($_POST['submit'])){
$roll=$_POST['roll'];
$name=$_POST['name'];
$stream=$_POST['stream'];
$age=$_POST['age'];
$sql="INSERT INTO `student`(`name`, `stream`, `age`) VALUES ('$name','$stream','$age')";
$result=mysqli_query($con,$sql);
if(isset($result))
{
echo 'ok';
}
}
?>
If you want your page doest not refresh. you need to remove form submission form jQuery because you have called on submit and it called the whole form and send it to next page and do it like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll"><br>
<label>Name : </label>
<input type="text" name="name" id="name"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="button" class="btn-submit" value="Submit">
</form>
</div>
<script>
jQuery(document).ready(function() {
$('.btn-submit').click(function() {
$.ajax({
url:"insert.php",
method:"POST",
dataType: "json",
data:$('#cForm').serialize(),
success:function(data)
{
if(data.status == 200)
{
document.getElementById("cForm").reset();
}
}
});
});
});
</script>
</body>
</html>
And your insert.php page replace
echo "ok";
by
echo json_encode(['status'=>200,'message'=>'success']);
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 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>
I'm using fyneworks jquery star-rating with jQuery mobile and in one page created dynamically with a PHP function everything is working fine. But in another page where the "rating tab" is included in the PHP page, the stars are not rendered until I refresh the page.
PAGE
<?php
session_start();
if (!session_is_registered('autorizzato')) {
echo "<h1>Area riservata, accesso negato.</h1>";
echo "Per effettuare il login clicca <a href='login.php'><font color='blue'>qui</font></a>";
die;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src='rating/jquery.MetaData.js' type="text/javascript" language="javascript"></script>
<script src='rating/jquery.rating.js' type="text/javascript" language="javascript"></script>
<link href='rating/jquery.rating.css' type="text/css" rel="stylesheet"/>
<script src="logged.js"></script>
</head>
<body background="#000000">
<div data-role="page" id="lista">
<div data-role="header" data-position="fixed">
<input type="submit" onClick="back()" data-icon="back" class="ui-btn-left" value="Indietro" />
<h1>TITLE</h1>
Logout
</div>
<div data-role="content" data-theme="a">
<form id="save" action="saveComment.php" method="post" data-ajax="false">
<div data-role="fieldcontain">
<label for="textarea">Comment:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<label>Rating:</label>
<div data-role="content" >
<input data-role="none" name="stars" type="radio" class="star" value="1"/>
<input data-role="none" name="stars" type="radio" class="star" value="2"/>
<input data-role="none" name="stars" type="radio" class="star" value="3"/>
<input data-role="none" name="stars" type="radio" class="star" value="4"/>
<input data-role="none" name="stars" type="radio" class="star" value="5"/>
</div>
<input type="hidden" name="id" value="<?php echo $_GET["id"]; ?>" />
<input type="hidden" name="rating" id="rating" value="1" />
<fieldset id="actions">
<input type="submit" id="submit" value="Invia">
</fieldset>
</form>
</div>
</div>
</body>
</html>
logged.js
$(document).load(function () {
$('#rt').click(function () {
var div = $(this);
div.children('input').each(function () {
if ($(this).is(':checked')){
$('#rating').attr("value", $(this).val());
}
});
});
});
I noticed that the page created dynamically by PHP is accessing my database, and takes about 2-3 seconds to display, and everything is rendered. This second page is rendered only after I press F5 and refresh the page.
What am I missing?
Have you tried .ready?
$(document).ready(function() {
// Handler for .ready() called.
});
I have 3 select boxes that load dynamical based on the selection in each box. These work correctly before I try and style the page using the jqtransform plugin. I have tried to figure this out and have searched this site and the web with out finding a solution as to why the select menus do not populate at all if I use the jqtransform plugin. Any help would be greatly appreciated.
Original working code:
`<script language="JavaScript" src="myminiAJAX.js"></script>
<script language="JavaScript" src="functions.js"></script>
<script language="JavaScript">
function init() {
doAjax('man_list.php', '', 'populateComp', 'post', '1');
}
function showOutput(){
alert("This Is Your Model Id: "+getValue('manufacturer'));
}
$(function(){
$('form').jqTransform({imgPath:'jqtransformplugin/img/'});
});
</script>
<style>
#loading{
background:url('loader64.gif') no-repeat;
height: 63px;
}
</style>
</head>
<body onLoad="init();">
<p>
<form method="post" action="<?php echo $PHP_SELF;?>">
<b>System Type:</b> <select name="manufacturer" id="manufacturer" onChange="resetValues();doAjax('type_list.php', 'man='+getValue('manufacturer'), 'populateType', 'post', '1')">
<option value="">Please select:</option></select>
<br /><b>Type of Equipment: </b> <select name="printertype" id="printertype" disabled="disabled" onChange="doAjax('model_list.php', 'man='+getValue('manufacturer')+'&typ='+getValue('printertype'), 'populateModel', 'post', '1')">
<option value="">Please select:</option></select>
<br /><b>Equipment to be depoted out:</b> <select name="printermodel" id="printermodel" disabled="disabled" onChange="showOutput();">
<option value="">Please select:</option></select>
<br /><br /><input type="submit" name="action" value="Submit" />
Code After adding Jqtransform plugin:
<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<link rel="stylesheet" href="demo.css" type="text/css" media="all" />
<script language="JavaScript" src="myminiAJAX.js"></script>
<script language="JavaScript" src="functions.js"></script>
<script type="text/javascript" src="requiered/jquery.js" ></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" > </script>
Removed functions to shorten this post since they didn't change from the original code.
<body onLoad="init();">
<p>
<form method="post" action="<?php echo $PHP_SELF;?>">
<div class="rowElem"><b>System Type:</b> <select name="manufacturer" id="manufacturer" onChange="resetValues();doAjax('type_list.php', 'man='+getValue('manufacturer'), 'populateType', 'post', '1')">
<option value="">Please select:</option></select>
</div>
<div class="rowElem"><br /><b>Type of Equipment: </b> <select name="printertype" id="printertype" disabled="disabled" onChange="doAjax('model_list.php', 'man='+getValue('manufacturer')+'&typ='+getValue('printertype'), 'populateModel', 'post', '1')">
<option value="">Please select:</option></select>
</div>
<div class="rowElem"><br /><b>Equipment to be depoted out:</b> <select name="printermodel" id="printermodel" disabled="disabled" onChange="showOutput();">
<option value="">Please select:</option></select>
</div>
<div class="rowElem"><br /><br /><input type="submit" name="action" value="Submit" /> </div>
</p>
<div id="loading" style="display: none;"></div>
<div id="output"></div>