I have the following code for a poll:
<div id="pollE2">
How's the weather today?<br />
<form>
<input type="radio" name="voteE2" value="a" onclick="VoteNow(this.value)" /> Good
<input type="radio" name="voteE2" value="b" onclick="VoteNow(this.value)" /> Bad
</form>
</div>
Where the "VoteNow" function looks like this (it send the results to the "resultsE2.php" file...):
function VoteNow(int) {
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("pollE2").innerHTML=xmlhttp.responseText; }
}
xmlhttp.open("GET","resultsE2.php?voteE2="+int,true);
xmlhttp.send(); }
When the user chooses one option from the pull, the results show directly, but I want the user to be able to click on a SUBMIT button before doing it.
I tried to use document.getElementById(formID).submit() but I'm not sure how to incorporate it in the code.
Any suggest
ions?
Change your HTML
<form id="vote-form">
Change your code
function VoteNow(vote) {
//Added line
var xmlhttp;
var vote = getRadioButtonValue();
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("pollE2").innerHTML=xmlhttp.responseText; }
}
xmlhttp.open("GET","resultsE2.php?voteE2="+vote, true);
xmlhttp.send();
}
var form = document.getElementById("vote-form");
form.onsubmit = function {
VoteNow();
// Prevent the form from submitting
return false;
};
function getRadioButtonValue() {
//http://stackoverflow.com/questions/9618504/get-radio-button-value-with-javascript
}
Related
I want to change the value of str used in ajax (str is the string inputted in the html form) part by giving it a variable value, so that by clicking on a button that changes the variable value, the loaded data row in mySQL changes. But it doesn't work. What can I do for this ?
(the ajax works, it's just that the button click doesn't change anything)
Here is the code:
<!DOCTYPE html>
<html>
<head>
<script>
var Pokemon_ID = 0
function changePokemon(str) {
document.getElementById("right-btn").onclick = function() {
Pokemon_ID++;
str = Pokemon_ID
}
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 (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","get_id.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
First name: <input type="text" onkeyup="changePokemon(this.value)">
</form>
<div id="txtHint"></div>
<a id="right-btn" onclick="changePokemon(str)"></a>
</body>
</html>
Just try this out and confirm if it works. I had tried to correct the code according to my understanding of your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function changePokemon() {
let str = document.getElementById("inpStr").value;
let tempStr=parseInt(str)+1;
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 (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","get_id.php?q="+tempStr,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
First name: <input type="text" id="inpStr" onkeyup="changePokemon()">
</form>
<div id="txtHint"></div>
<a id="right-btn" onclick="changePokemon()"></a>
</body>
</html>
Change your HTML codes to
<form>
First name:
<input type="text">
</form>
<div id="txtHint"></div>
<a id="right-btn" onclick="changePokemon(++ Pokemon_ID)">Go</a>
I dont know what does your changePokeMon() function do, but change your script to
var Pokemon_ID = 0
function changePokemon(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 (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
}
xmlhttp.open("GET", "get_id.php?q=" + str, true);
xmlhttp.send();
}
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);
}
i was trying to build a application that demonstrate the use of ajax. as i am a newbie in ajax i couldnt able to find the error for my code. xmlhttp object is creating, rest of the things are not working,
the ready state is not changing to 1 or more than that, i have tried by printing all status values.
<html>
<head>
<title>Home</title>
<script type="text/JavaScript">
function process()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp.readyState==4 && xmlhttp.readyState==0)
{
food= document.getElementById("username").value;
xmlhttp.open("GET","food.php?food="+food,true);
xmlhttp.onreadystatechange=handleServerResponse();
xmlhttp.send();
}
else
{
setTimeout("process()",1000);
}
}
response function,
function handleServerResponse()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlResponse=xmlhttp.ResponseXML;
xmlDocumentElement= xmlResponse.documentElement;
message=xmlDocumentElement.firstChild.data;
document.getElementById("status").innerHTML="message";
setTimeout("process()",1000);
}
}
</script>
</head>
<body >
<form method="post">
<fieldset><center><h2>Login</h2></center>
<label>Username</label>
<input type="text" id="username" value="" maxlength="20" />
<div id="status" ></div>
<input type="button" value=" Login " onClick="process()" />
</fieldset>
</form>
</body>
</html>
php code is below
<?php
echo "<?xml version='1.0' encoding='UTF-8' standalone='yes'?>";
echo "<response";
$food=$_GET['food'];
if($food=="ajith")
echo "Successs";
else
echo "Invalid";
echo "</response>";
?>
var is not optional, use it.
First var xmlhttp; is a local variable, so you would not be able to use it in the other method. Needs to be moved outside of the process function.
Your if check is is impossible
xmlhttp.readyState==4 && xmlhttp.readyState==0
How can something be 2 values at once?
xmlhttp.readyState==4 || xmlhttp.readyState==0
Next issue is the fact you are not assigning an event handler you are calling it
xmlhttp.onreadystatechange=handleServerResponse();
needs to be
xmlhttp.onreadystatechange=handleServerResponse;
There is no ResponseXML, there is responseXML
"message" is a string, not the variable you defined beforehand.
var xmlhttp;
function process () {
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp) {
var food= document.getElementById("username").value;
xmlhttp.open("GET","food.php?food="+food,true);
xmlhttp.onreadystatechange=handleServerResponse;
xmlhttp.send();
} else {
//alert("Can not make Ajax request");
}
}
function handleServerResponse () {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var xmlResponse=xmlhttp.responseXML;
var xmlDocumentElement= xmlResponse.documentElement;
var message=xmlDocumentElement.firstChild.data;
document.getElementById("status").innerHTML = message;
window.setTimeout(process,1000);
}
}
carica.html
<td>
<input type="file" size="30" onchange="preview()" id="upload_immagine">
</td>
<td>
<div id="divImmagine" > </div>
</td>
filejavascript.js
function preview()
{
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("divImmagine").innerHTML=xmlhttp.responseText;
}
image=request.getParameter("upload_immagine");
document.getElementById("divImmagine").innerHTML=image;
xmlhttp.open("POST","stampaAnteprima.php", false);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("image="+image);
}
stampaAnteprima.php
<?php
$file_temp=($_FILES['image']['tmp_name']);
echo"$file_temp";
?>
The line of javascript image=request.getParameter("upload_immagine"); returns nothing. How do I get the value to pass to php and then read the file via $_FILES['image']['tmp_name'] in practice it would be image? Do you have any advice?
This will allow you to send files to php.
You can add more eventlisteners to display the upload progress and error handling.
function UploadPhoto(){
var file = document.getElementById('upload_immagine').files[0];
var formdata = new FormData();
formdata.append("image", file);
var req = new XMLHttpRequest();
req.addEventListener("load", function(event) { uploadcomplete(event); }, false);
req.open("POST", "stampaAnteprima.php");
req.send(formdata);
}
function uploadcomplete(event){
// Your php reply = event.target.responseText
}
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.