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.
Related
I'm using the script below to automatically add new lines in a form, but I do not see how to retrieve the values of each field under PHP with $_POST.
If someone has already had this problem with a table in a form, thank you for helping me!
what procedure to retrieve in test5.php the values of the fields.
I do not know how to get an array in a $_POST
thank you in advance
Here is my script
<html>
<head>
</head>
<body>
<form action="test5.php" method="post">
<div id="address">
<div id="1" name="address[]">
<input id="mail" type="text" />
<input id="type" type="text" />
<input id="comment" type="text" />
×
</div>
</div>
<input id="add_address" type="button" value="Ajouter" />
<input type="submit" value="Create PDF" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('#add_address').click(function(event) {
var lastDiv = $('#address > div').last();
var id = parseInt(lastDiv.attr("id")) + 1;
(lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show();
return false;
});
$('body').on('click', '.removeclass', function(event) {
$(this).parent().remove();
return false;
})
</script>
</body>
</html>
1.) Remove the name-attribute from the div-element
2.) Build your input-elements like:
<div id="..">
<input type="..." name="address[1][mail]" />
<input type="..." name="address[1][type]" />
<input type="..." name="address[1][comment]" />
</div>
<div id="..">
<input type="..." name="address[2][mail]" />
<input type="..." name="address[2][type]" />
<input type="..." name="address[2][comment]" />
</div>
I modified my script as below and in test5.php, I can view the data with this script.
<? Php
// print_r ($ _ POST);
echo $ _POST ['mail'] [2];
?>
Thanks
-------------test5.php-------------
<div id="address">
<div id="1">
<input type="text" name="mail[]" />
<input type="text" name="type[]" />
<input type="text" name="comment[]" />
</div>
</div>
I have a form
<form id="ajax-form" onsubmit="return false;">
<p class="legend">All fields marked with an asterisk are required.</p>
<fieldset>
<legend>User Details</legend>
<div><label for="post[uname]">Username <em>*</em></label> <input id="post[uname]" type="text" name="uname" value="" /></div>
<p class='note' id='err[Name]'></p>
</fieldset>
<div class="buttonrow">
<input type="submit" value="Submit This Form via AJAX" class="button" />
<input type="button" value="Start Again" class="button" />
Refresh this Page
</div>
</form>
I have two arrays post and err. I'm trying to send them to php and then in php it will json_encode the array and print it on the screen like so:
{
"err": {
"uname": "Please enter a user name"
}
"post": {
"uname": ""
}
}
or this is if the user did enter a name:
{
"post": {
"uname": "Bob Ross"
}
}
There could be multiple fields for post and err but it should still follow the same suite.
How do I send the data to php, I understand it's some sort of serializeArray but it doesn't format it properly when I do:
JSON.stringify($("#ajax-form").serializeArray())
A jsfiddle to full html:
https://jsfiddle.net/dzv8ttjn/1/
Your best bet is to call .serialize(); on the form which will give you something like: user-name=some%20name&email=some%20emale&gender=Female&interests=Software
Send that to the PHP script, and have the script create the format of the response while looping over the $_POST array. Something like the below would work:
(note that I've changed your id's to be more sensible and updated the jQuery version used)
<?php
if(count($_POST)>0){
$response = ['err'=>[], 'post'=>[]];
foreach($_POST as $key => $value)
{
$response['post'][$key]=$value;
if(trim($value) == '') $response['err'][$key]='Please enter a '.$key;
}
echo json_encode($response);
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Lab4: Form Validation with AJAX,JQuery,JSON and PHP</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
$("#ajax-form").on('submit', function(event) {
event.preventDefault();
var dataString = $(this).serialize();
$.ajax({
type: "POST",
// url: "page.php", // add this line to send to some page other than the this one
data: dataString,
success: function(response) {
if (response) {
alert('test worked');
}
},
error: function(xhr, status, error) {
console.log(xhr);
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<h2>Form Validation with AJAX,JQuery,JSON and PHP</h2>
<div class="form-container">
<span id="ajax-message"></span>
<form id="ajax-form" onsubmit="return false;">
<p class="legend">All fields marked with an asterisk are required.</p>
<fieldset>
<legend>User Details</legend>
<div>
<label for="uname">Username <em>*</em></label>
<input id="uname" type="text" name="user-name" value="" />
<p class='note' id='name-error'></p>
</div>
<div>
<label for="password">Email Address <em>*</em></label>
<input id="password" type="text" name="email" value="" />
<p class='note' id='password-error'></p>
</div>
<div>
<label for="post[gender]">Gender <em>*</em></label>
<input type="radio" name="gender" value="Male" class="form-check-input" id="Male" required> Male
<input type="radio" name="gender" value="Female" class="form-check-input" id="Female" required> Female
<p class='note' id='gender-error'></p>
</div>
<div>
<label for="interests">Interests<em>*</em></label>
<input type="checkbox" name="interests" value="Music" class="form-check-input" id="Music"> Music
<input type="checkbox" name="interests" value="Software" class="form-check-input" id="Software"> Software
<input type="checkbox" name="interests" value="Hardware" class="form-check-input" id="Hardware"> Hardware</div>
</fieldset>
<div class="buttonrow">
<input type="submit" value="Submit This Form via AJAX" class="button" />
<input type="button" value="Start Again" class="button" />
Refresh this Page
</div>
</form>
</div>
<h3>JSON Array</h3>
<pre id='debug'></pre>
</div>
</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 have this problem where I am unable to clear the textbox of the login page. When the user successfully log in and then immediately returns to the login page, he will still see his username and password in the textbox.
I have tried using this code to solve the problem
body onload="document.getElementById('name').value='';document.getElementById('pass').value=''"
but the problem with this code is it doesn't immediately clear the textbox. I need to refresh the page a couple of times before it works. Is there an alternate way of solving the problem?
Here is my code
<?php
/**** Start Session ****/
session_start();
/**** Deletes the data stored in the session ****/
unset($_SESSION['SESS_USER_NAME']);
unset($_SESSION['REF_ID']);
unset($_SESSION['REF_FNAME']);
unset($_SESSION['REF_LNAME']);
unset($_SESSION['REF_ACCOUNT']);
unset($_SESSION['COUNT']);
?>
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
</head>
<body onload="document.getElementById('name').value='';document.getElementById('pass').value=''">
<form action="admin-exec.php" method="post" >
<center><?php include('../function/admin_errmsg.php'); ?></center>
<br>
<input type="text" name="txt_username" placeholder="Username" id="name">
<br>
<input type="password" name="txt_password" placeholder="Password" id="pass">
<br>
<img id="captcha" class="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" />
<input type="text" name="captcha_code" size="10" maxlength="6" placeholder="Input Captcha Code Here" />
<a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">
<br />[ Different Image ]</a>
<br>
<br>
<input type="submit" value="Let Me In" class="btn" >
</form>
</body>
</html>
I suspect it's the browser auto filling the fields as there's nothing in the code to populate the values of the inputs.
From a UX perspective though I would expect it to redirect to another page once logged in or if it's a login form in the header I would expect it to no longer be displayed.
Use the following code for your html part
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<script>
function clearAll()
{
document.getElementById('name').value='';
document.getElementById('pass').value='';
}
</script>
</head>
<body onload="clearAll()">
<form action="admin-exec.php" method="post" >
<center><?php include('../function/admin_errmsg.php'); ?></center>
<br>
<input type="text" name="txt_username" placeholder="Username" id="name">
<br>
<input type="password" name="txt_password" placeholder="Password" id="pass">
<br>
<img id="captcha" class="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" />
<input type="text" name="captcha_code" size="10" maxlength="6" placeholder="Input Captcha Code Here" />
<a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">
<br />[ Different Image ]</a>
<br>
<br>
<input type="submit" value="Let Me In" class="btn" >
</form>
</body>
</html>
you can add and javascript like this
$(document).ready(function(){
$("#name").val("");
)
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.
});