I am using jQuery/Ajax to submit a form but when I submit it BUT it's return empty value in .php page. I think the jQuery serialize() is not getting the data from the FORM. can you please fix it why it's not working ?
Here is my html code :
<form id="phone_form">
<table width="290" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:0px;" id="phoneWraper">
<tr>
<td colspan="2"><div id="phone_success"></div></td>
</tr>
<tr><td>Phone ( + )</td><td> </td></tr>
<tr>
<td align="right">Work :</td>
<td align="right"><input value="<?php echo $work_phone; ?>" type="text" name="work_phone" id="work_phone" placeholder="work phone"/></td>
</tr>
<tr>
<td align="right">Mobile :</td>
<td align="right"><input value="<?php echo $mobile_phone; ?>" type="text" name="mobile_phone" id="mobile_phone" placeholder="mobile phone"/></td>
</tr>
</table>
<table width="290" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:0px;">
<tr>
<td colspan="2" align="right"><input type="submit" class="search_submit" value="Save" id="phone_form_submit"></td>
</tr>
</table>
</form>
Here is my JS code :
$("#phone_form_submit").on('click', function(event){
event.preventDefault();
$.ajax({
type : 'post',
url : 'save_phone.php',
data : $("#phone_form").serialize(),
dataType : 'html',
success : function(result){
alert(result);
}
});
});
Thank You.
In firebug I see this :
Related
How can i get specific input values of each row when i click the button using ajax javascript. here is my code
here is my example of getting the data from database dynamically with input fields and button individually
<div style="width:100%; min-height:275px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablelist">
<form action="" method="get" name="formwebservice">
<tr>
<td colspan="3">
<div class="pgLoading">
<table style="border:1px solid #FF00A6; border-top:none;" class="tablelisttable"
border="0" cellspacing="0" cellpadding="0">
<tr class="tablelisttr">
<td>Branch ID</td>
<td>Branch Code</td>
<td>Branch Name</td>
<td>Last Sync Date</td>
<td>Start Date</td>
<td>End Date</td>
<td>Synchronization</td>
<td></td>
</tr>
<?php
$query_branch="SELECT * FROM Branch";
$query_branch_result=mysqli_query($con,$query_branch) or die(mysqli_error($con));
while ($row = mysqli_fetch_assoc($query_branch_result)) {
echo "<tr class='listtr' align='center'>
<td>".$row['BranchID']."</td>
<td>".$row['BranchCode']."</td>
<td>".$row['BranchName']."</td>
<td>2018-04-14 05:39:57</td>
<td><input type='text' name='startdate'> </td>
<td><input type='text' name='enddate'></td>
<td><input type='button' name='sync' value='Synchronize'></td>
<td>0/0</td>
</tr>";
}
?>
</table>
</div>
</td>
</tr>
</form>
</table>
</div>
index.js
$(function(){
$('[name=sync]').click(function(){
$.ajax({
type : "get",
data : $('[name=formwebservice]').serialize(),
url : "save.php",
success : function(data){
$('.loader').html(' ');
$('.pgLoading').html(data).hide().fadeIn('slow');
},
beforeSend : function(){
$('.loader').html('Loading... Please wait...').hide().fadeIn();
}
});
}); });
save.php
if(isset($_GET['startdate']) && isset($_GET['enddate'])) {
$StartDate=$_GET['startdate'];
$EndDate=$_GET['enddate'];
echo $StartDate;
echo $EndDate;
}else{
echo "NO DATA INPUT";
}
my problem is the $_GET['startdate'] and $_GET['enddate'] is not set so im always getting no data input.
I want to show error message in directed page if error part is fire in my ajax.but when it goes to this directed page it not show error message if i refresh this page it shows error message.below is my code.
index.html
<form method="post" name="myForm" action="tracking.php">
<input type="text" name="number" id="number" placeholder="Enter LR Number" required>
<input type="submit" name="submit" value="Go">
</form>
tracking.php
<script>
$(document).ready(function () {
var from = "";
$('#loadings').show();
$.ajax({
type: "GET",
url: 'http://apis.abc.abc/api/Get_Loadsheet_Details/<?php echo $number; ?>',
dataType: 'json',
success: function (response) {
$('#loadings').hide();
console.log(response);
document.getElementById('lrid').innerHTML = "LR NO: " + response[0].LRSUFIX + response[0].LR_NO;
document.getElementById('consign').innerHTML = response[0].COMPANY_NAME;
document.getElementById('from').innerHTML = response[0].LOADFROMMST;
document.getElementById('dest').innerHTML = response[0].DESTINATION;
document.getElementById('case').innerHTML = response[0].NO_OF_PKT;
document.getElementById('lrsta').innerHTML = response[0].LR_STATUS;
document.getElementById('lr').innerHTML = response[0].lrLoadStatus;
document.getElementById('vecno').innerHTML = response[0].VEHICLE_NO;
document.getElementById('lrstatus').innerHTML = response[0].LOADIG_STATUS;
document.getElementById('ldate').innerHTML = response[0].DATE;
}, error: function (errors) {
console.log(errors);//alert('hi');
$('#loadings').hide();
$('#error').html("<h2><span style='color:red;'>No data found on this LR No.</span></h2>");
}
});
});
</script>
<section>
<div id="error"></div>
<div class="loader-div" style="position:relative;" ><img id="loadings" src="images/loading2.gif" style=" left: 40%;
position: absolute;
top:250px;
z-index:1111;"></div>
<div class="container" >
<div class="body_left" id="container">
<h1 class="heading_3">Tracking Details</h1>
<table width="100%" class="track">
<tr>
<th >Order Information</th>
<th id="lrid"></th>
</tr>
<tr>
<td>Consignee</td>
<td id="consign"> </td>
</tr>
<tr>
<td>From</td>
<td id="from"></td>
</tr>
<tr>
<td>Destination</td>
<td id="dest"> </td>
</tr>
<tr>
<td>Cases</td>
<td id="case"> </td>
</tr>
<tr>
<td>LR Status</td>
<td id="lrsta"></td>
</tr>
<tr>
<td>LR</td>
<td id="lr"></td>
</tr>
</table>
<br>
<br>
<table width="100%" class="track">
<tr>
<th colspan="2">Load Information</th>
</tr>
<tr>
<td>VEHICLE NUMBER: </td>
<td id="vecno"></td>
</tr>
<tr>
<td>LOAD STATUS </td>
<td id="lrstatus"> </td>
</tr>
<tr>
<td>LOAD DATE:</td>
<td id="ldate"> </td>
</tr>
</table>
</div>
</div>
</section>
Try to put your Script code underneath HTML codes. Because Jquery can't find the selector "#error" before html get loaded.
Just make a try.
I am developing a code, which takes a value as input and the form when submitted, displays the result and the code is as follows:
<script>
function submitme()
{
document.forms["myform"].submit();
}
</script>
<body onload="submitme()">
<FORM name="performance" id="myform" method="post" action="http://www.pvpsiddhartha.ac.in/index.sit" >
<INPUT type="hidden" name="service" value="STU_PERFORMANCE_MARKS_DISPLAY">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2" align="center"><STRONG><U>Student Marks Performance Display Form</U></STRONG></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right" width="40%">Regd. No:</TD>
<TD><INPUT type="text" name="stid" value="<?php echo $_GET['x']; ?>"></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right"><INPUT type="submit" name="submit" value="Submit"></TD>
<TD align="center"><INPUT type="reset" value="Clear"></TD>
</TR>
</TABLE>
</FORM>
</body>
The problem is, when the page is loaded completely, the form should be submitted , but the form cannot be submitted. What is the problem , Help me!! Thanks in advance
Try this pure javascript,
<body>
<FORM name="performance" id="myform" method="post" action="http://www.pvpsiddhartha.ac.in/index.sit" >
<INPUT type="hidden" name="service" value="STU_PERFORMANCE_MARKS_DISPLAY">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2" align="center"><STRONG><U>Student Marks Performance Display Form</U></STRONG></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right" width="40%">Regd. No:</TD>
<TD><INPUT type="text" name="stid" value=""></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right"><INPUT type="submit" name="submit_button" value="Submit"></TD>
<TD align="center"><INPUT type="reset" value="Clear"></TD>
</TR>
</TABLE>
</FORM>
<script>
window.onload = function(){
document.getElementById('myform').submit();
};
</script>
To access this document.getElementById('myform').submit(), you should change <INPUT type="submit" name="submit" value="Submit"> to <INPUT type="submit" name="submit_button" value="Submit">. Don't use other element with name of submit or id.
And also the better one is,
<script>
window.ready = function(){
document.getElementById('myform').submit();
};
</script>
It should help:
$(document).ready(function () {
$('#myform').trigger('submit'); });
Still I don't get what is the point of submitting the form after page loads.
try
<script>
function submitme()
{
document.forms["performance"].submit();
}
</script>
or
<script>
function submitme()
{
document.forms[0].submit();
}
</script>
I have a form, and I have some jquery code to override the submit process. But it's not working and there are no errors. I have simplified the sample code, hope I made no typos.
Does anyone know what is wrong with the code? It doesn't come to the point where I get the alert(). The click() event works fine.
I tried setting an id to the form. still nothing.
Using jquery-1.4.2.min.js
<form name="checkout_shipping" action="checkout.php" method="post">
<div class="contentText">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 0); document.checkout_shipping.submit();">
<td width="75%" style="padding-left: 15px;">Flat price</td>
<td>$8.00</td>
<td align="right"><input type="radio" name="shipping" value="flat_flat" onclick="this.form.submit();" /></td>
</tr>
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 1); document.checkout_shipping.submit();">
<td>Pick-up</td>
<td>$0.00</td>
<td align="right"><input type="radio" name="shipping" value="pickup_pickup" checked="checked" onclick="this.form.submit();" /></td>
</tr>
</table>
</div>
</form>
<script>
$('form[name=checkout_shipping]').submit(function(e) {
e.preventDefault();
alert('Houston we have contact!');
$.ajax({
url: '/includes/checkout/payment.php',
data: false, // false for testing
type: 'POST',
cache: false,
async: false,
dataType: 'html',
error: function(jqXHR, textStatus, errorThrown) {
// ...
},
success: function(data) {
// ...
}
});
});
</script>
The way you're submitting the form bypasses the event handelers.
Instead of:
document.checkout_shipping.submit();
Use
$(this).closest('form').submit();
See http://jsfiddle.net/6uZuS/
Full code:
<form name="checkout_shipping" action="checkout.php" method="post">
<div class="contentText">
<table border="0" cellspacing="0" cellpadding="2">
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 0); $(this).closest('form').submit();">
<td width="75%" style="padding-left: 15px;">Flat price</td>
<td>$8.00</td>
<td align="right"><input type="radio" name="shipping" value="flat_flat" onclick="$(this).closest('form').submit();" /></td>
</tr>
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 1); $(this).closest('form').submit();">
<td>Pick-up</td>
<td>$0.00</td>
<td align="right"><input type="radio" name="shipping" value="pickup_pickup" checked="checked" onclick="$(this).closest('form').submit();" /></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('form[name=checkout_shipping]').submit(function(e) {
e.preventDefault();
alert('Got you!');
});
});
</script>
You can check here or
<form name="checkout_shipping" id="checkout_shipping" action="checkout.php" method="post">
<div class="contentText">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 0);">
<td width="75%" style="padding-left: 15px;">Flat price</td>
<td>$8.00</td>
<td align="right"><input type="radio" name="shipping" value="flat_flat" onclick="$(this).parents('form').submit();" /></td>
</tr>
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 1);">
<td>Pick-up</td>
<td>$0.00</td>
<td align="right"><input type="radio" name="shipping" value="pickup_pickup" checked="checked" onclick="$(this).parents('form').submit();" /></td>
</tr>
</table>
</div>
</form>
<script>
$(document).ready(function(){
$('#checkout_shipping').submit(function(e) {
e.preventDefault();
alert('Houston we have contact!');
});
})
</script>
I have a JSP file with struts tags.
<html:form action="showcart">
<table width="100%" border="1">
<tr>
<td width="46" align="center" valign="middle"></td>
<td width="110"></td>
<td width="31"> </td>
<td width="171" class="cart_contents"><span class="heading">Product</span></td>
<td width="157" class="cart_contents"><span class="heading">Quantity</span></td>
<td width="181" align="center" valign="middle" class="cart_contents"><span class="heading">Unit Price</span></td>
<td width="157" class="cart_contents"><span class="heading">Total Price</span></td>
<td width="222" align="center" valign="middle"></td>
</tr>
<%!
java.util.Map cartList = null;
%>
<%
cartList = (java.util.Map)request.getAttribute("cartList");
if (null != cartList) {
for(Object p : cartList.values()) {
com.pojo.Product product = (com.pojo.Product)p;
%>
<tr>
<td width="46" align="center" valign="middle"><input type="checkbox" name="checkbox" value="<%=product.getProductid()%>" /></td>
<td width="110"><img src="images/01.jpg" width="110" height="78" /></td>
<td width="31"> </td>
<td width="171"><span class="heading"><%=product.getProductname()%></span><br /><span class="contents">Serial number:<%=product.getProductid()%></span></td>
<td width="157" align="center" valign="middle" class="contents">
<label>
<input name="textfield2" type="text" value="3" size="5" align="center" onchange="submitForm()" />
</label>
<br /></td>
<td width="181" align="center" valign="middle" class="contents"><span class="price"><%=product.getUnitprice()%></span> </td>
<td width="157" class="cart_contents"><span class="heading">Total Price</span></td>
<td width="222" align="center" valign="middle"><span class="blue_contents">Remove</span></td>
</tr>
<%
}
}
%>
</table>
<html:submit/>
</html:form>
Whenever the user changes the quantity textfield, a the JS function, submitForm() is invoked. I am using an inline script as follows.
<script type="text/javascript">
function submitForm()
{
document.forms[0].action = "showcart.do?method=updateCart&pcount=2&product=2345";
document.forms[0].submit();
}
</script>
But, I am getting a JS error saying the form is undefined. Could you tell me where I am wrong?
Waiting for solutions!
Thanks in advance!
Your code worked perfectly fine for me. Make sure that the javascript code comes after the form. Also make sure there are no javascript errors in your brower's error console. If there are an code after the error will fail to run.