Form Error Handleing in include file PHP - php

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.
});

Related

Is it possible to use post and get function in one php form?

<html>
<body>
<div class="content">
<fieldset>
<div>
<h1>Student Details</h1>
</div>
<form method="">
<table>
<tr>
<td><label>Student ID:</label></td>
<td><input type="text" name="StuID"></td>
<td><input type="submit" name="find" value="Find"></td>
</tr>
<tr><td></td></tr>
<tr>
<td><label>Student IC:</label></td>
<td><input type="text" name="StuIC"></td>
</tr>
<tr>
<td><label>School ID:</label></td>
<td><input type="text" name="SchID"></td>
</tr>
<tr>
<td><label>Student Name:</label></td>
<td><input type="text" name="StuNAME"></td>
</tr>
<tr>
<tr>
<td><label>Gender:</label></td>
<td>
<select name="Gender">
<option>--Gender--</option>
<option>Male</option>
<option>Female</option>
</select>
</td>
</tr>
<tr>
<td><label>Nationality:</label></td>
<td><input type="text" name="Nationality"></td>
</tr>
<tr>
<td><label>Race:</label></td>
<td>
<select name="Race">
<option>--Race--</option>
<option>Malay</option>
<option>Indian</option>
<option>Chinese</option>
<option>Other</option>
</select>
</td>
</tr>
<tr>
<td><label>Religion:</label></td>
<td>
<select name="Religion">
<option>--Religion--</option>
<option>Muslim</option>
<option>Buddist</option>
<option>Hindu</option>
<option>Christian</option>
<option>Other</option>
</select>
</td>
</tr>
<tr>
<td><label>Telephone Number:</label></td>
<td><input type="text" name="TelNo"></td>
</tr>
</tr>
<tr>
<td><input type="submit" name="add" value="Add"></td>
<td><input type="submit" name="update" value="Update"></td>
<td><input type="submit" name="delete" value="Delete"></td>
</tr>
</table>
</form>
</fieldset>
</div>
</body>
</html>
This is my form, the user can find the data by insert the ID and click "Find" and the data will display in the form. With the same form, user can update the data with just change data in the form and click "Update" and the data will update in database.
Is it possible for me to build a form that can do Insert, Update and Delete using just one php form.
You can create one form, and with JS/jQuery (or any other lib) submit that form via Ajax depending on button clicked:
<form id="my-form">
...
<tr>
<td><label>Student ID:</label></td>
<td><input type="text" name="StuID" id="stu-id"></td>
<td><input type="submit" name="find" value="Find" onClick="sendPost()"></td>
</tr>
<tr>
<td><input type="button" name="add" value="Add" onClick="sendPost()"></td>
<td><input type="button" name="update" value="Update" onClick="sendPut()"></td>
<td><input type="button" name="delete" value="Delete" onClick="sendDelete()"></td>
</tr>
</form>
function sendFind() {
$.ajax({
url: 'example.com/my-action?StuID=' + $('#stu-id').val(),
method: 'GET',
success: function () {}
...
});
}
function sendPut() {
$.ajax({
url: 'example.com/my-action',
method: 'PUT',
dataType: 'json',
data: $("#my-form").serialize(),
success: function () {}
...
});
}
function sendDelete() {
$.ajax({
url: 'example.com/my-action',
method: 'DELETE',
dataType: 'json',
data: $("#my-form").serialize(),
success: function () {}
...
});
}
As you can see there even can be same URL and act differently depending on request type.
Its not possible though you can use $_REQUEST in php to get any posted data whether with POST or GET.
For your case you can name your input type submit with different names then check in your php
<?php
if(isset($_POST['insert'])){ //insert functionality }
if(isset($_POST['update'])){ //update functionality }
if(isset($_POST['delete'])){ //delete functionality }
?>

neither required nor pattern is working in html

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>&nbsp&nbsp</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
})

how to use jquery ajax array post json?

i want to send array in ajax json post ,but some code are error.how to fig this code?
HTML
<table width="200" border="1">
<tr>
<td>table</td>
<td>
<input name="table[]" type="text" id="table[]" value="5" />
</td>
</tr>
<tr>
<td>menu</td>
<td><input name="menu[]" type="text" id="menu[]" value="noodle" /></td>
</tr>
<tr>
<td>number</td>
<td><input name="number[]" type="text" id="number[]" value="1" /></td>
</tr>
<tr>
<td>note</td>
<td><input name="note[]" type="text" id="note[]" value="no " /></td>
</tr>
<tr>
<td>table</td>
<td><input name="table[]" type="text" id="table[]" value="1" /></td>
</tr>
<tr>
<td>menu</td>
<td><input name="menu[]" type="text" id="menu[]" value="beer" /></td>
</tr>
<tr>
<td>number</td>
<td><input name="number[]" type="text" id="number[]" value="2" /></td>
</tr>
<tr>
<td>note</td>
<td><input name="note[]" type="text" id="note[]" value="-" /></td>
</tr>
</table>
<button id="save-menu">save</button>
<button id="calculator">calculator</button>
Jquery : if I click button save-menu it send some data to menu/order or I click button calculator it send some data to calculator page. But not my jquery code not send all value in array ,how to fig this code? Help me please.Thank you.
<script>
$(document).ready(function(){
$('#save-menu').click(function() {
$.post('menu/order', {
table : $('select#workplace-table').val(),
'mid[]' : $('input#order-mid').val(),
'number[]' : $('input#order-number').val(),
'note[]' : $('input#order-note').val(),
});
$('#calculator').click(function() {
$.post('menu/calculator, {
table : $('select#workplace-table').val(),
'mid[]' : $('input#order-mid').val(),
'number[]' : $('input#order-number').val(),
});
});
</script>
Don't use if(clickHandler) style syntax, that will never trigger when you want it to, instead just define the click handler:
$('#save-menu').click(function() {
//do stuff on save-menu click
})
It's the way you have the click events set up that are causing you your problems.
It should look more like this:
$('#save-menu').click(function() {
$.post(... ajax stuff...);
});
Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
$( "#save-menu" ).click(function() {
//Handler for .click() called.
$.post('menu/order',{...});
});
$( "#calculator" ).click(function() {
//Handler for .click() called.
$.post('menu/calculator',{...});
});

Chained Selects with Jquery Ajax

I new to programming, and have just finished the jquery course on CodeAcademy.I'm currently trying to create a chained select using Jquery's AJAX function to call a php page which runs a query on my database and echoes it out to my main html page.
Currently, I am able to load only my first , the second and third selects do not seem to be working, and i do not know what exactly it is that i'm doing wrong.
Jquery Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#category").load("AddItemCat.php");
});
$("#category").onchange(function(){
var category=$("#category").val();
$("#subcat").load("AddItemSubCat.php?category="+category);
});
$("#subcat").onchange(function(){
var category=$("#category").val();
var subcat=$("#subcat").val();
$("#subcat").load("AddItemSubCat.php?category="+category+"&subcat="+subcat);
});
My HTML Form:
<form action="<?PHP echo $_SERVER['PHP_SELF'] ?>" name="edititem" enctype="multipart/form-data" method="POST">
<table border='1'>
<tr>
<td colspan="3">
Category:
<select name="category" id="category" ></select>
SubCategory:
<select id="subcat" name="subcat"></select>
Item:
<select id="item" name="item"></select>
</td>
</tr>
<tr>
<td>Item Name</td>
<td><input type="text" name="itemname" size="30" maxlength="50" required="required"></td>
</tr>
<tr>
<td>Item Price</td>
<td><input type="number" name="itemprice" size="30" min="1" required="required"></td>
</tr>
<tr>
<td>Item Info</td>
<td><textarea name="iteminfo" col="40" rows="10" maxlength="300" required="required"></textarea>
</tr>
<tr>
<td>Filename:</td>
<td><input type="file" name="upload[]" /></td>
</tr>
<tr>
<td>Filename:</td>
<td><input type="file" name="upload[]" /></td>
</tr>
<tr>
<td>Filename:</td>
<td><input type="file" name="upload[]" /></td>
</tr>
<tr>
<td>Filename:</td>
<td><input type="file" name="upload[]" /></td>
</tr>
<tr>
<td>Filename:</td>
<td><input type="file" name="upload[]" /></td>
</tr>
<tr>
<td colspan="2"><input type="SUBMIT" name="Button" value="Submit"></td>
</tr>
<tr>
<td colspan="2"><?PHP if(isset($errormsg)){echo"$errormsg";}?></td>
</tr>
<tr>
<td colspan="3"><font color="#FF0000"></font></td>
</tr>
I would really appreciate it if someone could point out my mistake and give me pointers on rectifying it.Thanks!
Way to much code to help you but since you say that the jQuery part does not work:
$("#category").onchange(function(){
This should be
("#category").on("change", function(){
There is no onchange in jQuery 1.10 (or any other version?). A brief look into the console would have shown you the error I guess. Additionally, you shoud put all your other calls inside $(document).ready as well.
try use page url instead of file name. e.g - url to AddItemSubCat.php

Need some resoultion. Javascript function not being called in click event in jquery

I am trying to call my function named isUrgencyTypeValid from my javascript code but it is not working. Please check what is the problem in my code.
Alert should get displayed which is not being displayed
My javascript function is not being called.
HTML Code
<td colspan="2" align="center"><input id="btnSubmit" type="submit" value="submit" runat="server"/></td></tr>
jQuery Call function
$("#btnSubmit").bind("click",function(){
alert(); // this is running
isUrgencyTypeValid();
});
javascript implemented function
function isUrgencyTypeValid()
{
alert("asd");
var i=0;
for(i=0;i<$("radio[name='urgencyType']").length;i++)
{
if($("radio[name='urgencyType']")[i].checked)
{
alert($("radio[name='urgencyType']")[i].value);
return true;
}
return false;
}
More description about my form is here
<form runat="server" name="myPage">
<table style="width: 100%;" cellpadding="5" cellspacing="5">
<caption>
Computer Support / Service Request
</caption>
<tr><td>First Name</td>
<td><input id="txtFirstName" type="text" value="First Name" runat="server"/><span class="error"></span></td></tr>
<tr>
<td>Last Name</td>
<td><input id="txtLastName" type="text" value="Last Name" runat="server"/><span class="error"></span></td></tr>
<tr>
<td>Email Address</td>
<td><input id="txtEmailAddress" type="text" value="Email Address" runat="server"/><span class="error"></span></td></tr>
<tr>
<td>Phone No</td>
<td><input id="txtPhoneNo" type="text" value="Phone No" runat="server" /><span class="error"></span></td></tr>
<tr>
<td>Do you have text messaging</td>
<td>
<span>Yes</span><input id="rdoYes" value="Yes" type="radio" runat="server"/>
<span>No</span><input id="rdoNo" value="No" type="radio" runat="server"/><span class="error"></span>
</td></tr>
<tr>
<td>Description of request*: </td>
<td><textarea id="txtDescription" cols="50" rows="10" runat="server"></textarea><span class="error"></span><span id="lengthCount"></span></td></tr>
<tr>
<td>Urgency of this support request:</td>
<td>
<input id="rdoAnyTime" name="urgencyType" value="Anytime" type="radio" runat="server"/><span>Anytime</span><br />
<input id="rdoCplDays" name="urgencyType" value="In the next couple of days" type="radio" runat="server"/><span>In the next couple of days</span><br />
<input id="rdoToday" name="urgencyType" value="Today" type="radio" runat="server"/><span>Today</span><br />
<input id="rdoUrgent" name="urgencyType" value="This is extremely urgent...I cannot wait!" type="radio" runat="server"/><span>This is extremely urgent...I cannot wait!</span><br />
<input id="rdoTalkSometime" name="urgencyType" value="Please contact me and we'll talk about it" type="radio" runat="server"/><span>Please contact me and we'll talk about it</span><br /><span class="error"></span>
</td></tr>
<tr>
<td colspan="2" align="center">Captcha To Be implemented.</td></tr>
<tr>
<td></td>
<td><input id="chkRequestCopy" type="checkbox" runat="server"/>Please send me a copy of this service request</td></tr>
<tr>
<td colspan="2" align="center"><input id="btnSubmit" type="submit" value="submit" runat="server"/></td></tr>
</table>
</form>
I copied your code and ran into the same issue. Then I looked at it closer and noticed you are missing a closing bracket in your isUrgencyTypeValid() function. The closing bracket for your for loop is missing. Firefox Error Console will also show this.
Once I added the bracket the alert worked fine.
function isUrgencyTypeValid()
{
alert("asd");
var i=0;
for(i=0;i<$("radio[name='urgencyType']").length;i++)
{
if($("radio[name='urgencyType']")[i].checked)
{
alert($("radio[name='urgencyType']")[i].value);
return true;
}
} //this was missing
return false;
}
Your radio selector is incorrect.
There's not such thing as a radio element, but there is a :radio pseudo-class selector.
Your code should read:
function isUrgencyTypeValid()
{
alert("asd");
var i=0;
for(i=0;i<$("input[name='urgencyType']:radio").length;i++)
{
if($("input[name='urgencyType']:radio")[i].checked)
{
alert($("input[name='urgencyType']:radio")[i].value);
return true;
}
return false;
}
** EDIT **
In addition to the changes above, since the alert never occurs, this indicates that isUrgencyTypeValid is not being called.
The most likely explanation is that you're not waiting until the DOM is loaded, before you bind the your handler to the click event of the button. You should have some code somewhere that looks like this:
$(function()
{
/*
* ... other code ...
*/
$("#btnSubmit").bind("click",function(){
isUrgencyTypeValid();
});
/*
* ... other code ...
*/
}

Categories