I wrote a simple page with HTML and PHP. So, before PHP I would like to check empty fields with Jquery, but I do not learn the Jquery yet, so I would appreciated if someone helped me.
<?php
if(isset($_POST[add]))
{
if(empty($_POST[name]) || empty($_POST[surname])) {echo 'All form fields are required';}
}
?>
<form action="" method=post>
<table border=0 cellspacing=10 cellpadding=5>
<tr>
<td>Name:</td>
<td><input type="text" name="name" size="10" value=""></td>
</tr>
<tr>
<td>Surname:</td>
<td><input type="text" name="surname" size="10" value=""></td>
</tr>
<tr>
<td colspan=2><input type="submit" name="add" value="Add"></td>
</tr>
</table>
</form>
You can add validation by adding jquery.
$('input[name="add"]').click(function() {
if($('input[name="name"]').val() == '' || $('input[name="surname"]').val() == '') {
$('.error').html('');
if($('input[name="name"]').val() == '') {
$('.error').append('<p>Please enter your name</p>');
}
if ($('input[name="surname"]').val() == '') {
$('.error').append('<p>Please enter your surname</p>');
}
$('.error').show();
return false;
}
return true;
})
html code
<div class="error" style="display:none"></div>
<form action="" method=post>
<table border=0 cellspacing=10 cellpadding=5>
<tr>
<td>Name:</td>
<td><input type="text" name="name" size="10" value=""></td>
</tr>
<tr>
<td>Surname:</td>
<td><input type="text" name="surname" size="10" value=""</td>
</tr>
<tr>
<td colspan=2><input type="submit" name="add" value="Add"></td>
</tr>
</table>
</form>
Add a javascript function on submit let say validate() and add this jquery code in that
function validate() {
var name = $("#name").val();
if (name == "") {
alert('Name is required');
return false;
}
}
<input class="field-name" type="text" name="name" size="10" value="">
i added a class to this input field so i can use a jquery selector
var name = $('.field-name').val();
if(name="") {
console.log('name is empty');
//your code here to do something when the field is empty
}
Following code can give you some idea. I would suggest to read tutorial on jquery at
http://www.w3schools.com/jquery/default.asp
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("#add").submit(function(){
if ($('#name').length == ""){
alert("ERROR in name!");
}
});
});
</script>
<form action="" method=post>
<table border=0 cellspacing=10 cellpadding=5>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" size="10" value=""></td>
</tr>
<tr>
<td>Surname:</td>
<td><input type="text" name="surname" id="surname" size="10" value=""</td>
</tr>
<tr>
<td colspan=2><input type="submit" name="add" id="add" value="Add"></td>
</tr>
</table>
</form>
</html>
Related
I am trying to validate the mobile number, email, firstname and etc.. field by using required and pattern keyword but its not responding anything.
In my program there is one input field for mobile number if user has entered mobile number which is not stored in database, then registration page pops up and user should registered for further process and if they entered mobile number which is stored in database then random number is displayed, but when I am entering the values in registration form but it is not validating like I have return required keyword in input field but still its not responding.
Please help me out of this.
Below us my code:
HTML
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<body>
<div>
<form action = "#" method = "post" >
<div>
<legend >Login</legend>
<table id="verify_table" cellpadding="2" cellspacing="2" >
<tr>
<td> Mobile No. </td>
<td><input id="mob" type="tel" name="mobile" required pattern="\[7-9]{1}[0-9]{9}\" /></td>
<td><input type="button" name="verify" class="verify" value="Verify"></td>
</tr>
</table>
</div>
<div id="random" style="display: none;" >
<table id='random_table'>
<tr>
<td>Random Number generated</td>
<td id='rand'>
</tr>
</table>
</div>
<!--Register pop up-->
<div id="reg_light" class="white_content">
<div id="register-title">
<div id="reg-title">
<h6>Register</h6>
</div>
<div id="close">
<a href="javascript:void(0)" onclick="document.getElementById('reg_light').style.display='none';
document.getElementById('fade').style.display='none'; $('#firstname').val('');
$('#lastname').val('');
$('#mobile_number').val('');
$('#email').val('');">X</a>
</div>
</div>
<?php //echo form_open('register'); ?>
<div id="register-inner">
<form id="reg_form" method="POST">
<table id="register_table">
<tr><td><font color="red">* Fields are mandatory</font></td></tr>
<!--<form id="reg_form" onSubmit="return formValidation();">-->
<tr>
<table id="name">
<tr>
<td>First Name<font color="red">*</font></td>
<td><input id="firstname" type="text" placeholder="First Name" name="firstname" required pattern="[A-Za-z]+" ></td>
<td>Last Name<font color="red" >*</font></td>
<td> <input id="lastname" type="text" placeholder="Last Name" name="lastname" required pattern="[A-Za-z]+"></td>
</tr>
</table>
</tr>
<tr><td>  </td></tr>
<tr>
<table id="gen">
<tr>
<td>Gender<font color="red">*</font></td>
<td><input type="radio" name="gender" value="Male"> Male</td>
<td><input type="radio" name="gender" value="Female"> Female</td>
</tr>
</table>
</tr>
<tr>
<table id="mob">
<tr>
<td>Mobile No.<font color="red">*</font></td>
<td><input id="mobile_number" type="text" placeholder="Mobile number" name="mobile_number" required pattern="[7-9]{1}[0-9]{9}" /></td>
<td>Email id<font color="red">*</font></td>
<td> <input id="email" type="email" placeholder="Email-id" name="email" required pattern="[A-Za-z]+[0-9]+#[A-Za-z]+.[A-Za-z]+"> </td>
</tr>
</table>
<table id="submit">
<tr>
<td id="errorBox"></td>
<td><input class="reg_data" id="submit" type="button" name="submit" value="Register"></td>
</tr>
</table>
</tr>
</table>
</form>
</div>
</body>
</html>
Here is my jQuery code
$(document).ready( function() {
$('.verify').click(function(){
var mob = $('#mob').val();
//alert(mob);
$.ajax({
url: "<?php echo base_url(); ?>/login/verify",
data: {'mob_no': mob},
type: "post",
cache: false,
success: function (data)
{
//alert(data);
var obj = $.parseJSON(data);
var fi="";
var otp="";
var rand="";
rand+=Math.floor(100000 + Math.random() * 99999);
$.each(obj, function()
{
fi=this['id'];
});
if(!fi=="")
{
//document.getElementById("random").innerHTML=random_number;
$('#rand').val(rand);
document.getElementById("rand").innerHTML=rand;
document.getElementById('random').style.display='block';
}
else
document.getElementById('reg_light').style.display='block';
document.getElementById('fade').style.display='block';
//alert(fi);
}
},
error: function (xhr, ajaxOptions, thrownError) {
//alert(thrownError);
}
});
});
});
Reset the form validation, after making the form visible
function resetFormValidator(formId) {
$(formId).removeData('validator');
$(formId).removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(formId);
}
For Dynamically created dom
Use
$(document).on('click','#id',function(){
// do somethings
})
iam customizing a page in wordpress , i dont need the user to see this page when it loads , so i need the Sumnit this form button to be clicked automatically the moment this page loads-for security reasons-...the user doesnt need to fill anything on this form.
this is the button code:
<td colspan="2" align="center"><input name="submitBtn" type="submit"value="Submit This Form" /></td>
and this is the complete code:
[insert_php]
date_default_timezone_set('Asia/Kolkata');
$dateTime= date('Y:m:d-H:i:s');
function getDateTime() {
global $dateTime;
return $dateTime;
}
function createHash($chargetotal,$Currency) {
$storeId = "330995001";
$sharedSecret = "sharedsecret";
$dateTime= date('Y:m:d-H:i:s');
$stringToHash = $storeId . $dateTime . $chargetotal . $Currency .
$sharedSecret;
$ascii = bin2hex($stringToHash);
return sha1($ascii);
}
[/insert_php]
IPG Connect Sample for PHP(hashing)
<h1>Order Form</h1>
[insert_php]
$responseSuccessURL = "http://127.0.0.1:8006/wordpress/?page_id=27";
$responseFailURL = "http://127.0.0.1:8006/wordpress/?page_id=31";
[/insert_php]
<form action="https://test.ipg-online.com/connect/gateway/processing"
method="post"><input name="timezone" type="hidden" value="IST" />
<input name="authenticateTransaction" type="hidden" value="true" />
<table>
<tbody>
<tr>
<td>Transaction Type</td>
<td><input name="txntype" size="50" type="text" value="sale" /></td>
</tr>
<tr>
<td>Transaction Date Time</td>
<td><input name="txndatetime" size="50" type="text" value="[insert_php] echo
$dateTime; [/insert_php]" /></td>
</tr>
<tr>
<td>Calculated HASH</td>
<td><input name="hash" size="50" type="text" value="[insert_php] echo
createHash("1","356"); [/insert_php]" /></td>
</tr>
<tr>
<td>Currency</td>
<td><input name="currency" size="50" type="text" value="356" /></td>
</tr>
<tr>
<td>Payment Mode</td>
<td><input name="mode" size="50" type="text" value="payonly" /></td>
</tr>
<tr>
<td>Store Id</td>
<td><input name="storename" size="50" type="text" value="330995001" /></td>
</tr>
<tr>
<td>Chargetotal</td>
<td><input name="chargetotal" size="50" type="text" value="1" /></td>
</tr>
<tr>
<td>Shared Secret</td>
<td><input name="sharedsecret" size="50" type="text" value="sharedsecret" />
</td>
</tr>
<tr>
<td>Language</td>
<td><select name="language">
<option value="de_DE">Deutsch</option>
<option selected="selected" value="en_EN">English</option>
</select></td>
</tr>
<input type="hidden" name="responseSuccessURL" value="[insert_php] echo
$responseSuccessURL; [/insert_php]"/>
<input type="hidden" name="responseFailURL" value="[insert_php] echo
$responseFailURL; [/insert_php]"/>
<tr>
<td colspan="2" align="center"><input name="submitBtn" type="submit"
value="Submit This Form" /></td>
</tr>
<input type="hidden" name="hash_algorithm" value="SHA1"/>
</tbody>
</table>
</form>
[/insert_php]
with Javascript, you can do it like
window.onload = function() {
document.getElementById("formId").submit();
};
You can do it with JQuery like this:
<script type="text/javascript">
$(document).ready(function(){
$( "#formId" ).submit(
});
</script>
I am submitting form directly, you can click on submit button as well that will do that submit operation.
You can use trigger after document is ready,
<script type="text/javascript">
$(document).ready(function(){
$( "#foo" ).trigger( "click" );
});
</script>
Just replace the foo with your submit button ID
Suppose I have the html code below:
<FORM name="myForm" action="confirmsold.php" method="post" onsubmit="return validateFormCash()">
<table border=0 width="300" cellspacing=1 cellpadding=3 bgcolor="#353535" align="center">
<tr>
<br>
<tr>
<td bgcolor="#ffffff" colspan=2 width="30%"><b> Input Payment Details (CASH)<b></td>
</td>
</tr>
<tr>
<td bgcolor="#ffffff">Payment Type:</td>
<td bgcolor="#ffffff"><input type="text" name="paytype" value="Cash" disabled></td>
</tr>
<tr>
<td bgcolor="#ffffff">Date Sold:</td>
<td bgcolor="#ffffff"><input type="date" name="date" value="<?php echo date('Y-m-d'); ?>"></td>
</tr>
<tr>
<td bgcolor="#ffffff">Cash Amount:</td>
<td bgcolor="#ffffff"><INPUT type="TEXT" name="cashamount" size="10" maxlength="9" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"></INPUT></td>
</tr>
<td bgcolor="#ffffff" colspan=2 align="center">
<INPUT type="submit" name="submit" value="Submit">
</td>
</tr></form>
As you can see, it has a default value of "CASH". Now this will be submitted to a php page with an if statement:
if ($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['paytype'] == 'Cash') {
This is the Javascript im using for the form:
function validateFormCash() {
var x = document.forms["myForm"]["cashamount"].value;
if (x == null || x == "") {
alert("Please input Cash Amount");
return false;
}
}
But the page will return an error saying undefined paytype, what am I missing here? Anyone please help.
Thank you
Write this in if conditional:
if ($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['submit']) {
To be able to catch this $_POST, you have to put input field in form. For example:
<form action="" method="POST">
<!-- some HTML here, including <table> tag -->
<tr>
<td bgcolor="#ffffff">Payment Type:</td>
<td bgcolor="#ffffff"><input type="text" name="paytype" value="Cash"></td>
</tr><tr>
<td bgcolor="#ffffff" colspan=2 align="center">
<INPUT type="submit" name="submit" value="Submit">
</td>
</tr>
<!-- Some more HTML here, including </table> end tag -->
</form>
I'm running into a bit of trouble with the jQuery validate plugin.
I have a form with some name array checkboxes and corresponding name array radio inputs.
What I'm after is to only validate the action[] inputs when the (not required) check[] input has been checked.
$(document).ready(function(){
$("#testForm").validate({
rules: {
'action[]': {
required: function () {
return $("'check[]':checked");
}
}
}
});
});
<form id="testForm" name="testForm" method="post" action="" >
<table cellpadding="1" cellspacing="1" border="1">
<tr>
<th> </th>
<th>Include</th>
<th>Action</th>
</tr>
<tr>
<th>Row[0]:</th>
<td><input type="checkbox" name="check[0]" value="Y" /></td>
<td>
<input type="radio" name="action[0]" class="required" value="ON" />ON<br/>
<input type="radio" name="action[0]" class="required" value="OFF" />OFF<br/>
<label class="error" for="action[0]" generated="true"></label>
</td>
</tr>
<tr>
<th>Row[1]:</th>
<td><input type="checkbox" name="check[1]" value="Y" /></td>
<td>
<input type="radio" name="action[1]" class="required" value="ON" />ON<br/>
<input type="radio" name="action[1]" class="required" value="OFF" />OFF<br/>
<label class="error" for="action[1]" generated="true"></label>
</td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
I have set up a jsfiddle to hopefully explain the problem in more detail:
http://jsfiddle.net/h2dt4t30/2/
Any help or guidance would be appreciated.
Thanks in advance
You could try something like
jQuery.validator.addClassRules("action-required", {
required: function(el){
return $(el).closest('tr').find('input[name^="check"]').is(':checked')
}
});
$("#testForm").validate({});
//since snippet doesn't allow form submit
$(':button').click(function(){
console.log($("#testForm").valid())
})
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="testForm" name="testForm" method="post" action="" >
<table cellpadding="1" cellspacing="1" border="1">
<tr>
<th> </th>
<th>Include</th>
<th>Action</th>
</tr>
<tr>
<th>Row[0]:</th>
<td><input type="checkbox" name="check[0]" value="Y" /></td>
<td>
<input type="radio" name="action[0]" class="action-required" value="ON" />ON<br/>
<input type="radio" name="action[0]" class="action-required" value="OFF" />OFF<br/>
<label class="error" for="action[0]" generated="true"></label>
</td>
</tr>
<tr>
<th>Row[1]:</th>
<td><input type="checkbox" name="check[1]" value="Y" /></td>
<td>
<input type="radio" name="action[1]" class="action-required" value="ON" />ON<br/>
<input type="radio" name="action[1]" class="action-required" value="OFF" />OFF<br/>
<label class="error" for="action[1]" generated="true"></label>
</td>
</tr>
<tr>
<td colspan="3"><input type="button" value="Submit Form" /></td>
</tr>
</table>
</form>
jsfiddle seems to be down for me at the moment, so I will update the answer as soon as it's back online
The validation plugin provides the depends option.
Please try like this:
$("#testForm").validate({
rules: {
'action[]': {
depends: function () {
return $("check[]").is(":checked"); //here you need to target the needed checkbox, not all of them
}
}
}
});
I'm trying to build an application using php. in "stock_out.php", i wanna create a form that include two barcodes. I have 8 fields. (1)Effectivedate,(2)Partnumber,(3)Description1,(4)Description2,(5)NPK,(6)Nama,(7)QtyOut,(8)Reason. I wanna using barcode-reader in "Partnumber" and "NPK".
I have some problems:
1. When i press enter, it's respon for button submit.
2. Actually, when i press enter in Partnumber, i want show details data in "description1" and "description2". As well as in NPK, i want show details data in "nama"
3. In the end of form, i still want to submit this form into database.
I'm newbie in AJAX, so i still don't know how to implementation AJAX in PHP. This is my code, I am grateful for the help
<html><body>
<div id="outerContainer">
<?php include("headerFile.html"); ?>
<?php include("navigationFile.html"); ?>
<div id="bodyContainer">
<div id="pageBodyTitle"> Stock Out </div> <br>
<form id="formSearch" name="formSearch" method="post" action="proses_out.php" onSubmit="return cek_data();">
<table id="messageTable">
<tr>
<td class="heading"> Effective Date </td>
<td>
<input class="inputField" name="tgl" type="text" readonly value="<?php echo $_POST['tgl']?>" tabindex="1"/>
<script language='JavaScript'>new tcal ({'formname': 'formSearch','controlname': 'tgl'});</script>
</td>
</tr>
<tr>
<td class="heading"> Part Number </td>
<td><input type='text' name='txtItem' id='txtItem' size="20" class="inputField" value='<?php echo $item;?>' tabindex="2" />
<img src='search.ico' onClick='open_win_item()'> </td>
</tr>
<tr>
<td class="heading">Description1</td>
<td><input type='text' name='txtDesc1' id='txtDesc1' size="50" value='<?php echo $desc1;?>' readonly /></td>
</tr>
<tr>
<td class="heading">Description2</td>
<td><input type='text' name='txtDesc2' id='txtDesc2' size="50" value='<?php echo $desc2;?>' readonly /></td>
</tr>
<tr>
<td class="heading"> NPK </td>
<td><input type='text' name='txtNpk' id='txtNpk' size="20" maxlength="5" class="inputField" value='<?php echo $tr_no;?>' tabindex="3" />
<img src='search.ico' onClick='open_win_npk()'></td>
</tr>
<tr>
<td class="heading">Nama</td>
<td><input type='text' name='txtName' id='txtName' size="30" value='<?php echo $nama;?>' readonly /></td>
</tr>
<tr>
<td class="heading"> Qty Out </td>
<td><input type='text' name='txtQty' id='txtQty' size="5" class="inputField" tabindex="4"/></td>
</tr>
<tr>
<td class="heading"> Reason </td>
<td><select class="inputField" name="choose" id="choose" value="" tabindex="5">
<?php
include "/class/connect_SQL.class.php";
$sql = "select reason_code from Inv_reason_master";
$query = mssql_query($sql);
while ($row = mssql_fetch_array($query))
{
$coba = $row['reason_code'];
?>
<option value="<?php echo $coba; ?>"><?php echo $coba;?></option>
<?php
}
?>
</select></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="Submit" value="Save" class="formButton2" tabindex="6"/>
<input type="reset" name="reset" value="Cancel" class="formButton2" tabindex="7"/>
</td>
</tr>
</table>
</form>
</div>
<?php
if(isset($_GET["message"]) and $_GET["message"]='save')
{
echo "<script language=\"javascript\"> alert('Data Tersimpan!') </script>";
}
?>
<?php include("footerFile.html"); ?>
</div>
You will have to prevent the response of the "Enter"-key. If you are using jquery in your project you can prevent it with this code:
$(function() {
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) return false;
});
});
To bind Enter key to "Part number" field instead you could try this:
$('#txtItem').keypress(function(e) {
if (e.keyCode == 13) {
alert('Enter is pressed in part number');
}
});