For some reason this form keeps refreshing the page and I have no idea why as I have another form on the page with a different id but same script and it doesn't refresh. I have tried using preventDefault(); as well but it doesnt work either. Can someone please tell me where I have gone wrong in this form or script?
Thanks
Top of page
<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/jquery-ui.js"></script>
<script type="text/javascript" src="../JS/member_info.js"></script>
The Form
<form id="central">
<table width="40%" class="search">
<tr>
<td width="39%" align="left"><p><b>Inception Date:</b></p><input size="10" maxlength="10" id="creddate" type="text" value="<?php echo $creddate; ?>" /></td>
<td width="41%" align="left"><p><b>Surety:</b></p><input size="15" maxlength="15" id="surety" type="text" value="<?php echo $surety; ?>" /></td>
<td width="20%" align="left"><p><b>Credit Limit:</b></p><input size="15" maxlength="15" id="creditlimit" type="text" value="<?php echo $credlimit; ?>" /></td>
</tr>
</table>
<br />
<table style="margin:0 auto">
<tr>
<td><input type="hidden" id="code" size="12" readonly="true" value="<?php echo $code; ?>" /></input></td>
<td><input type="submit" value=" Save " /></input></td>
<td><p align="center" id="central_status"></p></td>
</tr>
</table>
</form>
The Script - Linked from member_info.js
$(document).ready(function(){
$("form#central").submit(function() {
var code = $('#code').val();
var inception = $('#creddate').val();
var surety = $('#surety').val();
var credit = $('#creditlimit').val();
$.ajax ({
type: "POST",
url: '../members/edit_central.php',
data: {code: code, creddate: creddate, surety: surety, creditlimit: creditlimit},
success: function(data) {
$('#central_status').html(data);
}
});
return false;
});
});
Make sure you preventDefault() immediately after the form is submitted. Don't do anything else before you do that (like calling Ajax).
E.g.:
$("form#central").submit(function(e) {
e.preventDefault();
// Your other long running (possibly async)
// operations here
}
Also, make sure you are not adding the form dynamically to the page. If you do so, you need to attach the submit event live. Like so:
$(document).on('submit', 'form#central', function(e){
// same as above
});
use input type button insted of submit
<input type="button" value=" Save " name="saveButton" id="saveButton" />
in simple return false at the end of the click event handling do the trick for example :
$('form input[type="submit"]').click(function() {
....
return false;
})
Related
I'm trying to make a search form, based on the date from input field, the variable is exist when I show it with first alert. But after the first alert line, it seems nothing happen and console log don't says anything
<script type="text/javascript">
$(document).ready(function(){
$('#find').click(function(){
var date = $('#date').val();
var month = $('#month').val();
var year = $('#year').val();
var search = year+'-'+month+'-'+date;
//alert(search); <--currently the alert stop by the comment tag , its work well if the comment tag remove
$.ajax({
url:'page/report/find.php',
method:'post',
data:{data:search},
success:function(data){
$('#find_date').html(data); <-- not send value to the div id aka blank result
alert(data); <--not showing alert aka nothing happen
console.log(data); <--not showing error
}
});
});
});
</script>
Below is the PHP file waiting the variable from AJAX to proccess
<?php
error_reporting(E_ALL);
mysqli_report(MYSQLI_REPORT_ERROR|MYSQLI_REPORT_STRICT);
ini_set('display_errors',1);
if(isset($_POST)){
//parse_str($_POST['data'],$_POST);
$message = $_POST['data'];
}
echo $message;
?>
And below is the form
<form name="edit" id="edit_frm" method="post">
<table class="edit-table">
<tr>
<td colspan="6" align="center">
<input type="text" id="date" size="1" value="" placeholder="date"> -
<input type="text" id="month" size="1" value="" placeholder="month"> -
<input type="text" id="year" size="2" value="" placeholder="year">
<input type="button" id="find" value="<< search >>" />
<div id="find_date"></div>
</td>
</tr>
</table>';
I pulled the template for this idea from jquery.com and included it around my form. On submit, the form is still following the action and submitting to and showing condoupdate.php, even with the 'preventDefault' event set. Testing on FF with WAMP.
<div style="display:block;margin:0px 10px 0px 10px;width:99%;">
<form id="condoupdate" name="condoupdate" method="post" action="condoupdate.php">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><img src="img/details.png" /></td>
<td><textarea name="detail" cols="45" rows="5"><?php ECHO $extras; ?></textarea><BR /><BR /><input type="submit" class="unitBtn" name="svUnit" id="svUnit" value="Save"/> <input type="reset" class="unitBtn" name="resetUnit" value="Reset"/><div id="result" style="margin-left:10px;display:inline;"></div>
</td>
</tr>
</table>
</form></div>
<script>
$("#condoupdate").submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page
url = $("#condoupdate").attr("action");
// Send the data using post
var posting = $.post(url);
// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#result").empty().append(content);
});
});
</script>
I have a simple ajax (jquery version) script and very short php function and they works fine without problem.
When I submit the value from the form input are, the ajax will work to send and get result from
the php script, in this case to get a total amount of the book order.
The Ajax script and html section are as follows:
<script language="JavaScript">
$(document).ready(function() {
$("form").mouseout( function() {
// get field value
var qtyVal = $('#qty').val();
// use HTTP GET get ajax
$.ajax({
type: 'GET',
url: 'getSunBody.php',
data: { qty : qtyVal,
},
success: function(data) {
//get xml value
$('#result').html($(data).find('qty').text());
$('#result1').html($(data).find('caution').text());
}
});
return false;
});
});
</script>
<body>
Total price:<div id="result" class="box" style="height=350px;"></div><div id="result1" class="box" style="height=350px;"></div>
<form>
<p>
<label>quantity: </label>
<input type="text" id="qty" name="qty"/>
<br/>
<input type="submit" value="submit">
total price:</p>
<p> </p>
</form>
And the following php script serving as xml also works fine with above ajax request:
<?php
// XML document
header("Content-Type: text/xml");
header("Content-Type:text/html; charset=utf-8");
// get field values
$qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"];
echo "<?xml version=\"1.0\" ?>";
echo "<datetime>";
echo "<qty>" . $qty*100 . "</qty>";
$total=$qty*100;
if ($total==0)
echo "<caution>"."please input number!"."</caution>";
else if ($total<=500)
echo "<caution>"."you shoud buy more!"."</caution>";
echo "";
echo "</datetime>";
?>
However when I combine the above scripts with my shopping cart foreach loops, it doesn't work and the ajax script failed to get variables from the form input area. I don't know if it is a variable scope issue (globals or local)? or anything else?
The following is the total script I would like to fixed with:
<script language="JavaScript">
$(document).ready(function() {
$("form").mouseout( function() {
// get value from the form
var qtyVal = $('#qty').val();
// get
$.ajax({
type: 'GET',
url: 'getSunBody.php',
data: { qty : qtyVal,
},
success: function(data) {
// get XML value
$('#result').html($(data).find('qty').text());
$('#result1').html($(data).find('caution').text());
}
});
return false;
});
});
</script>
</head>
<body>
<table border="1" align="center">
<tr>
<th>no</th>
<th>name</th>
<th>price</th>
<th>qty</th>
<th>update</th>
</tr>
<?php
foreach( $_SESSION["psn"] as $i => $data ){
?>
<form action="sessionCartUpdate.php">
<input type="hidden" name="psn" value="<?php echo $_SESSION["psn"][$i];?>">
<tr>
<td><?php echo $_SESSION["psn"][$i];?></td>
<td><?php echo $_SESSION["pname"][$i];?></td>
<td><?php echo $_SESSION["price"][$i];?></td>
<td><input type="text" id="qty" name="qty" value="<?php echo $_SESSION["qty"][$i];?>"></td>
<input type="submit" name="qty"
<td><input type="submit" name="btnUpdate" value="update" />
<input type="submit" name="btnDelete" value="delete" />
</td>
</tr>
</form>
<?php
}
?>
<tr><td colsan="5">total amount:<div id="result" class="box" style="height=350px;"></div><div id="result1" class="box" style="height=350px;"></div></td></td>
</table>
<p>continue to shop
<p>Put your order
</body>
</html>
I would be very grateful if anyone can offer kind or possible suggestion or advice?
My goal is to put different number (variables) in the "input area" (name or id as "qty") throught the using of ajax to get a total amount of price and show the result in the div box (id="result" or "result1").
You should replace the id attribute with class because id is supposed to be unique in the dom and using class you can do a loop to get all quantities of the items in the cart
Another thing i have noticed that you have made the an individual form foreach item in the cart there should be one form having the multiple fields,also remove this line <input type="submit" name="qty" it doesent makes sense
<form action="sessionCartUpdate.php">
<?php
foreach( $_SESSION["psn"] as $i => $data ){
?>
<input type="hidden" name="psn" value="<?php echo $_SESSION["psn"][$i];?>">
<tr>
<td><?php echo $_SESSION["psn"][$i];?></td>
<td><?php echo $_SESSION["pname"][$i];?></td>
<td><?php echo $_SESSION["price"][$i];?></td>
<td><input type="text" class="qty" name="qty[]" value="<?php echo $_SESSION["qty"][$i];?>"></td>
<td><input type="submit" name="btnUpdate" value="update" />
<input type="submit" name="btnDelete" value="delete" />
</td>
</tr>
<?php
}
?>
</form>
<script language="JavaScript">
$(document).ready(function() {
$("form").mouseout( function() {
var qtyVal =0;
$( ".qty" ).each(function() {
qtyVal =qtyVal + parseInt($(this).val());
});
// get
$.ajax({
type: 'GET',
url: 'getSunBody.php',
data: { qty : qtyVal,
},
success: function(data) {
// get XML value
$('#result').html($(data).find('qty').text());
$('#result1').html($(data).find('caution').text());
}
});
return false;
});
});
</script>
// get field values
$qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"];
Instead of using both $_GET and $_POST, you can use $_REQUEST which will give data from either POST or GET.
I have this script,so it goes to ../AdsCreate/CreateCar.php reads the form and inserts into databse and loads page into a certain div which all works fine.
I have one problem one part of the form is to upload an image,now that it does not do I have been told it's because that script below serialize the data and does not do that for file based.
Here is the script.
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#Submit").click(function() {
var url = "../AdsCreate/CreateCar.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#myForm").serialize(), // serializes the form's elements.
success: function(html){ $("#right").html(html); }
});
return false; // avoid to execute the actual submit of the form.
});
});
</script>
Here is my form
<form method="post" enctype="multipart/form-data" id="myForm">
<table class="default1" style="width: 100%" align="center">
<tr>
<td class="content1" colspan="3"><h3><b>Car Ads</b></h3></td>
</tr>
<tr>
<td class="content1" width="70%">Make: <input type="text" name="name"></td>
<td class="content1" width="15%">Model: <input type="text" name = "email"></td>
<td class="content1" width="15%">Year: <input type="text" name = "phone"></td>
</tr>
<tr>
<td class="content1" colspan="3">Main Photo: <input type="file" name="photo"></td>
</tr>
<tr>
<td class="content1" colspan="3"><input type="submit" value="Upload" id="Submit"></td>
</tr>
</table>
</form>
How can I change the script so I can upload a form that also has a file upload??
You can upload file separately using this plugin:
http://blueimp.github.com/jQuery-File-Upload/
You can also use jQuery Forms to upload File:
http://www.malsup.com/jquery/form/#file-upload
Make sure to disable submit button once a file is selected so it will upload the image first before the user can submit the form.
before ajax call I write the code for date picker is:
<script type="text/javascript">
$(function() {
$("#birthdate").focus(function() {
$(this).datepicker().datepicker( "show" )
});
});
$(function() {
$("#joindate").focus(function() {
$(this).datepicker().datepicker( "show" )
});
});
</script>
this function called after onfocus event:
<tr>
<td align="left">
<input type="text" id="birthdate" name="birthdate" onfocus="$('#birthdate').datepicker({changeMonth: true,changeYear: true,dateFormat: 'dd/mm/yy',defaultDate: '-20y -1m -247d',yearRange: '-50:+0'});" tabindex="14" style="width:300px; " value="<? if($get_emp!='0')echo $employee_birth; ?>" /><span style="color:#F00;">*</span></td>
<td>
<input type="text" name="joindate" id="joindate" onfocus="$('#joindate').datepicker({changeMonth: true,changeYear: true,dateFormat: 'dd/mm/yy',defaultDate: '-3y -1m -247d',yearRange: '-50:+0'});" tabindex="15" style="width:300px; " value="<? if($get_emp!='0')echo $employee_join; ?>"/><span style="color:#F00;">*</span>
</td>
</tr>
after ajax call I call the same code but it not opens on first click , however it opens on second click?
please help me to sort out this problem..........................
Use this javascript. You only need to initialize the datepicker() once
$(function() {
$('#birthdate').datepicker({changeMonth: true,changeYear: true,dateFormat: 'dd/mm/yy',defaultDate: '-20y -1m -247d',yearRange: '-50:+0'});
$("#joindate").datepicker({changeMonth: true,changeYear: true,dateFormat: 'dd/mm/yy',defaultDate: '-3y -1m -247d',yearRange: '-50:+0'});
$("#birthdate, #joindate").focus(function() {
$(this).datepicker( "show" )
});
});
I removed the focus attribute from the input tags:
<input type="text" id="birthdate" name="birthdate" tabindex="14" style="width:300px; " value="<? if($get_emp!='0')echo $employee_birth; ?>" /><span style="color:#F00;">*</span></td>
<input type="text" name="joindate" id="joindate" " tabindex="15" style="width:300px; " value="<? if($get_emp!='0')echo $employee_join; ?>"/><span style="color:#F00;">*</span>
Try something like this instead:
$(document).ready(function(){
$("#joindate").datepicker({
// Options and methods here
});
$("#joindate").focus(function(){
$("#joindate").datepicker("show");
});
$("#joindate").focus();
});
You can also do a $.post() on the "onSelect" event, should you want to post the date on the actual click event of the date, instead of having to tie it to a form submit.