We Keep Coding

Disable a radio button after confirm

I tried to research and tried many options but still not working. After the user click the radio button and confirm it i need to disable the radio buttons
<script type="text/javascript">
function getVote(int) {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (confirm("Your vote is for " + int)) {
xmlhttp.open("GET", "save.php?vote=" + int, true);
xmlhttp.send();
window.location.reload();
} else {
alert("Choose another candidate ");
}
}
function getPosition(String) {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "vote.php?position=" + String, true);
xmlhttp.send();
}
</script>
and this is the radio button that the user will click
echo "<td><input type='radio' name='vote' value='$row[candidate_name]' onclick='getVote(this.value)' /></td>";
this is save.php when the user click the radio button
<?php
require('connection.php');
$vote = $_REQUEST['vote'];
$checkposition=mysql_query("SELECT candidate_position FROM voting_tbCandidates WHERE candidate_name='$vote'");
while ($row=mysql_fetch_array($checkposition)){
session_start();
if($row['candidate_position']=="PRESIDENT"){
$_SESSION['vote_president']=$row['candidate_position'];
}elseif($row['candidate_position']=="VICE"){
$_SESSION['vote_vice']=$row['candidate_position'];
}elseif($row['candidate_position']=="MUSE"){
$_SESSION['vote_muse']=$row['candidate_position'];
}elseif($row['candidate_position']=="SECRETARY"){
$_SESSION['vote_secretary']=$row['candidate_position'];
}elseif($row['candidate_position']=="ESCORT"){
$_SESSION['vote_escort']=$row['candidate_position'];
}elseif($row['candidate_position']=="AUDITOR"){
$_SESSION['vote_auditor']=$row['candidate_position'];
}
}
mysql_query("UPDATE voting_tbCandidates SET candidate_cvotes=candidate_cvotes+1 WHERE candidate_name='$vote'");
mysql_close($con);
?>

You are sending just the value back to the function. It would be easier to send the whole element to the function and pick out the parts that you need. For example:
Change
onclick='getVote(this.value)'
to
onclick='getVote(this)'
Change
function getVote(int)
to
function getVote(obj) {
var int = obj.value;
Before the xmlhttp.open("GET", "save.php?vote=" + int, true); add the line
obj.setAttribute('disabled','disabled'); // I think this would work

set disable property to true on confirm and false for else.
modified function should be look like this
function getVote(obj) {
var int = obj.value;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (confirm("Your vote is for " + int)) {
obj.disabled = true;
//xmlhttp.open("GET","save.php?vote="+int,true);
//xmlhttp.send();
// window.location.reload();
} else {
obj.disabled = false;
alert("Choose another candidate ");
}
}
and pass the object of input element during function call
<td>
<input type='radio' name='vote' value='45' onclick='getVote(this)'/>
</td>
here is working fiddle : https://jsfiddle.net6mcd5bq7/

show result dynamically in search box

I want a search box which shows the result just below it when I click the search button without reloading the page.
for this I've js function called ShowUsers(str)
like this
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 (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
And a html form like this :
<form>
<input type="text" name="q"/>
<script type="text/javascript">var x = document.getElementById("q").value; </script>
<input type="button" value="search" onclick="showUser(x)">
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
I've one php file to show the result called as GetUser.php
I think the var x deos'nt pass to the ShowUser(str) function in the input tag I think this is not a right way to pass a js var into html event
so what can i do to show the data

Access document.getElementById("q").value directly in showUser function rather than passing x to showUser function.
function showUser() {
var str = document.getElementById("txtHint").value;
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 (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}

Using JSON to parse xmlhttp.responseText for populating textboxes

How can JSON be used to parse xmlhttp.responseText? I can't seem to get textboxes populated using the parsed data. I tried using .value and .innerHTML with the dot notation with b.first and b.second used with json_encode from the loadTextBox.php file (see below), but the textboxes won't populate.
Main page code:
function loadDoc()
{
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
//code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var doc = window.document.createElement("doc");
var a = xmlhttp.responseText;
var b = JSON.parse(a);
document.getElementById("textbox").innerHTML=b.first;
document.getElementById("textbox2").innerHTML=b.second;
}
}
xmlhttp.open("GET","loadTextBox.php?id=4",true);
xmlhttp.send();
}
loadTextBox.php code:
<?php
---Placeholder for correct DB login info---
$result = $mysql->query("SELECT column_one FROM table_one");
while ($row = $result->fetch_object())
{
$queryResult[] = $row->present_tense;
}
$textboxValue = $queryResult[0];
$textboxValue2 = $queryResult[2];
echo json_encode(array('first'=>$textboxValue,'second'=>$textboxValue2));
?>

This is fully tested and works. Use as a starting point to accomplish what you are trying to do:
var url = "YOUR.php"
var ajax = new XMLHttpRequest();
ajax.open("GET", url, true);
ajax.send(null);
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && (ajax.status == 200)) {
console.log("ready")
var Data = JSON.parse(ajax.responseText);
console.log(Data);
console.log(Data.first);
} else {
console.log("not ready yet")
}
}
This assumes your JSON output is properly formatted as you stated:
{"first":"radim","second":"radi"}

