jquery onblur
I have a form that does some action but it works when I use a submit button. I would like to do it with an onblur.
Can you translate this to use an onblur?
Can you translate this to use an onblur?
<form id="setorder_5" name="setorder_5" action="ajax_set_order.php">
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order_2" value="2">
<input type="submit" value="Set Order"> <div style="display:inline;" id="show2_5"></div>
</form>
<script>
$("#setorder_5").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show2_5").html(php_msg); });
})
</script>
The following example allows you to use onblur event to submit form avoiding the use of having a submit button -
note: the user does need to click on the input box, so it can have focus and user can enter something and onblur the form would submit.
Following example should help you add this feature in your website:
<script type="text/javascript" language="javascript">
function submitform() {
document.setorder_5.submit
}
</script>
<form id="setorder_5" name="setorder_5" action="ajax_set_order.php
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order_2" value="2" onblur="submitform();">
<input type="submit" value="Set Order"> <div style="display:inline;" id="show2_5"></div>
</form>
--
You may want to add the jquery submit/post function to the submitform form if you feel necessary.
Thanks
Sheraz
note: the user does need to click on the input box, so it can have focus and user can enter something and onblur the form would submit.
Following example should help you add this feature in your website:
<script type="text/javascript" language="javascript">
function submitform() {
document.setorder_5.submit
}
</script>
<form id="setorder_5" name="setorder_5" action="ajax_set_order.php
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order_2" value="2" onblur="submitform();">
<input type="submit" value="Set Order"> <div style="display:inline;" id="show2_5"></div>
</form>
--
You may want to add the jquery submit/post function to the submitform form if you feel necessary.
Thanks
Sheraz
ASKER
The 1st example didn't appear to work on my end. Jquery didn't process, firebug did not show any errors thought.
On the 2nd example I don't see where jquery is even used so I don't think that would work because I want to update an element on the page.
On the 2nd example I don't see where jquery is even used so I don't think that would work because I want to update an element on the page.
This uses both events and jQuery:
<form id="setorder_5" name="setorder_5" action="ajax_set_order.php">
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order_2" value="2">
<input type="submit" value="Set Order"> <div style="display:inline;" id="show2_5"></div>
</form>
<script>
$("#setorder_5").blur(function(event){
submitform(event);
}); $("#setorder_5").submit(function(event){
submitform(event);
});
function submitform(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show2_5").html(php_msg); });
}
</script>
Hi,
The jquery function can be added to submitform function as following, if you need assign value to an element you can do as as following.
<script type="text/javascript" language="javascript">
function submitform() {
document.setorder_5.submit
$.post($(this).attr("actio
}
</script>
<form id="setorder_5" name="setorder_5" action="submitformonBlur.h
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order_2" value="2" onblur="submitform();">
<input type="submit" value="Set Order"> <div style="display:inline;" id="show2_5"></div>
</form>
The jquery function can be added to submitform function as following, if you need assign value to an element you can do as as following.
<script type="text/javascript" language="javascript">
function submitform() {
document.setorder_5.submit
$.post($(this).attr("actio
}
</script>
<form id="setorder_5" name="setorder_5" action="submitformonBlur.h
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order_2" value="2" onblur="submitform();">
<input type="submit" value="Set Order"> <div style="display:inline;" id="show2_5"></div>
</form>
ASKER
Would your example require the submit button? So far no luck with any of these. I have not tried the last one yet.
No it's not necessary for it to work... it essentially just calls the submit function of the form
No, You do not require the submit button - i added it just in case you might like to use it for something else - however if you remove it as following; it should work fine:
<script type="text/javascript" language="javascript">
function submitform() {
document.setorder_5.submit
}
</script>
<form id="setorder_5" name="setorder_5" action="submitformonBlur.h
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order_2" value="2" onblur="submitform();">
<input type="submit" value="Set Order"> <div style="display:inline;" id="show2_5"></div>
</form>
<script type="text/javascript" language="javascript">
function submitform() {
document.setorder_5.submit
}
</script>
<form id="setorder_5" name="setorder_5" action="submitformonBlur.h
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order_2" value="2" onblur="submitform();">
<input type="submit" value="Set Order"> <div style="display:inline;" id="show2_5"></div>
</form>
ASKER
Thanks I will give that a try.
Code updated: Removed submit button, added jQuery post command.
<script type="text/javascript" language="javascript">
function submitform() {
document.setorder_5.submit
$.post($(this).attr("actio
}
</script>
<form id="setorder_5" name="setorder_5" action="submitformonBlur.h
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order_2" value="2" onblur="submitform();">
</form>
<script type="text/javascript" language="javascript">
function submitform() {
document.setorder_5.submit
$.post($(this).attr("actio
}
</script>
<form id="setorder_5" name="setorder_5" action="submitformonBlur.h
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order_2" value="2" onblur="submitform();">
</form>
ASKER
The onsubmit call works but it does not update the div element. It submitted the ajax php file in the parent window. There was also an error from firebug.
Error from firebug:
"NetworkError: 404 Not Found - http://172.16.1.141/admin/%5Bobject%20HTMLInputElement%5D"
<form id="setorder_5" name="setorder_5" action="ajax_set_order.php">
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order" value="3" onblur="submitform5();" >
<!--<input type="submit" value="Set Order"> -->
<div style="display:inline;" id="show2_5"></div>
</form>
<script>
/*
$("#setorder_5").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show2_5").html(php_msg); });
})
*/
function submitform5() {
document.setorder_5.submit();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show2_5").html(php_msg); });
}
</script>Error from firebug:
"NetworkError: 404 Not Found - http://172.16.1.141/admin/%5Bobject%20HTMLInputElement%5D"
ASKER
FYI: The url that opened is what should have passed to the div
This is what opened and the URL is correct:
http://172.16.1.141/admin/ajax_set_order.php?special_id=4&order=12
This is what opened and the URL is correct:
http://172.16.1.141/admin/ajax_set_order.php?special_id=4&order=12
The code you've got above won't work because you are submitting the form twice. The first line in your submitform5 submits the form AND reloads the page so even if the second line is called the browser won't be around to receive it, hence the DIV is never updated.
should be:
should be:
function submitform5() {
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show2_5").html(php_msg); });
}
As for your DIV not being updated, i suspect it is because of the data coming back from your server script. To test this put some text in the DIV and see if it disappears after blur.
eg.
If the text "Waiting for data..." disappears then the ajax call has worked and there is something wrong with what data you are sending back to the browser. Won't know till i see the server script handling this.
eg.
<form id="setorder_5" name="setorder_5" action="ajax_set_order.php">
<input name="special_id" type="hidden" value="5">
<input type="text" size="4" name="order" id="order" value="3" onblur="submitform5();">
<!--<input type="submit" value="Set Order"> -->
<div style="display:inline;" id="show2_5">Waiting for data...</div>
</form>If the text "Waiting for data..." disappears then the ajax call has worked and there is something wrong with what data you are sending back to the browser. Won't know till i see the server script handling this.
ASKER
Still getting the same results.
There are several jquery calls on my page. Maybe one is stepping on the other. However, when I use the submit button in my original code it works great.
Here is the source for the entire page. Note: I am using PHP to insert data into the ajax code.
Error:
POST http://172.16.1.141/admin/%5Bobject%20HTMLInputElement%5D
404 Not Found
31ms
There are several jquery calls on my page. Maybe one is stepping on the other. However, when I use the submit button in my original code it works great.
Here is the source for the entire page. Note: I am using PHP to insert data into the ajax code.
Error:
POST http://172.16.1.141/admin/%5Bobject%20HTMLInputElement%5D
404 Not Found
31ms
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>AF/DF CMS 2.0</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="calendar.css" />
<script language="JavaScript" src="calendar_db.js"></script>
<!-- Place inside the <head> of your HTML -->
<script src="tinymce/plugins/moxiemanager/js/moxman.loader.min.js"></script>
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme : "modern",
plugins: "link code anchor image hr media table textcolor charmap insertdatetime paste preview searchreplace spellchecker tabfocus visualblocks visualchars moxiemanager"
});
</script>
<script language="javascript">
function toggle(id) {
var this_id = id;
var ele = document.getElementById(this_id);
var text = document.getElementById(this_id);
if(ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
<script language="JavaScript">
function validateForm() {
var x=document.forms["MyForm"]["name"].value;
if (x==null || x=="") {
alert("Destination name is required.");
return false;
}
if(document.getElementById("yacht").value == "") {
alert("Please select a Yacht"); // prompt user
document.getElementById("yacht").focus(); //set focus back to control
return false;
}
if(document.getElementById("boatID").value == "") {
alert("Please select a Boat"); // prompt user
document.getElementById("boatID").focus(); //set focus back to control
return false;
}
if(document.getElementById("title").value == "") {
alert("Please enter in a title"); // prompt user
document.getElementById("title").focus(); //set focus back to control
return false;
}
if(document.getElementById("active").value == "") {
alert("Please select select the status"); // prompt user
document.getElementById("active").focus(); //set focus back to control
return false;
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">AF/DF CMS 2.0</a></h1>
</div>
<div id="menu">
<ul>
<li class="first current_page_item"><a href="index.php?section=destinations">Destinations</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Templates</a></li>
<li><a href="index.php?section=rates">Rates</a></li>
<li><a href="index.php?section=specials">Specials</a></li>
<li><a href="javascript:void(0)" onclick="moxman.browse();">Files</a></li>
<li><a href="index.php?section=dealers">Dealers</a></li>
<li><a href="#">Tools</a></li>
<li class="last"><a href="index.php?section=logout">Logout</a></li>
</ul>
<br class="clearfix" />
</div>
</div>
<div id="inner">
<div id="page">
<div id="content">
<div class="box">
<p>
</p>
Logged in as Robert Saylor<br>
<h2>Specials and Unique charters</h2>
<a href="index.php?section=specials">Specials</a> | <a href="index.php?section=new_special">Add New Special</a> | <a href="http://www.aggressor.com/specials.php" target=_blank onclick="return confirm('This will open the specials page into a new tab or window.')">Preview Specials</a><br><br><table border=0 width=100%>
<tr>
<td width=50%><b>Specials</b></td>
<td width=50%><b>Unique Charters</b></td>
</tr>
<tr>
<td valign=top><table border=0 width=100%><tr><td colspan=3><font color=blue><b> Okeanos Aggressor SUMMER SAVINGS $800</b></font></td></tr>
<tr><td colspan=3>July 19, 2013 To July 26, 2013</td></tr>
<tr><td colspan=3>
<form id="setorder_4" name="setorder_4" action="ajax_set_order.php">
<input name="special_id4" id="special_id4" type="hidden" value="4">
<input type="text" size="4" name="order_4" id="order_4" value="1" onblur="doform4();" >
<div style="display:inline;" id="show2_4">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform4() {
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show2_4").html(php_msg); });
}
</script>
[<a href="javascript:void(0);" onclick="toggle('desc_4');">Destinations</a>] [<a href="index.php?section=update_special&id=4">Edit</a>] [<a href="index.php?section=delete_special&id=4" onclick="return confirm('WARNING: This will remove the special from the website.')">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr><tr id="desc_4" style="display:none"><td colspan=3><b>Current Destinations</b><br>
<div id="show_4">
<table border=0 width=300>
<tr><td width="20">
<form id="formD50" name="formD50" action="ajax_add_special_to_destination.php">
<input name="special_id" value="4" id="special_id" type="hidden">
<input name="destination" value="16" id="destination" type="hidden">
<input name="sd" value="50" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Kona, Hawaii from this special.')">
</form></td><td> Kona, Hawaii</td></tr></table>
<script>
$("#formD50").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_4").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD52" name="formD52" action="ajax_add_special_to_destination.php">
<input name="special_id" value="4" id="special_id" type="hidden">
<input name="destination" value="28" id="destination" type="hidden">
<input name="sd" value="52" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Thailand Aggressor from this special.')">
</form></td><td> Thailand Aggressor</td></tr></table>
<script>
$("#formD52").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_4").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD30" name="formD30" action="ajax_add_special_to_destination.php">
<input name="special_id" value="4" id="special_id" type="hidden">
<input name="destination" value="22" id="destination" type="hidden">
<input name="sd" value="30" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Tropic Dancer from this special.')">
</form></td><td> Tropic Dancer</td></tr></table>
<script>
$("#formD30").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_4").html(php_msg); });
})
</script>
<form id="form4" name="form4" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="4">
Add Destination: <select name="destination_id" id="destination_id"><option value="10">Belize Aggressor II</option><option value="25">Carib Dancer</option><option value="11">Cayman Islands</option><option value="17">Cocos Island, Costa Rica</option><option value="20">Dominican Republic</option><option value="14">Galapagos Islands</option><option value="24">Island Dancer II</option><option value="26">Komodo Dancer</option><option value="27">Komodo Dancer - Alor</option><option value="16">Kona, Hawaii</option><option value="19">Maldives</option><option value="9">Palau</option><option value="36">Red Sea</option><option value="21">Sun Dancer</option><option value="28">Thailand Aggressor</option><option value="22">Tropic Dancer</option><option value="13">Turks & Caicos</option><option value="23">Wind Dancer</option></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form4").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_4").html(php_msg); });
})
</script>
</div>
</td></tr><tr><td colspan=3><font color=blue><b> Okeanos Aggressor SUMMER SAVINGS $800</b></font></td></tr>
<tr><td colspan=3>August 24, 2013 To September 3, 2013</td></tr>
<tr><td colspan=3>
<form id="setorder_5" name="setorder_5" action="ajax_set_order.php">
<input name="special_id5" id="special_id5" type="hidden" value="5">
<input type="text" size="4" name="order_5" id="order_5" value="2" onblur="doform5();" >
<div style="display:inline;" id="show2_5">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform5() {
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show2_5").html(php_msg); });
}
</script>
[<a href="javascript:void(0);" onclick="toggle('desc_5');">Destinations</a>] [<a href="index.php?section=update_special&id=5">Edit</a>] [<a href="index.php?section=delete_special&id=5" onclick="return confirm('WARNING: This will remove the special from the website.')">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr><tr id="desc_5" style="display:none"><td colspan=3><b>Current Destinations</b><br>
<div id="show_5">
<table border=0 width=300>
<tr><td width="20">
<form id="formD57" name="formD57" action="ajax_add_special_to_destination.php">
<input name="special_id" value="5" id="special_id" type="hidden">
<input name="destination" value="10" id="destination" type="hidden">
<input name="sd" value="57" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Belize Aggressor II from this special.')">
</form></td><td> Belize Aggressor II</td></tr></table>
<script>
$("#formD57").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD37" name="formD37" action="ajax_add_special_to_destination.php">
<input name="special_id" value="5" id="special_id" type="hidden">
<input name="destination" value="20" id="destination" type="hidden">
<input name="sd" value="37" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Dominican Republic from this special.')">
</form></td><td> Dominican Republic</td></tr></table>
<script>
$("#formD37").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD33" name="formD33" action="ajax_add_special_to_destination.php">
<input name="special_id" value="5" id="special_id" type="hidden">
<input name="destination" value="27" id="destination" type="hidden">
<input name="sd" value="33" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Komodo Dancer - Alor from this special.')">
</form></td><td> Komodo Dancer - Alor</td></tr></table>
<script>
$("#formD33").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD34" name="formD34" action="ajax_add_special_to_destination.php">
<input name="special_id" value="5" id="special_id" type="hidden">
<input name="destination" value="9" id="destination" type="hidden">
<input name="sd" value="34" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Palau from this special.')">
</form></td><td> Palau</td></tr></table>
<script>
$("#formD34").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD49" name="formD49" action="ajax_add_special_to_destination.php">
<input name="special_id" value="5" id="special_id" type="hidden">
<input name="destination" value="23" id="destination" type="hidden">
<input name="sd" value="49" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Wind Dancer from this special.')">
</form></td><td> Wind Dancer</td></tr></table>
<script>
$("#formD49").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
<form id="form5" name="form5" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="5">
Add Destination: <select name="destination_id" id="destination_id"><option value="10">Belize Aggressor II</option><option value="25">Carib Dancer</option><option value="11">Cayman Islands</option><option value="17">Cocos Island, Costa Rica</option><option value="20">Dominican Republic</option><option value="14">Galapagos Islands</option><option value="24">Island Dancer II</option><option value="26">Komodo Dancer</option><option value="27">Komodo Dancer - Alor</option><option value="16">Kona, Hawaii</option><option value="19">Maldives</option><option value="9">Palau</option><option value="36">Red Sea</option><option value="21">Sun Dancer</option><option value="28">Thailand Aggressor</option><option value="22">Tropic Dancer</option><option value="13">Turks & Caicos</option><option value="23">Wind Dancer</option></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form5").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
</div>
</td></tr><tr><td colspan=3><font color=blue><b>Sharon</b></font></td></tr>
<tr><td colspan=3>July 19, 2013 To July 25, 2014</td></tr>
<tr><td colspan=3>
<form id="setorder_7" name="setorder_7" action="ajax_set_order.php">
<input name="special_id7" id="special_id7" type="hidden" value="7">
<input type="text" size="4" name="order_7" id="order_7" value="4" onblur="doform7();" >
<div style="display:inline;" id="show2_7">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform7() {
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show2_7").html(php_msg); });
}
</script>
[<a href="javascript:void(0);" onclick="toggle('desc_7');">Destinations</a>] [<a href="index.php?section=update_special&id=7">Edit</a>] [<a href="index.php?section=delete_special&id=7" onclick="return confirm('WARNING: This will remove the special from the website.')">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr><tr id="desc_7" style="display:none"><td colspan=3><b>Current Destinations</b><br>
<div id="show_7">
<table border=0 width=300>
<tr><td width="20">
<form id="formD46" name="formD46" action="ajax_add_special_to_destination.php">
<input name="special_id" value="7" id="special_id" type="hidden">
<input name="destination" value="22" id="destination" type="hidden">
<input name="sd" value="46" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Tropic Dancer from this special.')">
</form></td><td> Tropic Dancer</td></tr></table>
<script>
$("#formD46").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_7").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD44" name="formD44" action="ajax_add_special_to_destination.php">
<input name="special_id" value="7" id="special_id" type="hidden">
<input name="destination" value="13" id="destination" type="hidden">
<input name="sd" value="44" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Turks & Caicos from this special.')">
</form></td><td> Turks & Caicos</td></tr></table>
<script>
$("#formD44").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_7").html(php_msg); });
})
</script>
<form id="form7" name="form7" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="7">
Add Destination: <select name="destination_id" id="destination_id"><option value="10">Belize Aggressor II</option><option value="25">Carib Dancer</option><option value="11">Cayman Islands</option><option value="17">Cocos Island, Costa Rica</option><option value="20">Dominican Republic</option><option value="14">Galapagos Islands</option><option value="24">Island Dancer II</option><option value="26">Komodo Dancer</option><option value="27">Komodo Dancer - Alor</option><option value="16">Kona, Hawaii</option><option value="19">Maldives</option><option value="9">Palau</option><option value="36">Red Sea</option><option value="21">Sun Dancer</option><option value="28">Thailand Aggressor</option><option value="22">Tropic Dancer</option><option value="13">Turks & Caicos</option><option value="23">Wind Dancer</option></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form7").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_7").html(php_msg); });
})
</script>
</div>
</td></tr><tr><td colspan=3><font color=blue><b>test</b></font></td></tr>
<tr><td colspan=3>July 22, 2013 To July 29, 2013</td></tr>
<tr><td colspan=3>
<form id="setorder_12" name="setorder_12" action="ajax_set_order.php">
<input name="special_id12" id="special_id12" type="hidden" value="12">
<input type="text" size="4" name="order_12" id="order_12" value="5" onblur="doform12();" >
<div style="display:inline;" id="show2_12">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform12() {
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show2_12").html(php_msg); });
}
</script>
[<a href="javascript:void(0);" onclick="toggle('desc_12');">Destinations</a>] [<a href="index.php?section=update_special&id=12">Edit</a>] [<a href="index.php?section=delete_special&id=12" onclick="return confirm('WARNING: This will remove the special from the website.')">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr><tr id="desc_12" style="display:none"><td colspan=3><b>Current Destinations</b><br>
<div id="show_12">
<form id="form12" name="form12" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="12">
Add Destination: <select name="destination_id" id="destination_id"><option value="10">Belize Aggressor II</option><option value="25">Carib Dancer</option><option value="11">Cayman Islands</option><option value="17">Cocos Island, Costa Rica</option><option value="20">Dominican Republic</option><option value="14">Galapagos Islands</option><option value="24">Island Dancer II</option><option value="26">Komodo Dancer</option><option value="27">Komodo Dancer - Alor</option><option value="16">Kona, Hawaii</option><option value="19">Maldives</option><option value="9">Palau</option><option value="36">Red Sea</option><option value="21">Sun Dancer</option><option value="28">Thailand Aggressor</option><option value="22">Tropic Dancer</option><option value="13">Turks & Caicos</option><option value="23">Wind Dancer</option></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form12").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_12").html(php_msg); });
})
</script>
</div>
</td></tr></table></td>
<td valign=top><table border=0 width=100%><tr><td colspan=3><font color=blue><b>Wine Appreciation Charters 2</b></font></td></tr>
<tr><td colspan=3>July 1, 2013 To August 3, 2013</td></tr>
<tr><td colspan=3>
<form id="setorder_6" name="setorder_6" action="ajax_set_order.php">
<input name="special_id6" id="special_id6" type="hidden" value="6">
<input type="text" size="4" name="order_6" id="order_6" value="1" onblur="doform6();" >
<div style="display:inline;" id="show2_6">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform6() {
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show2_6").html(php_msg); });
}
</script>
[<a href="javascript:void(0);" onclick="toggle('desc_6');">Destinations</a>] [<a href="index.php?section=update_special&id=6">Edit</a>] [<a href="index.php?section=delete_special&id=6" onclick="return confirm('WARNING: This will remove the special from the website.')">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr><tr id="desc_6" style="display:none"><td colspan=3><b>Current Destinations</b><br>
<div id="show_6">
<table border=0 width=300>
<tr><td width="20">
<form id="formD38" name="formD38" action="ajax_add_special_to_destination.php">
<input name="special_id" value="6" id="special_id" type="hidden">
<input name="destination" value="11" id="destination" type="hidden">
<input name="sd" value="38" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Cayman Islands from this special.')">
</form></td><td> Cayman Islands</td></tr></table>
<script>
$("#formD38").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_6").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD47" name="formD47" action="ajax_add_special_to_destination.php">
<input name="special_id" value="6" id="special_id" type="hidden">
<input name="destination" value="20" id="destination" type="hidden">
<input name="sd" value="47" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Dominican Republic from this special.')">
</form></td><td> Dominican Republic</td></tr></table>
<script>
$("#formD47").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_6").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD39" name="formD39" action="ajax_add_special_to_destination.php">
<input name="special_id" value="6" id="special_id" type="hidden">
<input name="destination" value="21" id="destination" type="hidden">
<input name="sd" value="39" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Sun Dancer from this special.')">
</form></td><td> Sun Dancer</td></tr></table>
<script>
$("#formD39").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_6").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD40" name="formD40" action="ajax_add_special_to_destination.php">
<input name="special_id" value="6" id="special_id" type="hidden">
<input name="destination" value="28" id="destination" type="hidden">
<input name="sd" value="40" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Thailand Aggressor from this special.')">
</form></td><td> Thailand Aggressor</td></tr></table>
<script>
$("#formD40").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_6").html(php_msg); });
})
</script>
<form id="form6" name="form6" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="6">
Add Destination: <select name="destination_id" id="destination_id"><option value="10">Belize Aggressor II</option><option value="25">Carib Dancer</option><option value="11">Cayman Islands</option><option value="17">Cocos Island, Costa Rica</option><option value="20">Dominican Republic</option><option value="14">Galapagos Islands</option><option value="24">Island Dancer II</option><option value="26">Komodo Dancer</option><option value="27">Komodo Dancer - Alor</option><option value="16">Kona, Hawaii</option><option value="19">Maldives</option><option value="9">Palau</option><option value="36">Red Sea</option><option value="21">Sun Dancer</option><option value="28">Thailand Aggressor</option><option value="22">Tropic Dancer</option><option value="13">Turks & Caicos</option><option value="23">Wind Dancer</option></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form6").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_6").html(php_msg); });
})
</script>
</div>
</td></tr></table></td>
</tr>
</table>
</p></div></div></div></div></div>
<div id="footer">
© 2013 WayneWorks Marine
</div>
</body></html>
That URL doesn't look right. I can see HTMLInputElement and Object so the value hasn't been extracted as expected.
Where is the code to build this URL? I saw it was generated from a php script?
Where is the code to build this URL? I saw it was generated from a php script?
ASKER
Nothing in my code generates that URL. It only does it with the onBlur.
I think you should change your serializeArray() calls to just serialize() as the first is suited to json encoding while the latter is for url encoding which in this case is needed for form submissions
ASKER
still doing the same thing :(
Here is the backed php code
Here is the backed php code
public function all_specials($type) {
$sql = "
SELECT
`id`,
`title`,
`order`,
DATE_FORMAT(`start_date`, '%M %e, %Y') AS 'start_date',
DATE_FORMAT(`end_date`, '%M %e, %Y') AS 'end_date'
FROM
`specials`
WHERE
`type` = '$type'
ORDER BY `order` ASC
";
$result = $this->new_mysql($sql);
print "<table border=0 width=100%>";
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
print "<tr><td colspan=3><font color=blue><b>$row[title]</b></font></td></tr>
<tr><td colspan=3>$row[start_date] To $row[end_date]</td></tr>
<tr><td colspan=3>
";
?>
<form id="setorder_<?=$row['id'];?>" name="setorder_<?=$row['id'];?>" action="ajax_set_order.php">
<input name="special_id<?=$row['id'];?>" id="special_id<?=$row['id'];?>" type="hidden" value="<?=$row['id'];?>">
<input type="text" size="4" name="order_<?=$row['id'];?>" id="order_<?=$row['id'];?>" value="<?=$row['order'];?>" onblur="doform<?=$row['id'];?>();" >
<div style="display:inline;" id="show2_<?=$row['id'];?>">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform<?=$row['id'];?>() {
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show2_<?=$row['id'];?>").html(php_msg); });
}
</script>
<?php
print "
[<a href=\"javascript:void(0);\" onclick=\"toggle('desc_$row[id]');\">Destinations</a>] [<a href=\"index.php?section=update_special&id=$row[id]\">Edit</a>] [<a href=\"index.php?section=delete_special&id=$row[id]\" onclick=\"return confirm('WARNING: This will remove the special from the website.')\">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr>";
print "<tr id=\"desc_$row[id]\" style=\"display:none\"><td colspan=3>";
$destinations = "";
$result2 = $this->get_destinations();
if ($result2->num_rows > 0) {
while($row2 = $result2->fetch_assoc()) {
$destinations .= "<option value=\"$row2[id]\">$row2[title]</option>";
}
}
?>
<b>Current Destinations</b><br>
<div id="show_<?=$row['id'];?>">
<?php
$this->show_destinations_list($row['id']);
?>
<form id="form<?=$row['id'];?>" name="form<?=$row['id'];?>" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="<?=$row['id'];?>">
Add Destination: <select name="destination_id" id="destination_id"><?=$destinations;?></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form<?=$row['id'];?>").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serializeArray(), function(php_msg) { $("#show_<?=$row['id'];?>").html(php_msg); });
})
</script>
</div>
<?php
print "</td></tr>";
}
}
print "</table>";
}
I can still see you're using the serializeArray function in your JavaScript. Can you modify all instances to just be serialize()?
Im suspecting the problem is related to the serializeArray Jquery function because it creates a an array of JavaScript objects and passes this as data to the Ajax function. If you look at your error you'll see in the URL object and htmlinputelement. That's what is displayed if you try and output object.
The serialize function works differently by getting all the name/value pairs and puts them into a URL encoded string eg name1=val1&name2&val2 etc which is e required format for sending data via ajax
The serialize function works differently by getting all the name/value pairs and puts them into a URL encoded string eg name1=val1&name2&val2 etc which is e required format for sending data via ajax
ASKER
I replaced serializeArray with serialize but the error is still the same.
"NetworkError: 404 Not Found - http://172.16.1.141/admin/%5Bobject%20HTMLInputElement%5D"
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /admin/[object HTMLInputElement] was not found on this server.</p>
</body></html>
Note: The error only does this using the onblur. If I submit it via the button the div element is updated and there are no errors.
"NetworkError: 404 Not Found - http://172.16.1.141/admin/%5Bobject%20HTMLInputElement%5D"
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /admin/[object HTMLInputElement] was not found on this server.</p>
</body></html>
Note: The error only does this using the onblur. If I submit it via the button the div element is updated and there are no errors.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>AF/DF CMS 2.0</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="calendar.css" />
<script language="JavaScript" src="calendar_db.js"></script>
<!-- Place inside the <head> of your HTML -->
<script src="tinymce/plugins/moxiemanager/js/moxman.loader.min.js"></script>
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme : "modern",
plugins: "link code anchor image hr media table textcolor charmap insertdatetime paste preview searchreplace spellchecker tabfocus visualblocks visualchars moxiemanager"
});
</script>
<script language="javascript">
function toggle(id) {
var this_id = id;
var ele = document.getElementById(this_id);
var text = document.getElementById(this_id);
if(ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
<script language="JavaScript">
function validateForm() {
var x=document.forms["MyForm"]["name"].value;
if (x==null || x=="") {
alert("Destination name is required.");
return false;
}
if(document.getElementById("yacht").value == "") {
alert("Please select a Yacht"); // prompt user
document.getElementById("yacht").focus(); //set focus back to control
return false;
}
if(document.getElementById("boatID").value == "") {
alert("Please select a Boat"); // prompt user
document.getElementById("boatID").focus(); //set focus back to control
return false;
}
if(document.getElementById("title").value == "") {
alert("Please enter in a title"); // prompt user
document.getElementById("title").focus(); //set focus back to control
return false;
}
if(document.getElementById("active").value == "") {
alert("Please select select the status"); // prompt user
document.getElementById("active").focus(); //set focus back to control
return false;
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">AF/DF CMS 2.0</a></h1>
</div>
<div id="menu">
<ul>
<li class="first current_page_item"><a href="index.php?section=destinations">Destinations</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Templates</a></li>
<li><a href="index.php?section=rates">Rates</a></li>
<li><a href="index.php?section=specials">Specials</a></li>
<li><a href="javascript:void(0)" onclick="moxman.browse();">Files</a></li>
<li><a href="index.php?section=dealers">Dealers</a></li>
<li><a href="#">Tools</a></li>
<li class="last"><a href="index.php?section=logout">Logout</a></li>
</ul>
<br class="clearfix" />
</div>
</div>
<div id="inner">
<div id="page">
<div id="content">
<div class="box">
<p>
</p>
Logged in as Robert Saylor<br>
<h2>Specials and Unique charters</h2>
<a href="index.php?section=specials">Specials</a> | <a href="index.php?section=new_special">Add New Special</a> | <a href="http://www.aggressor.com/specials.php" target=_blank onclick="return confirm('This will open the specials page into a new tab or window.')">Preview Specials</a><br><br><table border=0 width=100%>
<tr>
<td width=50%><b>Specials</b></td>
<td width=50%><b>Unique Charters</b></td>
</tr>
<tr>
<td valign=top><table border=0 width=100%><tr><td colspan=3><font color=blue><b> Okeanos Aggressor SUMMER SAVINGS $800</b></font></td></tr>
<tr><td colspan=3>July 19, 2013 To July 26, 2013</td></tr>
<tr><td colspan=3>
<form id="setorder_4" name="setorder_4" action="ajax_set_order.php">
<input name="special_id4" id="special_id4" type="hidden" value="4">
<input type="text" size="4" name="order_4" id="order_4" value="1" onblur="doform4();" >
<div style="display:inline;" id="show2_4">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform4() {
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show2_4").html(php_msg); });
}
</script>
[<a href="javascript:void(0);" onclick="toggle('desc_4');">Destinations</a>] [<a href="index.php?section=update_special&id=4">Edit</a>] [<a href="index.php?section=delete_special&id=4" onclick="return confirm('WARNING: This will remove the special from the website.')">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr><tr id="desc_4" style="display:none"><td colspan=3><b>Current Destinations</b><br>
<div id="show_4">
<table border=0 width=300>
<tr><td width="20">
<form id="formD50" name="formD50" action="ajax_add_special_to_destination.php">
<input name="special_id" value="4" id="special_id" type="hidden">
<input name="destination" value="16" id="destination" type="hidden">
<input name="sd" value="50" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Kona, Hawaii from this special.')">
</form></td><td> Kona, Hawaii</td></tr></table>
<script>
$("#formD50").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_4").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD52" name="formD52" action="ajax_add_special_to_destination.php">
<input name="special_id" value="4" id="special_id" type="hidden">
<input name="destination" value="28" id="destination" type="hidden">
<input name="sd" value="52" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Thailand Aggressor from this special.')">
</form></td><td> Thailand Aggressor</td></tr></table>
<script>
$("#formD52").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_4").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD30" name="formD30" action="ajax_add_special_to_destination.php">
<input name="special_id" value="4" id="special_id" type="hidden">
<input name="destination" value="22" id="destination" type="hidden">
<input name="sd" value="30" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Tropic Dancer from this special.')">
</form></td><td> Tropic Dancer</td></tr></table>
<script>
$("#formD30").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_4").html(php_msg); });
})
</script>
<form id="form4" name="form4" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="4">
Add Destination: <select name="destination_id" id="destination_id"><option value="10">Belize Aggressor II</option><option value="25">Carib Dancer</option><option value="11">Cayman Islands</option><option value="17">Cocos Island, Costa Rica</option><option value="20">Dominican Republic</option><option value="14">Galapagos Islands</option><option value="24">Island Dancer II</option><option value="26">Komodo Dancer</option><option value="27">Komodo Dancer - Alor</option><option value="16">Kona, Hawaii</option><option value="19">Maldives</option><option value="9">Palau</option><option value="36">Red Sea</option><option value="21">Sun Dancer</option><option value="28">Thailand Aggressor</option><option value="22">Tropic Dancer</option><option value="13">Turks & Caicos</option><option value="23">Wind Dancer</option></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form4").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_4").html(php_msg); });
})
</script>
</div>
</td></tr><tr><td colspan=3><font color=blue><b> Okeanos Aggressor SUMMER SAVINGS $800</b></font></td></tr>
<tr><td colspan=3>August 24, 2013 To September 3, 2013</td></tr>
<tr><td colspan=3>
<form id="setorder_5" name="setorder_5" action="ajax_set_order.php">
<input name="special_id5" id="special_id5" type="hidden" value="5">
<input type="text" size="4" name="order_5" id="order_5" value="2" onblur="doform5();" >
<div style="display:inline;" id="show2_5">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform5() {
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show2_5").html(php_msg); });
}
</script>
[<a href="javascript:void(0);" onclick="toggle('desc_5');">Destinations</a>] [<a href="index.php?section=update_special&id=5">Edit</a>] [<a href="index.php?section=delete_special&id=5" onclick="return confirm('WARNING: This will remove the special from the website.')">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr><tr id="desc_5" style="display:none"><td colspan=3><b>Current Destinations</b><br>
<div id="show_5">
<table border=0 width=300>
<tr><td width="20">
<form id="formD57" name="formD57" action="ajax_add_special_to_destination.php">
<input name="special_id" value="5" id="special_id" type="hidden">
<input name="destination" value="10" id="destination" type="hidden">
<input name="sd" value="57" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Belize Aggressor II from this special.')">
</form></td><td> Belize Aggressor II</td></tr></table>
<script>
$("#formD57").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD37" name="formD37" action="ajax_add_special_to_destination.php">
<input name="special_id" value="5" id="special_id" type="hidden">
<input name="destination" value="20" id="destination" type="hidden">
<input name="sd" value="37" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Dominican Republic from this special.')">
</form></td><td> Dominican Republic</td></tr></table>
<script>
$("#formD37").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD33" name="formD33" action="ajax_add_special_to_destination.php">
<input name="special_id" value="5" id="special_id" type="hidden">
<input name="destination" value="27" id="destination" type="hidden">
<input name="sd" value="33" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Komodo Dancer - Alor from this special.')">
</form></td><td> Komodo Dancer - Alor</td></tr></table>
<script>
$("#formD33").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD34" name="formD34" action="ajax_add_special_to_destination.php">
<input name="special_id" value="5" id="special_id" type="hidden">
<input name="destination" value="9" id="destination" type="hidden">
<input name="sd" value="34" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Palau from this special.')">
</form></td><td> Palau</td></tr></table>
<script>
$("#formD34").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD49" name="formD49" action="ajax_add_special_to_destination.php">
<input name="special_id" value="5" id="special_id" type="hidden">
<input name="destination" value="23" id="destination" type="hidden">
<input name="sd" value="49" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Wind Dancer from this special.')">
</form></td><td> Wind Dancer</td></tr></table>
<script>
$("#formD49").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
<form id="form5" name="form5" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="5">
Add Destination: <select name="destination_id" id="destination_id"><option value="10">Belize Aggressor II</option><option value="25">Carib Dancer</option><option value="11">Cayman Islands</option><option value="17">Cocos Island, Costa Rica</option><option value="20">Dominican Republic</option><option value="14">Galapagos Islands</option><option value="24">Island Dancer II</option><option value="26">Komodo Dancer</option><option value="27">Komodo Dancer - Alor</option><option value="16">Kona, Hawaii</option><option value="19">Maldives</option><option value="9">Palau</option><option value="36">Red Sea</option><option value="21">Sun Dancer</option><option value="28">Thailand Aggressor</option><option value="22">Tropic Dancer</option><option value="13">Turks & Caicos</option><option value="23">Wind Dancer</option></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form5").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_5").html(php_msg); });
})
</script>
</div>
</td></tr><tr><td colspan=3><font color=blue><b>Sharon</b></font></td></tr>
<tr><td colspan=3>July 19, 2013 To July 25, 2014</td></tr>
<tr><td colspan=3>
<form id="setorder_7" name="setorder_7" action="ajax_set_order.php">
<input name="special_id7" id="special_id7" type="hidden" value="7">
<input type="text" size="4" name="order_7" id="order_7" value="4" onblur="doform7();" >
<div style="display:inline;" id="show2_7">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform7() {
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show2_7").html(php_msg); });
}
</script>
[<a href="javascript:void(0);" onclick="toggle('desc_7');">Destinations</a>] [<a href="index.php?section=update_special&id=7">Edit</a>] [<a href="index.php?section=delete_special&id=7" onclick="return confirm('WARNING: This will remove the special from the website.')">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr><tr id="desc_7" style="display:none"><td colspan=3><b>Current Destinations</b><br>
<div id="show_7">
<table border=0 width=300>
<tr><td width="20">
<form id="formD46" name="formD46" action="ajax_add_special_to_destination.php">
<input name="special_id" value="7" id="special_id" type="hidden">
<input name="destination" value="22" id="destination" type="hidden">
<input name="sd" value="46" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Tropic Dancer from this special.')">
</form></td><td> Tropic Dancer</td></tr></table>
<script>
$("#formD46").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_7").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD44" name="formD44" action="ajax_add_special_to_destination.php">
<input name="special_id" value="7" id="special_id" type="hidden">
<input name="destination" value="13" id="destination" type="hidden">
<input name="sd" value="44" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Turks & Caicos from this special.')">
</form></td><td> Turks & Caicos</td></tr></table>
<script>
$("#formD44").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_7").html(php_msg); });
})
</script>
<form id="form7" name="form7" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="7">
Add Destination: <select name="destination_id" id="destination_id"><option value="10">Belize Aggressor II</option><option value="25">Carib Dancer</option><option value="11">Cayman Islands</option><option value="17">Cocos Island, Costa Rica</option><option value="20">Dominican Republic</option><option value="14">Galapagos Islands</option><option value="24">Island Dancer II</option><option value="26">Komodo Dancer</option><option value="27">Komodo Dancer - Alor</option><option value="16">Kona, Hawaii</option><option value="19">Maldives</option><option value="9">Palau</option><option value="36">Red Sea</option><option value="21">Sun Dancer</option><option value="28">Thailand Aggressor</option><option value="22">Tropic Dancer</option><option value="13">Turks & Caicos</option><option value="23">Wind Dancer</option></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form7").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_7").html(php_msg); });
})
</script>
</div>
</td></tr><tr><td colspan=3><font color=blue><b>test</b></font></td></tr>
<tr><td colspan=3>July 22, 2013 To July 29, 2013</td></tr>
<tr><td colspan=3>
<form id="setorder_12" name="setorder_12" action="ajax_set_order.php">
<input name="special_id12" id="special_id12" type="hidden" value="12">
<input type="text" size="4" name="order_12" id="order_12" value="5" onblur="doform12();" >
<div style="display:inline;" id="show2_12">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform12() {
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show2_12").html(php_msg); });
}
</script>
[<a href="javascript:void(0);" onclick="toggle('desc_12');">Destinations</a>] [<a href="index.php?section=update_special&id=12">Edit</a>] [<a href="index.php?section=delete_special&id=12" onclick="return confirm('WARNING: This will remove the special from the website.')">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr><tr id="desc_12" style="display:none"><td colspan=3><b>Current Destinations</b><br>
<div id="show_12">
<form id="form12" name="form12" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="12">
Add Destination: <select name="destination_id" id="destination_id"><option value="10">Belize Aggressor II</option><option value="25">Carib Dancer</option><option value="11">Cayman Islands</option><option value="17">Cocos Island, Costa Rica</option><option value="20">Dominican Republic</option><option value="14">Galapagos Islands</option><option value="24">Island Dancer II</option><option value="26">Komodo Dancer</option><option value="27">Komodo Dancer - Alor</option><option value="16">Kona, Hawaii</option><option value="19">Maldives</option><option value="9">Palau</option><option value="36">Red Sea</option><option value="21">Sun Dancer</option><option value="28">Thailand Aggressor</option><option value="22">Tropic Dancer</option><option value="13">Turks & Caicos</option><option value="23">Wind Dancer</option></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form12").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_12").html(php_msg); });
})
</script>
</div>
</td></tr></table></td>
<td valign=top><table border=0 width=100%><tr><td colspan=3><font color=blue><b>Wine Appreciation Charters 2</b></font></td></tr>
<tr><td colspan=3>July 1, 2013 To August 3, 2013</td></tr>
<tr><td colspan=3>
<form id="setorder_6" name="setorder_6" action="ajax_set_order.php">
<input name="special_id6" id="special_id6" type="hidden" value="6">
<input type="text" size="4" name="order_6" id="order_6" value="1" onblur="doform6();" >
<div style="display:inline;" id="show2_6">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform6() {
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show2_6").html(php_msg); });
}
</script>
[<a href="javascript:void(0);" onclick="toggle('desc_6');">Destinations</a>] [<a href="index.php?section=update_special&id=6">Edit</a>] [<a href="index.php?section=delete_special&id=6" onclick="return confirm('WARNING: This will remove the special from the website.')">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr><tr id="desc_6" style="display:none"><td colspan=3><b>Current Destinations</b><br>
<div id="show_6">
<table border=0 width=300>
<tr><td width="20">
<form id="formD38" name="formD38" action="ajax_add_special_to_destination.php">
<input name="special_id" value="6" id="special_id" type="hidden">
<input name="destination" value="11" id="destination" type="hidden">
<input name="sd" value="38" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Cayman Islands from this special.')">
</form></td><td> Cayman Islands</td></tr></table>
<script>
$("#formD38").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_6").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD47" name="formD47" action="ajax_add_special_to_destination.php">
<input name="special_id" value="6" id="special_id" type="hidden">
<input name="destination" value="20" id="destination" type="hidden">
<input name="sd" value="47" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Dominican Republic from this special.')">
</form></td><td> Dominican Republic</td></tr></table>
<script>
$("#formD47").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_6").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD39" name="formD39" action="ajax_add_special_to_destination.php">
<input name="special_id" value="6" id="special_id" type="hidden">
<input name="destination" value="21" id="destination" type="hidden">
<input name="sd" value="39" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Sun Dancer from this special.')">
</form></td><td> Sun Dancer</td></tr></table>
<script>
$("#formD39").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_6").html(php_msg); });
})
</script>
<table border=0 width=300>
<tr><td width="20">
<form id="formD40" name="formD40" action="ajax_add_special_to_destination.php">
<input name="special_id" value="6" id="special_id" type="hidden">
<input name="destination" value="28" id="destination" type="hidden">
<input name="sd" value="40" id="sd" type="hidden">
<input name="action" value="del" id="action" type="hidden">
<input type="image" src="red-x.png" width="20" border="0" onclick="return confirm('You are about to remove destination Thailand Aggressor from this special.')">
</form></td><td> Thailand Aggressor</td></tr></table>
<script>
$("#formD40").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_6").html(php_msg); });
})
</script>
<form id="form6" name="form6" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="6">
Add Destination: <select name="destination_id" id="destination_id"><option value="10">Belize Aggressor II</option><option value="25">Carib Dancer</option><option value="11">Cayman Islands</option><option value="17">Cocos Island, Costa Rica</option><option value="20">Dominican Republic</option><option value="14">Galapagos Islands</option><option value="24">Island Dancer II</option><option value="26">Komodo Dancer</option><option value="27">Komodo Dancer - Alor</option><option value="16">Kona, Hawaii</option><option value="19">Maldives</option><option value="9">Palau</option><option value="36">Red Sea</option><option value="21">Sun Dancer</option><option value="28">Thailand Aggressor</option><option value="22">Tropic Dancer</option><option value="13">Turks & Caicos</option><option value="23">Wind Dancer</option></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form6").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_6").html(php_msg); });
})
</script>
</div>
</td></tr></table></td>
</tr>
</table>
</p></div></div></div></div></div>
<div id="footer">
© 2013 WayneWorks Marine
</div>
</body></html>ASKER
here is my php class file:
public function all_specials($type) {
$sql = "
SELECT
`id`,
`title`,
`order`,
DATE_FORMAT(`start_date`, '%M %e, %Y') AS 'start_date',
DATE_FORMAT(`end_date`, '%M %e, %Y') AS 'end_date'
FROM
`specials`
WHERE
`type` = '$type'
ORDER BY `order` ASC
";
$result = $this->new_mysql($sql);
print "<table border=0 width=100%>";
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
print "<tr><td colspan=3><font color=blue><b>$row[title]</b></font></td></tr>
<tr><td colspan=3>$row[start_date] To $row[end_date]</td></tr>
<tr><td colspan=3>
";
?>
<form id="setorder_<?=$row['id'];?>" name="setorder_<?=$row['id'];?>" action="ajax_set_order.php">
<input name="special_id<?=$row['id'];?>" id="special_id<?=$row['id'];?>" type="hidden" value="<?=$row['id'];?>">
<input type="text" size="4" name="order_<?=$row['id'];?>" id="order_<?=$row['id'];?>" value="<?=$row['order'];?>" onblur="doform<?=$row['id'];?>();" >
<div style="display:inline;" id="show2_<?=$row['id'];?>">Waiting for data</div>
</form>
<script type="text/javascript" language="javascript">
function doform<?=$row['id'];?>() {
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show2_<?=$row['id'];?>").html(php_msg); });
}
</script>
<?php
print "
[<a href=\"javascript:void(0);\" onclick=\"toggle('desc_$row[id]');\">Destinations</a>] [<a href=\"index.php?section=update_special&id=$row[id]\">Edit</a>] [<a href=\"index.php?section=delete_special&id=$row[id]\" onclick=\"return confirm('WARNING: This will remove the special from the website.')\">Delete</a>]</td></tr>
<tr><td colspan=3> </td></tr>";
print "<tr id=\"desc_$row[id]\" style=\"display:none\"><td colspan=3>";
$destinations = "";
$result2 = $this->get_destinations();
if ($result2->num_rows > 0) {
while($row2 = $result2->fetch_assoc()) {
$destinations .= "<option value=\"$row2[id]\">$row2[title]</option>";
}
}
?>
<b>Current Destinations</b><br>
<div id="show_<?=$row['id'];?>">
<?php
$this->show_destinations_list($row['id']);
?>
<form id="form<?=$row['id'];?>" name="form<?=$row['id'];?>" action="ajax_add_special_to_destination.php">
<input name="special_id" type="hidden" value="<?=$row['id'];?>">
Add Destination: <select name="destination_id" id="destination_id"><?=$destinations;?></select>
<input type="submit" value="Add Destination" />
</form>
<script>
$("#form<?=$row['id'];?>").submit(function(event) {
event.preventDefault();
$.post($(this).attr("action"),$(this).serialize(), function(php_msg) { $("#show_<?=$row['id'];?>").html(php_msg); });
})
</script>
</div>
<?php
print "</td></tr>";
}
}
print "</table>";
}
Ok there is another issue, the scope of the "this" variable in each function is referencing the input element, not the form.
It should be:
It should be:
function doform4() {
$.post($(this).form.attr("action"),$(this).form.serialize(), function(php_msg) { $("#show2_4").html(php_msg); });
} ASKER
Thanks will give this a try in the morning. I actually now have a few other areas where I want to use onchange or onblur so hopefully this will solve it for me. Thanks for your hard work so far!!!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
YOU ARE THE MAN!!!!!!!!!!!!!!!!!!!!!!!
I gather that did it for you :-) thanks for the points
ASKER
YES and it has allowed me to apply the onblur in my next php class file where I am doing multiple dropdowns. Working like a champ!
Open in new window
I have a working example at http://jsfiddle.net/webdevWebDevEM