Develop Reference

Get string from javascript on the same page

Problem is that i have dynamic changing script for mysql query
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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 (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
I need to get str from this code to php.
from the html point of view i get string from
<select name="users" onchange="showUser(this.value)">
adn in the other file getuser.php I have
$q = $_GET['q'];
$sql="SELECT * FROM articles WHERE type = '".$q."'";
The biggest problem is that i put onchange this parameters so i can get values to my page without refreshing it. But now i cant get value from combobox to php.
How can i do this ???
Thanks in advance

'onchange' starts only one java script

Hello I have a "select" drop down, with 2 "onchange" actions attached
echo "<select id='selecttask' name='task' onchange='showpcaction(this.value);showpcinterview(this.value);'>";
echo "<option disabled selected>";
while ($row = db2_fetch_assoc($stmt)) {
echo "<option value='".$row['TASK_NAME']."'>".$row['TASK_NAME']."`</option>";}
echo "</select>";`
the problem is that only ONE (it's always the sedond one) is actually started. I can get one of them to start but not BOTH.
I did this before with no problems so not sure what's up.
here are the 2 java scripts:
function showpcinterview(task_name) {
if (task_name == 'Interview'){
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("pc_interview").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","showpcinterview.php",true);
xmlhttp.send();
}
else{
document.getElementById("pc_interview").innerHTML ="";
}
}
function showpcaction(task_name) {
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("pc_action").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","showpcaction.php?task_name=" + task_name,true);
xmlhttp.send();
}

Try to simply declare your xmlhttp within your functions scope by using the var keyword.
In your case, as no var statement is present, the object is global and so, declared a first time in your first function, placing a listener and sending the request, but then imlmediately in your second function you redeclare this object, thus killing the readystate listener.
So just declare your object like this in both functions: var xmlhttp = new XMLHttpRequest();

Cannot click on the content which is loaded through ajax function

Currently, I cannot load the second content using ajax. Actually, I have loaded the first content using ajax. In order to go to the second content, i need to call the ajax function but after i click to load the second content using ajax it does not work. I have checked my code, its working fine if i directly call the second ajax function, unless i call the first ajax function after that the ajax is not working again. Are there any ways to solve this problem.
This is the first ajax code:
function showMusic(str) {
if (str == "") {
document.getElementById("albums").innerHTML = "";
return;
} else {
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("albums").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getAlbums.php?q="+str,true);
xmlhttp.send();
}
}
The above function works. The above function is at another php file
This is the second ajax code:
$(document).ready(function(){
function showArtistDetails(str) {
if (str == "") {
alert("hi");
document.getElementById("artist").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
alert("hi1");
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
alert("hi2");
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("artist").innerHTML = xmlhttp.responseText;
alert("hi3");
}
};
xmlhttp.open("GET","getArtist.php?title="+str,true);
alert("hi4");
xmlhttp.send();
alert("hi5");
}
}
$("#clickme").click(showArtistDetails);
});
This is the php code which is at another php file:
echo "<td id=\"clickme\">" . $row['CDTitle'] . "</td>";
I have been trying to solve this for the past 2 days but i am unable to solve it. Some are saying its a bug. But i really i dont know what causes this problem. Thanks in advance.

Reload before response and uncheck radio button

I am getting response without a refresh! When the user clicks on the button, I want it to reload and then display the response!How can I do that?
And What should I do to uncheck the radio box after the response?
<script>
function sendid(attack) {
var att;
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("result").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "battleuser2.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("att=" + attack);
}
</script>
This is my radio form:
<input type="radio" value="10" id="radioButtonId" onClick="sendid(this.value)"/> Attack 1
<input type="radio" value="20" id="radioButtonId" onClick="sendid(this.value)"/> Attack 2

No, you can't reload and display the response unless you are making the ajax call on page load again.
else you need to store the previous response in localstorage and access it from it when the page reloads again.
Regarding unchecking the radio button after the response, Insert the following code inside the if condition:
document.getElementById("radioButtonId").checked = false;
example:
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
document.getElementById("radioButtonId").checked = false;
}

2 select menu filters with Jquery disable, pass values to one function

I have 2 select menus whose values i want to get passed to a function.
I am trying to use jquery to disabled the 2nd select until the first one is selected.
I am having 2 issues with this:
My jquery does not seem to want to disable the 2nd select menu.
Also how can i pass the 1st select menu value to the onchange
function value in the second select menu.
Thanks in advance
Function
function showlog(str, username) {
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", "getlog.php?username=" + username + "&q=" + str, true);
xmlhttp.send();
}
JQUERY
$(document).ready(function() {
var linkOrder = [
"employee_user",
"acyear"
];
$('select.linked').not('#' + linkOrder[0]).attr('disabled', 'disabled');
$('.linked').change(function() {
var id = $(this).attr('id');
var index = $.inArray(id, linkOrder);
$('#' + linkOrder[index + 1]).removeAttr('disabled');
});
});
FORM
<form>
<select id="employee_user" name="employee_user" class="linked">
<option value="">Select</option>
</select>
<select id="acyear" name="acyear" onchange="showlog(this.value, 1st select value" class="linked">
<option value=""></option>
</select>
</form>