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
})
Related
iam trying to update image through on change event in codeigniter
and want to update with different id each time when i select the image different. please help with the solution thanks in advance
Each time the product_image_id should change according to db table
$(document).ready(function(){
$('.images').on('change',function(){
var link = '<?php echo site_url('menu_management_con/editimage');?>';
var product_image_id = $('.id').val();
var formData= new FormData();
var file = this.files[0];
formData.append('file', file);
formData.append('product_image_id',product_image_id);
$.ajax({
type:'POST',
url: link,
data : formData,
cache: false,
processData:false,
contentType:false,
success:function(data){
alert(data);
}
});
});
});
this is my html code
am trying to update image through on change event in codeigniter
<form id="add_produc" method="post" class="addProduct" name="add_produc" action="<?=base_url()."menu/product_edit/".$data['product_id'].'/'.$data['category_id'] ?>" enctype="multipart/form-data" >
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
<tr>
<th class="head" colspan="2">Edit</th>
</tr>
<tr>
<td><label for="Name">Name:</label></td>
<td>
<input type="text" name="product_name" value="<?= $data['product_name']?>" id="product_name" class="form-control" placeholder="Name">
</td>
</tr>
<tr>
<td> <label for="Description">Description:</label> </td>
<td>
<input type="text" name="product_description" value="<?= $data['product_description']?>" id="product_description" class="form-control" placeholder="description">
</td>
</tr>
<tr >
<td><label for="Photo">Photo:</label> </td>
<td>
<div id="addField0">
<input type="file" name="product_photo[]" multiple id="product_photo" class="form-control" accept="image/*"><br>
</div>
<button id="add-more-edit" name="add-more-edit" class="btn btn-primary">Add More</button>
</td>
</tr>
<?php
if(!empty($image)){
foreach ($image as $result){
?>
<tr class='imagelocation<?= $result->product_image_id ?>'>
<td colspan="2" align='center'>
<input type="text" name="product_image_id" value="<?= $result->product_image_id?>" id="product_photo" class="form-control id" >
<input type="file" name="image" id="image" class="form-control images" accept="image/*">
<img class='img-rounded' height="50" width="50" src="<?= base_url('/assets/uploads/products/'.$result->product_photo)?>" style="vertical-align: middle;">
<span style="cursor:pointer;" onclick="javascript:deleteimage(<?php echo $result->product_image_id ?>)">X</span>
</td>
</tr>
<?php
}
}else{
echo '<div class="empty">No Products Found...!</div>';
}
?>
<tr>
<td colspan="2">
<input type="hidden" name="sub_category_id" value="<?= $data['sub_category_id']?>" id="sub_category_name" class="form-control">
<input type="submit" name="update_product" id="update_product" class="btn btn-info btn-small" value="Update">
</td>
</tr>
</table>
</div>
</div>
</form>
I would call a javascript-Function on a Remote-Server via Curl + PHP. The Submit-Button is a div-Element and call a function in by 'onclick'.
Steps of Scraper:
1. Login
2. Save session
3. Call a secure-link with session
Question: How to submit a form for Javascript "onclick" via curl?
I would implement a PHP-Scraper for following form:
<script language="JavaScript" type="text/javascript">
function logon() {
if(document.forms['form1'].elements["USERNAME"].value==""){
alert('foo');
document.forms['form1'].elements["USERNAME"].focus();
return paxReturn(false);
}
if(document.forms['form1'].elements["PASSWORD"].value==""){
alert('foo');
document.forms['form1'].elements["PASSWORD"].focus();
return paxReturn(false);
}
if (mywindow!=null) {
showObjectWithSrvlt('paxInfo','LoginServlet');
}
if((mywindow==null)||(mywindow.closed)) {
var prm ='toolbar=no,titlebar=no,directories=no,menubar=no,resizable=yes,scrollbars=yes,width=900,height=600,top=0,left=0';
mywindow = window.open("",'bar',prm);
}
document.forms['form1'].target = 'bar';
try{
mywindow.resizeTo(screen.width,screen.height);
}catch(e) {}
document.forms['form1'].submit();
try{
mywindow.focus();
}catch(e) {}
document.forms['form1'].elements["USERNAME"].value="";
document.forms['form1'].elements["PASSWORD"].value="";
/* grecaptcha.reset(); */
}
</script>
<form name="form1" method="post" target="foo" action="foo.jsp">
<input class="FormText" type="hidden" name="clickedButton" id="clickedButton" value="">
<input class="FormText" type="hidden" name="paxInfo" id="paxInfo" value="">
<div class="col-lg-10 col-md-12">
<div class="card mask">
<br>
<br>
<table class="login-table-list">
<tbody><tr>
<td><div align="right">Username: </div></td>
<td><input type="text" name="USERNAME" value="" maxlength=" 20" size=" 18" class="InputText " id="USERNAME" autocomplete="OFF"></td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td><div align="right">Password: </div></td>
<td><b><input class="InputText" type="password" name="PASSWORD" size="18" value="" onkeypress="javascript:return login(event);" autocomplete="off"></b></td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td></td>
<td>
<div style="width:27%; float:left;" class="stdbtnnrmWithFrameNoImage login-btn" onclick="javascript: if (disableButtonContent(this,false)) { logon() } ">
Login
</div>
</td>
</tr>
</tbody></table>
<br>
<br>
</div>
</div>
</form>
Thanks in advance for your help!
i am new in php and i am programming a simple form file that is included in a php webpage.
this is the main page
makepedido.php
<!--Informacion Personal-->
<?php include 'personalinformation.php'; ?>
personalinformation.php
<form action="scripts.php" method="post" name="personalinfo" class="form" id="personalinfo">
<table width="100%" class="tableform">
<tr>
<td>Nombre</td>
<td><input name="Nombre" type="text"></td>
</tr>
<tr>
<td>Apellido</td>
<td><input name="Apellido" type="text" ></td>
</tr>
<tr>
<td>Direccion 1</td>
<td><input name="Direccion1" type="text" ></td>
</tr>
<tr>
<td>Direccion 2</td>
<td><input name="Direccion2" type="text" ></td>
</tr>
<tr>
<td>Ciudad</td>
<td><input name="Ciudad" type="text" ></td>
</tr>
<tr>
<td>Pais</td>
<td><input name="Pais" type="text" ></td>
</tr>
<tr>
<td>Numero de Telefono</td>
<td><input name="NumerodeTelefono" type="text" required></td>
</tr>
<tr>
<td>Correo Electronico</td>
<td><input name="CorreoElectronico" type="text" required></td>
</tr>
</table>
<br />
<br />
<input value="Crear Pedido" type="submit" class="btn btn-default"> <br />
</form>
scripts.php
<?php
$email = $_POST["CorreoElectronico"];
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
{
echo "Correo invalido intente de nuevo";
die;
}
?>
now i just want to know how to put in personalinformation.php the error returned by scripts.php, when i click the submit button, the browser goes to script.php and show the error msg.
i want it to stay in makepedido.php and show the error msg from the personalinformation.php form returned by scripts.php
You should use ajax to submit the form and get the error to the same page, like this:
$("#formID").submit(function() {
var url = "path/to/your/scripts.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
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');
}
});
::EXPLINATION::
In an HTML file, I'm attempting to load a registration frame with a captcha check. The form itself shows up. The captcha does not. So I know that the javascript (posted below) gets what I want it to get. But there's something wrong that is keeping my captcha from showing up.
Just as a final note, I'm targetting a div with the id "splashTarget" I use CSS to arrange everything how I want it. I'm not going to post that because its probably not relevant, but if you think I do need to post it to get help let me know.
::CODE::
The form that doesn't seem to work:
<div class="splash"> </div>
<div style="text-align:left" id="registrationSplash" class="splashContent">
<div style="text-align:right">
<a style="color:darkred" href="javascript:closeSplash()">[ CANCEL ]</a>
</div>
<h1>REGISTER</h1>
<form action="" method="post" id="registerForm">
<?PHP
require_once('recaptchalib.php');
$publickey = "[censored]";
echo recaptcha_get_html($publickey);
echo '<!--'.recaptcha_get_html($publickey).'-->';
?>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstname" maxlength="60"></td>
<td>Username:</td>
<td><input type="text" name="username" maxlength="30"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastname" maxlength="60"></td>
<td>Password:</td>
<td><input type="password" name="pass" maxlength="30"></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input type="text" name="firstname" maxlength="60"></td>
<td>Confirm Password:</td>
<td><input type="password" name="pass2" maxlength="30"></td>
</tr>
<tr>
<th colspan=4 style="text-align:right">
<button onclick="submitFormRegisterSplash()" type="button" name="submit" value="Login">Register!</button>
</th>
</tr>
</table>
</form>
<div id="status" />
</div>
The actual call to recaptia.
<?PHP
require_once('recaptchalib.php');
$publickey = "[censored]";
echo recaptcha_get_html($publickey);
echo '<!--'.recaptcha_get_html($publickey).'-->';
?>
Javascript Function used to load Register form:
function onRegisterClicked() {
var onRegisterClickedHttp;
if(window.XMLHttpRequest) {
onRegisterClickedHttp = new XMLHttpRequest();
onRegisterClickedHttp.onreadystatechange = function() {
if(onRegisterClickedHttp.readyState==4 && onRegisterClickedHttp.status==200) {
var response = onRegisterClickedHttp.responseText;
document.getElementById("splashTarget").innerHTML = response;
}
}
}
onRegisterClickedHttp.open("GET", "Verification/RegisterSplash.php", true);
onRegisterClickedHttp.send();
}
Result on Webpage after calls to create
<div id="splashTarget">
<div class="splash"> </div>
<div style="text-align:left" id="registrationSplash" class="splashContent">
<div style="text-align:right">
<a style="color:darkred" href="javascript:closeSplash()">[ CANCEL ]</a>
</div>
<h1>REGISTER</h1>
<form action="" method="post" id="registerForm">
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript><!--<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>--> <table>
<tbody><tr>
<td>First Name:</td>
<td><input type="text" name="firstname" maxlength="60"></td>
<td>Username:</td>
<td><input type="text" name="username" maxlength="30"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastname" maxlength="60"></td>
<td>Password:</td>
<td><input type="password" name="pass" maxlength="30"></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input type="text" name="firstname" maxlength="60"></td>
<td>Confirm Password:</td>
<td><input type="password" name="pass2" maxlength="30"></td>
</tr>
<tr>
<th colspan="4" style="text-align:right">
<button onclick="submitFormRegisterSplash()" type="button" name="submit" value="Login">Register!</button>
</th>
</tr>
</tbody></table>
</form>
<div id="status">
</div>
</div></div>
The Website in action is gumonshoe dot net slash Registration
You'll need to choose to try to register to see the pop up. I disabled the CSS that created the splash screen thinking that it might have been an issue with z-indexes. That doesn't appear to be the case.
Thanks for any tips.
The form HTML DOES work (see http://jsfiddle.net/5p5K3/). The error is caused by a feature:
<script> tags which are injected using .innerHTML = .... <script> are not parsed (functions and variables inside these tags are not defined, nor called). You have to include the CAPTCHA code inside the page, instead of adding it using AJAX.
EDIT
Add this HTML code (inside the <head> block):
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
Overwrite your function by my suggestion (replace <PUBLIC kEY HERE> by your public key):
function onRegisterClicked() {
Recaptcha.create("<PUBLIC KEY HERE>", "splashTarget", {
theme: "red",
callback: Recaptcha.focus_response_field
});
}
Obvious problem: The inserted recaptcha code is commented out with <!-- -->. Commented-out html/js is NOT going to be rendered/executed. Change
echo '<!--'.recaptcha_get_html($publickey).'-->';
to
echo recaptcha_get_html($publickey);