I have 2 functions that I would like to call from one dropdown menu. It seems I can only get one to work, but not both. Looking for some help sorting this out. Here is the code, thank you.
Function 1
<script type="text/javascript">
function getCredit(str)
{
if (str=="")
{
document.getElementById("credit").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("credit").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcredit.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is function 2.
<script type="text/javascript">
function getTerms(str)
{
if (str=="")
{
document.getElementById("terms").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("terms").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","customertermsdropdownquery.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is the form dropdown that calls them.
<td><select name="company" onchange="getTerms(this.value);getCredit(this.value);">
<?php while($row = mysql_fetch_array($result)) {
echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>"; } ?></select></td>
I use div in the form to display php.
<div id="terms"></div>
and
<div id="credit"></div>
I can get either one to work by itself, just not together. Thanks for your help.
Totally understandable that you want to keep them separated. How about create a new function like this.
function getTermsAndCredits(value) {
getTerms(value);
getCredits(value);
}
Then in the onchange event call it like this
<td><select name="company" onchange="getTermsAndCredits(this.value);">
Here is a fiddle which should give you a better idea. I don't believe it's necessary to call the onload functions as you have in your code currently.
Related
i want to send a value to multiple url's in php using ajax.. in the example below, i want to send the request to getuser.php and getuser2.php and want to return the response to element id TXTHINT and TXTHINT2 .. the below code does not work .. where am i going wrong.?
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?city_main="+str,true);
xmlhttp.send();
function showUser2(str) {
if (str=="") {
document.getElementById("txtHint2").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser2.php?city_main="+str,true);
xmlhttp.send();
}
}
Use this instead of you code (yours is really ugly and the nesting is weird):
function fillHint(hintID, url, str) {
if (str=="") {
document.getElementById(hintID).innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(hintID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url+".php?city_main="+str,true);
xmlhttp.send();
}
function showUser(str) {
fillHint("txtHint", "getuser", str);
}
function showUser2(str) {
fillHint("txtHint2", "getuser2", str);
}
function someMasterCallFn() {
if (...) { // if first should be called
showUser(theString);
} else if (...) { // if second should be called
showUser2(theString);
}
}
And if you want to call both functions you have two possibilities:
function showUser(str) {
fillHint("txtHint", "getuser", str);
showUser2(str);
}
function showUser2(str) {
fillHint("txtHint2", "getuser2", str);
}
or
function someMasterCallFn() {
showUser(theString);
showUser2(theString);
}
After much research and failure, I am trying to refresh multiple div's from one onclick event on a dropdown. I can refresh single div's with the onclick event from the dropdown but cannot work out multiple. Several stackoverflow pages refer to similar issues with onclick but not a dropdown unless I missed it.
Here is what I have so far.
<script>
function load_location(str)
{
if (str=="")
{
document.getElementById("location_dd").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("location_dd").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ticket_new_user_location.php?property_id="+str,true);
xmlhttp.send();
}
function load_drive_mapping(str)
{
if (str=="")
{
document.getElementById("drive_mapping_cb").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("drive_mapping_cb").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ticket_new_user_drive_mapping.php?property_id="+str,true);
xmlhttp.send();
}
DROPDOWN
<select class="required" name="select_autos" onchange="load_location(this.value)">
<option value="">Select Auto</option>
<option value="1">Volvo</option>
<option value="2">Ford</option>
<option value="3">BMW</option>
<option value="4">SAAB</option>
</select>
DIV's
<div id="drive_mapping_cb">
I can make each one work individually by switching the onclick from load_location(this.value) to load_drive_mapping(this.value) but cannot get both to work on a single onclick event.
Any help greatly appreciated.
Just run both functions
onchange="load_location(this.value); load_drive_mapping(this.value);"
I need to hit a url by either means and after the response I just want to generate an xml showing done.
Here is the code that is trying to generate the XML and before this all the JS is placed:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="myDiv" style="display:none;"></div>
<script type="text/javascript">
<?php echo "var link = '".$url."';"; ?>
loadXMLDoc(link);
function loadXMLDoc(link)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",link,true);
xmlhttp.send();
}
</script>
$data = "";
header('Content-type: text/xml');
$data="<parameters>";
$data .= "<result>Product Added To The Cart</result>";
$data .= "</parameters>";
echo $data;
Here is the output I am getting
This page contains the following errors:
error on line 5 at column 1: Extra content at the end of the document
Below is a rendering of the page up to the first error.
Here is the source of the output I am getting:
<script type="text/javascript">
var link = 'http://obaoja.com/checkout/cart/add/product/7027/qty/1/'; loadXMLDoc(link);
function loadXMLDoc(link)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",link,true);
xmlhttp.send();
}
</script>
<parameters><result>Product Added To The Cart</result></parameters>
I just need <parameters><result>Product Added To The Cart</result></parameters> in XML format.
<script type="text/javascript">
function centerItem(id,size)
{
var pad = (window.innerWidth - size)/2;
document.getElementById(id).style.marginLeft = pad+"px";
document.getElementById(id).style.marginRight = pad+"px";
}
function login()
{
document.getElementById('box').innerHTML="<img src="img/pleasewait.gif" />";
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('box').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://[lan ip]/Athena/lib/ajax/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("email="+email+"&pass="+pass);
}
</script>
That is in my <head> section, and I'm calling it using this.
<script type="text/javascript">centerItem('login',210);</script>
However, I'm getting an error saying "Uncaught ReferenceError: centerItem is not defined
(anonymous function)"
Any thoughts?
document.getElementById('box').innerHTML="<img src="img/pleasewait.gif" />";
Should really be:
document.getElementById('box').innerHTML="<img src=\"img/pleasewait.gif\" />"
you need to escape the double quotes when creating the image tag.
And you should cache your selected elements. The result would be something like:
function centerItem(id, size) {
var pad = (window.innerWidth - size)/2,
elem = document.getElementById(id);
elem.style.marginLeft = pad+"px";
elem.style.marginRight = pad+"px";
}
function login() {
var xmlhttp;
var box = document.getElementById('box');
box.innerHTML="<img src=\"img/pleasewait.gif\" />";
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
box.innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("POST","http://[lan ip]/Athena/lib/ajax/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("email="+email+"&pass="+pass);
}
I want to get an automatic search result, and on one page it DOES work but on the other NOT. Could you tell me what te problem is?
WORKING:
function showUser(str)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ordertabel.php?search="+str,true);
xmlhttp.send();
}
NOT WORKING:
function showUser(str,str)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","klanttabel.php?search="+str"&search2="+str,true);
xmlhttp.send();
}
Please note that with the NOT working code there are 2 inputs.
Thanks in advance!
I guess it's an url encoding problem. Try encoding:
xmlhttp.open("GET", "klanttabel.php?search=" + encodeURIComponent(str) + "&search2=" + encodeURIComponent(str), true);
Also notice that you are missing a + in your string concatenation.
Probably because you use two variables in your function method with the same name and you are missing a PLUS sign in your xmlhttp.open() method...
Try:
function showUser(str, str2) {
...code...
xmlhttp.open("GET", "klanttabel.php?search="+str+"&search2="+str2, true);
xmlhttp.send();
}
Another suggestion, making Ajax calls is way easier when using JQuery.
$.ajax({
type: "GET",
url: "klanttabel.php",
data: ({search : str,
search2 : str2}),
success: function(data) {
$('#txtHint').html(data);
}
});
Your parameters are named the same... change them.
function showUser(strA,strB)
and change them later in the function:
xmlhttp.open("GET","klanttabel.php?search=" + strA + "&search2=" + strB,true);
You also had an error where a + was missing.
You are missing plus sign
xmlhttp.open("GET","klanttabel.php?search="+str"&search2="+str,true);
plus sign after first str
xmlhttp.open("GET","klanttabel.php?search="+str+"&search2="+str,true);