I have figured out the underlying problem. Extra tags were being sent because I had unnecessary tags in my DB info file. Those tags were being sent in the responseText with {"first":"radim","second":"radi"}. So the code pertaining to ---Placeholder for correct DB login info--- was wrong. I also changed .innerHTML to .value and now it works as intended.
Main page code updated:
function loadDoc()
{
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var a = JSON.parse(xmlhttp.responseText);
document.getElementById("textbox").value=a.first;
document.getElementById("textbox2").value=a.second;
}
}
xmlhttp.open("GET","loadTextBox.php?id=4",true);
xmlhttp.send();
}

Automatically pass the retrieved value from a javascript function to another javascript function?

I have two inline java script functions, one intended to get a token value using xhr and second one will use that value to get the full response from server. But when i uploaded the same on server nothing happened.
Here goes the sample code:
function getUser(user)
{
var xmlhttp;
var result,x,i;
var uservalue=user;
var url="http://abc.xyz.com:8090/uauth/" +uservalue;
///here starts the getToken method..
var tokensave=function getToken(uservalue)
{
var xmlhttp;
var token,a,b;
var url="http://abc.xyz.com:8090/uauth/" +uservalue;
var data="op=login&pass=" +uservalue;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST",url, true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
token="";
a=xmlDoc.getElementsByTagName("token");
token=token + a.childNodes.nodeValue;
document.getElementById("myDiv").innerHTML=token;
}
};
xmlhttp.setRequestHeader("Content-Type", "text/xml");
xmlhttp.send(data);
return token;
}
var header="Xyz-Authorization: "+tokensave;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url, true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
result="";
x=xmlDoc.getElementsByTagName("response");
for (i=0;i<x.length;i++)
{
result=result + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myNewDiv").innerHTML=result;
}
};
xmlhttp.setRequestHeader("Xyz-Authorization: ", +tokensave);
xmlhttp.send();
}
HTML CODE:
<div id="myDiv"></div>
<br />
<br />
<div id="myNewDiv"></div >
<br />
<form>
<input name="textbox" id="textbox" type="text" />
<input name="buttonExecute" onclick="getUser(document.getElementById('textbox').value)" type="button" value="Get User" />
</form>
What's wrong with this apparoach?
Thanks in advance for your valuable help...
mrana

You need to use a return token in the first function and use it like this getUser(getToken(user))

Just create a global variable, and you set change the value inside de function but it's still accesible from a global scope for all the functions you want.
var data = false;
function getData() {
// some ajax...
data = {cool:true};
}
function foo () {
if(data.cool) {
alert (data.cool)
}
}

Dynamically populate dynamically created select list

I'm having a bit of difficulty here; I am using js to dynamically create select boxes, but I need Ajax to fill them with options. So far, my code is returning undefined, and I frankly don't know what to do here. My php returns the info fine, but the js isn't parsing it. Another set of eyes, or another brain full of knowledge would be appreciated here;
function getSkilllist(group) {
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) {
return xmlhttp.responseText;
}
}
xmlhttp.open("GET","skl_lst_gen2.php?group=" + group + "&t=" + Math.random(),true);
xmlhttp.send();
}
function addInput(divName,group) {
var skillst = getSkilllist(group);
var newdiv = document.createElement('div');
newdiv.innerHTML = '<select name="ski[]">' + skillst + '</select> .....
The rest of the function is fine, but the var skillst is returning undefined as stated, and I can't figure out why. I assume it has something to do with strings, but I can't figure out what needs to be done.

Your function does not return anything, which is why it isn't working. Try this:
function getSkilllist(group) {
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 newdiv = document.createElement('div');
newdiv.innerHTML = '<select name="ski[]">' + xmlhttp.responseText + '</select> .....
//place in DOM here
}
}
xmlhttp.open("GET","skl_lst_gen2.php?group=" + group + "&t=" + Math.random(),true);
xmlhttp.send();
}
function addInput(divName,group) {
getSkilllist(group);