Disable a radio button after confirm - javascript

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/

Related

How will I show the data from my database when I view the page based on what is selected in my combo box?

When I view my sample.php page, I only see my combo box, and when I start to select a value from my combo box, that's when my data from database show which is from my getyear.php.
What I want to do is the moment I view that page with the default value which is, for instance, 2014-2016, I can already see the data from my getyear.php
This is what I have in my javascript:
/* event handler ~ no ajax function shown */
function showofficers(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","getyear.php?q="+str,true);
xmlhttp.send();
}
$(document).ready(function(){
var year = document.getElementById("year").value;
if (year =="") {
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;
}
}
mlhttp.open("GET","get_year.php?q="+year,true);
xmlhttp.send();
});
My div is:
<div id="txtHint"></div>
Just continue with:
if (year =="") {
document.getElementById("txtHint").innerHTML="";
return;
} else {
showofficers(year);
};
and make sure the function showofficers is in context.

pass text box value from one page to another page without page refresh?

i have two text box i am trying to pass that textbox value from one page to another page with out page refresh i am using ajax for this but i am able to achive only one text box value
Here is my code
<script>
function loadXMLDoc() {
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", "testing.php?message="+ document.getElementById("message").value+"service="+document.getElementById("city").value, true);
xmlhttp.send();
}
//return false;
</script>
i think i am wrong here in this line
xmlhttp.open("GET", "testing.php?message="+ document.getElementById("message").value+"service="+document.getElementById("city").value, true);
How can i achieve my goal
Any help will be apprecieted
Your query string pairs need to be seperated with an ampersand:
xmlhttp.open("GET", "testing.php?message="+ document.getElementById("message").value+"&service="+document.getElementById("city").value, true);
//Here -----^

How to pass input file name to xmlhttp.open as variable

I want to pass name of selected file. It works if i put "filename" instead url. Here is my test code. Please help me to get this working.
<input id="upload" type="file" />
<script>
document.getElementById('upload').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
var url='"'+filename+'"';
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",url,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var tag=xmlDoc.getElementsByTagName("tag");
}
</script>

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)
}
}

Categories