2 functions onchange event at same time separately - javascript

So what i'm looking for is a way to trigger 2 function events onchange with my first option, i've looked up a few examples on other sites an neither of them works. But what i want is when this.value is selected, for the function to open 2 separate options via the selection.
So if category is Dogs it does showSub(Dogs) and showSize(Dogs) at the same time and sends to 2 different php page calls, IF thats possible.
//index.php
<select name="category" onChange="showSub(this.value);showSize(this.value)" style="width:200px;">
<option value="">Select Category</option>
Send to php to get actual options.
</select>
//foo.js
function showSub(str)
{
if (str=="") {
document.getElementById("txtSub").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("txtSub").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getSub.php?q="+str,true);
xmlhttp.send();
}
function showSize(str)
{
if (str=="") {
document.getElementById("txtSize").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("txtSize").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getSize.php?q="+str,true);
xmlhttp.send();
}
//rest of index.php
<div id="txtSub"></div>
<div id="txtSize"></div>

Use var to declare all variables. Your showSub() and showSize() functions both use a variable xmlhttp that is not declared with var, which makes it global - so when you call showSize() it overwrites the xmlhttp object from showSub() (which is why you get the effect mentioned in a comment where "with the current code, the showsize only shows").
So add this line to the start of each function:
var xmlhttp;
And better yet, move the if/else out into a separate function that returns an xmlhttp object rather than repeating that code in both functions:
function getXMLHttp() {
return window.XMLHttpRequest ? new XMLHttpRequest() // newer browsers
: new ActiveXObject("Microsoft.XMLHTTP"); // old IE
}
// and then within your other functions:
var xmlhttp = getXMLHttp();

Related

Send ajax GET request if condition is met

This is my JS code. However, it only executed the last ajax request. Is there anyway to put them in If statement so that
if (main-content.html is loaded), it will execute xmlhttp.open("GET","main-content-city.php?q="+str,true)
xmlhttp.send();
elseif (child-content is loaded), execute: xmlhttp.open("GET","child-content-city.php?q="+str,true);
xmlhttp.send();
<script>
function sortResult(str)
{
if (str=="")
{
document.getElementById("result").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("result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","main-content-city.php?q="+str,true);
xmlhttp.send();
xmlhttp.open("GET","child-content-city.php?q="+str,true);
xmlhttp.send();
}
</script>
My index.php file is like this and using GET method to navigate between main-content.html and child-content.html.
<?php
include('header.html');
include('main-content.html');
include('footer.html');
?>
My main-content and child-content is like this:
<div id="result">
Content displayed here
</div>
Take all the following code which will be identical for both ajax calls and make a separate function i..e
function ajaxCall (){
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("result").innerHTML=xmlhttp.responseText;
}
}
}
Then when you call ajaxCall you simply add relevant SEND:
function whatEver(){
if (main-content.html is loaded)
{ ajaxCall();
xmlhttp.open("GET","main-content-city.php?q="+str,true);
xmlhttp.send();
}
else if (child-content is loaded)
{
ajaxCall();
xmlhttp.open("GET","child-content-city.php?q="+str,true);
xmlhttp.send();
}
}

AJAX - PHP to Javascript Multi Array and Split

New to JSON/AJAX here but trying...
PHP page appears to be returning [{"id":"1"},{"id":2}] to my javascript.
How would I convert it to something useful like a dropdown in html?
Code:
<script>
function show(str) {
if (str=="") {
var ajaxDisplay=xmlhttp.responseText;
var res=ajaxDisplay.split("#");
document.getElementById("ajax1").innerHTML=res[1];
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) {
var ajaxDisplay=xmlhttp.responseText;
var res=ajaxDisplay.split("#");
document.getElementById("ajax1").innerHTML=res[0];
}
}
xmlhttp.open("GET","get.php?q="+str,true);
xmlhttp.send();
}
</script>
<div id='ajax1'><b>ID dropdown will be listed here.</b></div>
I am not sure why you declared the variables twice, but I think this may help If you are asking what I think.
function showUser(fo,to)
{
if (fo=="")
{
document.getElementById("show").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)
{
var arr=xmlhttp.responseText.split(":||:");//I used this as the delimiter
document.getElementById('show').innerHTML=arr[0];
document.getElementById('show1').innerHTML=arr[1];
}
}
xmlhttp.open("GET","some.php?q="+ fo + "&w=" + to,true);
xmlhttp.send();
}
And the php side is different than normal, you;ll need something like this.
if (!$result=mysqli_query($con,$sql))
{
die('Could not get data: ' . mysqli_error($sql));
}
$test=mysqli_fetch_all($result,MYSQLI_ASSOC);//this was key to fetching the array properly for display
$length=count($test);
$half_length=$length/2;
//echo $half_length."<br />";/used for testing
$test12=array_chunk( $test,$half_length+.5,false);//here use true to preserve keys, worked both ways for me
$test5=$test12[0];
$test6=$test12[1];
while(list($key,$val)=each($test5))
{
echo "<p>".$val[$colunm_name]."<p/><br />";//Here you can put in the tags you want and will list your array in the format you want
}
echo ":||:";//Make sure the delimiter is out of the loop
while(list($key2,$val2)=each($test6) )
{
echo "<p>".$val[$colunm_name]."<p/><br />";//Here you can put in the tags you want
//echo "result_count_".count($test)."_-st<br/>";//used for testing
Took me a while to get this, I hope it helps.

Combine AJAX request to load new page with variables

I currently have three stored JS variables (wordChoiceOne, wordChoiceTwo, wordChoiceThree). Now that I have these stored, I want to run a function called saveUsername(). This function should do the following:
Take the jQuery variables above and pass them into PHP and load the file register-form.php into the div register-login-form
So I currently have the following AJAX request, but this only handles the reloading of the form. I've never combined jQuery with PHP before so how can I add the part in this to pass the three variables?
function saveUsername(wordChoiceOne, wordChoiceTwo, wordChoiceThree){
{
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("login-register-form").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","register-form.php",true);
xmlhttp.send();
}
What do I add to this to pass the three variables and convert them to PHP vars like with a $ sign?
function saveUsername(wordChoiceOne, wordChoiceTwo, wordChoiceThree){
{
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("login-register-form").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","register-form.php?one="+wordChoiceOne+"&two="+wordChoiceTwo+"&three="+wordChoiceThree,true);
xmlhttp.send();
}
Then PHP side, use $_GET['one'], $_GET['two'] and $_GET['three']

multiple ajax calls using only javascript

isn't it possible to execute multiple ajax calls using javascript only and without using Jquery. I tried the below javascript code with two ajax calls but the code is not working when I place the second ajax call
<script type="text/javascript">
var class1;
var class2;
var sec1;
var sec2;
function func()
{
class1 = document.getElementById('selcla');
class2 = class1.options[class1.selectedIndex].value;
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("secdiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getsec.php?q="+class2,true);
xmlhttp.send();
}
function funcsec()
{
sec1 = document.getElementById('selsec');
sec2 = sec1.options[sec1.selectedIndex].value;
alert("selecting class and section details " + class2 + " " + sec2 );
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)
{
alert("successfully received " );
document.getElementById("studiv").innerHTML=xmlhttp.responseText;
}
else
alert("unsuccessful ajax second call ");
}
xmlhttp.open("GET","getstu.php?x="+class2"&y="+sec2,true);
xmlhttp.send();
}
It is, but you need a different "xmlhttp" handler for each request you make.
Setup a new xmlhttp object and make a second request with the new object.
My suggestion is to break out the part with you initializing the xmlhttp object, into a standalone function, and use it to create a few instances of those objects.
However I must advise against such an approach. It is better to use a library for ajax requests.

To call 2 ajax functions on an onchange event

I want 3 ajax functions to be called simultaneously on an onchange event of a dropdown.
I tried like calling the 2nd function inside if (xmlhttp1.readyState==4 && xmlhttp1.status==200) of the 1st function and 3rd function inside if (xmlhttp1.readyState==4 && xmlhttp1.status==200) of the 2nd function.
But only the 1st function is called ,even second function is not called.
Any other ways to achieve it ?
Below are the functions:
function list1(ob){
var id= ob;
var xmlhttp1;
if (window.XMLHttpRequest){//for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp1=new XMLHttpRequest();
}else{//for IE6, IE5
xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp1.onreadystatechange = function(){
if (xmlhttp1.readyState==4 && xmlhttp1.status==200){
alert("ajax1");
list2(id);
}
}
xmlhttp1.open("POST","/ajax/listSites.php",true);
xmlhttp1.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlhttp1.send("id="+id);
}
function list2(obb){
var idd=obb;
var xmlhttp;
if (window.XMLHttpRequest){// 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){
alert("ajax2");
list3(idd);
}
}
xmlhttp.open("POST","/ajax/access_points_do_actions.php",true);
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlhttp.
send("sel_system_id="+idd+
"&action="+'LIST_SLAVE_FOR_ACCESS_POINT');
}
// only alert ajax1 is displayed
You can just chain asynchronous calls like this:
onchange="Function1(); Function2();"
Update:
Your code:
<select id="se" onchange="javascript:list1(this.value); //this is current code
should be something like:
<select id="se" onchange="Javascript: list1(this); list1(this);">

Categories