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.
});
Related
So I have two pages, both pages have an input field, and if the user fills out the input field and goes to the next page they will see new content in the form's place. So it's basically like "fill out this form and show new content". Whether you fill out the form on page A or page B, the other page will recognize if you have filled it out or not. Make sense?
I have it working as long as you don't refresh the page or get to the other page other than clicking the submit input.
What am I doing wrong here?
<!--- Page A -->
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" name="viewport">
<meta content="noindex, nofollow" name="robots">
<title>Page A</title>
<meta content="Page" name="description">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<form action="/b.php" id="l-form" method="post" name="l-form">
<div class="wrapper localize" style="<?php if(isset($_POST['treasure'])) { echo "display:none;"; } else { echo "display:block;"; } ?>">
<div class="header_container">
<h2>Make sure we offer service at your location</h2>
</div>
<div class="input_container">
<input autocomplete="off" class="input-box street" id="street" name="userLogin" placeholder="Street address" tabindex="0" type="text">
<input autocomplete="off" class="input-box suite" id="suite" name="suite" placeholder="Suite (Optional)" tabindex="0" type="text">
<input autocomplete="off" class="input-box zipcode" id="zipcode" name="zipcode" placeholder="Zip code" tabindex="0" type="text">
<input type="submit" name="treasure" value="See offers">
</div>
</div>
<!-- results 3 -->
<div class="results" style="<?php if(isset($_POST['treasure'])) { echo "display:block;"; } else { echo "display:none;"; } ?>">
<p class="results-heading">Excellent news. We know who you are.</p
</div>
</form>
</body>
</html>
<!--- Page B -->
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" name="viewport">
<meta content="noindex, nofollow" name="robots">
<title>Page A</title>
<meta content="Page" name="description">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<form action="/a.php" id="l-form" method="post" name="l-form">
<div class="wrapper localize" style="<?php if(isset($_POST['treasure'])) { echo "display:none;"; } else { echo "display:block;"; } ?>">
<div class="header_container">
<h2>Make sure we offer service at your location</h2>
</div>
<div class="input_container">
<input autocomplete="off" class="input-box street" id="street" name="userLogin" placeholder="Street address" tabindex="0" type="text">
<input autocomplete="off" class="input-box suite" id="suite" name="suite" placeholder="Suite (Optional)" tabindex="0" type="text">
<input autocomplete="off" class="input-box zipcode" id="zipcode" name="zipcode" placeholder="Zip code" tabindex="0" type="text">
<input type="submit" name="treasure" value="See offers">
</div>
</div>
<!-- results 3 -->
<div class="results" style="<?php if(isset($_POST['treasure'])) { echo "display:block;"; } else { echo "display:none;"; } ?>">
<p class="results-heading">Excellent news. We know who you are.</p
</div>
</form>
</body>
</html>
You're not using session variables anywhere. When someone submits your form, you need to do something like:
$_SESSION['treasure'] = $_POST['treasure'];
to set the 'treasure' session variable. On the other page or after a refresh, you can then access $_SESSION['treasure'].
Currently, this seems to work when you click submt, because you are making $_POST['treasure'] available to the target page, not because you are using sessions as intended.
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 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>
In my htm page i want to use a button which submit my form by using function. I use validations on my fields and when i press submit button it displays error message but doesnot retain last values it refresh my form. I just want that the values that i entered will be exist there and just the field that has only error message will be disappear. all other fields remain there.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--<meta http-equiv="refresh" content="text/html; charset=iso-8859-1" />-->
<!--
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-->
<title>Phone Registration</title>
<link rel="stylesheet" type="text/css" href="file:///C|/xampp/htdocs/track/css/view.css" media="all"/>
<script type="text/javascript" src="file:///C|/xampp/htdocs/track/javascript/view.js"></script>
<script type="text/javascript" src="file:///C|/xampp/htdocs/track/javascript/external.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body id="main_body" >
<img id="top" src="file:///C|/xampp/htdocs/track/images/top.png" alt=""/>
<div id="form_container">
<h3>
Phone Registration
Officer Registration
Customer Registration
Task Entry
</h3>
<form name="order" id="form_532698" class="appnitro" method="post" action="" >
<div class="form_description">
<h2>Phone Registration</h2>
</div>
<ul >
<li>
<span>
<label class="description">IMEI # : </label>
<input name="imei" id="imeinum" class="element text medium" type="text" maxlength="15" value=""/>
</span>
</li>
<li>
<span>
<label class="description" >Phone Number </label>
<input name="phone" id="phnum" class="element text medium" type="text" maxlength="11" value="" onblur="validate(this)"/>
</span>
</li>
<li>
<span>
<label class="description" >From Date </label>
<input id="datepicker" name="fdate" class="element text medium" maxlength="10" value="" type="text"/>
</span>
</li>
<li>
<span>
<label class="description" for="element_4">Active </label>
<input name="r1" id="rad" class="element radio" type="radio" value="Yes" checked="checked" />
<label class="choice">Yes</label>
<input name="r1" id="rad" class="element radio" type="radio" value="No" />
<label class="choice">No</label>
</span>
</li>
<li>
<input type="button" name="save" value="Save" />
</li>
<!--
<li class="buttons">
<input type="hidden" name="form_id" value="532698" />
<input class="button_text" type="submit" name="save" value="Save" id="" />
<input class="button_text" type="reset" name="cancel" value="Cancel" />
<input class="button_text" type="submit" name="search" value="Search" id="" />
<input class="button_text" type="submit" name="up" value="Update" id="" />
<input class="button_text" type="submit" name="del" value="Delete" id="" />
</li>
-->
</ul>
</form>
</div>
<img id="bottom" src="file:///C|/xampp/htdocs/track/images/bottom.png" alt=""/>
<script type="text/javascript" language="JavaScript">
//submit form
document.order.submit();
</script>
</body>
</html>
Kindly guide me how can i do this?? I'll be thankful to you
You can use this code to prevent form from submiting to server if validation fails:
$("form").on("submit", function(event){
if(!isValidForm($(this)){
event.preventDefault();
}
});
supposingly isValidForm() method takes form selector and returns true if form is valid and false if it's not.
use e.preventDefault(); or return false;
Check the validation is success or not in $(function()) if not then return false in that.. else return true...
<script>
$(function() {
$( "#datepicker" ).datepicker();
if(!validation) {
return false;
}
return true;
});
</script>
There are 2 major ways of doing this: PHP(server-side) and javascript(client-side).
The PHP solution isn't that clean, you need to refresh the page, check the values there and set the correct value in every input (removing the ones you want to delete)
The javascript/jQuery solution is cleaner: instead of a <input type='submit' /> use a button that calls a javascript function, checks every input (if you need server information to check them you can use Ajax) and displays the errors, setting only the ones that were wrong to blank.
Both ways are ok, but the javascript method is much easier to control/update, and it's more user-friendly since it doesn't refresh the page.