This is my code:
<?php
$q=$_GET["q"];
require("../db.php");
$res_prop_name = mysql_query("select * from property where prop_short='$q'");
$row_prop_name = mysql_fetch_assoc($res_prop_name);
echo $row_prop_name['prop_name'];
?>
<script type="text/javascript">
function showProperty(str)
{
if (str=="")
{
document.getElementById("prop_name").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("prop_name").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax/get-property-name.php?q="+str,true);
xmlhttp.send();
}
</script>
<select id="prop_short" name="prop_short" onchange="showProperty(this.value)">
<option value="">Select a property</option>
<option value="Property2">Property1</option>
<option value="Property2">Property2</option>
</select>
<input type="text" id="prop_name" name="prop_name" onChange="showProperty(this.value)">
The answer to my question must be very simple however I just can't make it work.
I understand that in the ajax script the innerHTML feeds the text into a div that has the id prop_name for example. I tried it and it worked. But how can I feed the returned text into a input type="text" field? I've tried innerText instead of HTML but it doesnt work.
Putting the comment as an answer: For input elements it's document.getElementById("xxx").value instead of .innerHTML.
Related
I have an AJAX script that used to replace an entire div with new html including the <input> markup:
<script>
function show_locations(str) {
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 a = xmlhttp.responseText;
a = JSON.parse(a);
document.getElementById('locations_dropdown').innerHTML=a.location;
document.getElementById('dm').innerHTML=a.dm;
document.getElementById('dm_email').innerHTML=a.dm_email;
}
}
xmlhttp.open('GET','includes/get_locations.php?d='+str,true);
xmlhttp.send();
}
</script>
The document.getElementById('dm_email').innerHTML=a.dm_email;').innerHTML=a.dm_email; would replace the <div id=dm_email></div> contents with a new <input> markup which would include the new email value in value="" here:
<div id="dm_email">
<input type="email" value="">
</div>
But, now I know that sending html markup through json is a bad practice, so how can I change my AJAX script above to replace just the value of the input?
I tried this:
document.getElementById('dm_email').value=a.dm_email;
But it doesn't work. Any ideas?
At the moment I have the following markup code on my website:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
I want to have a PHP script in the same directory as my webpage fire when I select a particular option. How would I go about doing this? Thank you.
call a ajax on change of select like this
<select onchange="javascript:callAjax(this.value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
function callAjax(sel_opt)
{
var url = "your_php_file.php?select_option="+sel_opt;
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 result = xmlhttp.responseText;
// put your result where ever you want
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
your_php_file.php
<?php
// your code
?>
Do an Ajax call. Here's an example. hope this helps to understand.
cheers!
I have a problem with my AJAX function which is not being triggered. It seems like I'm doing everything fine but for some reason it's not triggered when the select box is changed:
Here is my Ajax function:
<script type="text/javascript">
function showSections(id){
if (id=="")
{
document.getElementById("MyDiv").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("MyDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getRets.php?sem=" + id, true);
xmlhttp.send();
}
</script>
here is the select box:
<select name='sub' id="sub" onchange="showSections(this.value)">
<option value="1">Pending</option>
<option value="0">Performed</option>
</select>
<div id="MyDiv">
some data
</div>
This is the gerRets.php file:
<?php
$numbVal = $_GET['sem'];
echo $numbVal;
?>
Can anybody point out to me my mistake? Apparently I just don't see it.
I am doing some work in PHP. I have two php page
index.php
<html>
<head>
<script>
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");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll-vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Is this correct? </h3>
<div id="poll">
<form>
Yes:
<input type="radio" name="vote" value="0">
<br>No:
<input type="radio" name="vote" value="1">
<input type="submit" value="Forward" onclick="getVote(value);">
</form>
</div>
</body>
</html>
on click of submit button I need to get the value of selected radio button and pass it to the function.
Please help me
call just a function in youe onclick inline...
<input type="submit" value="Forward" onclick="getVote();"> //here
and get checked radio value in your function..
var radiovalue= $('input[name="vote"]:checked').val()
try this
JAVASCRIPT
function getVote()
{
var radiovalue= $('input[name="vote"]:checked').val()
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("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll-vote.php?vote="+radiovalue,true);
xmlhttp.send();
}
HTML
<input type="submit" value="Forward" onclick="getVote();">
Provide action and method attribute to form first
<form action="index.php" method="post">
And than only you can get the value like below:
$vote = $_POST['vote'];
I hope this is what you are looking for.
try:
function getVote()
{
var int=document.getElementById("vote").value;
....
EDIT: noticed it is a radio input... so this won't work. You need something like:
function getRadioCheckedValue(radio_name)
{
var oRadio = document.forms[0].elements[radio_name];
for(var i = 0; i < oRadio.length; i++)
{
if(oRadio[i].checked)
{
return oRadio[i].value;
}
}
return '';
}
And then do:
function getVote()
{
var int=getRadioCheckedValue(vote);
....
Via jquery you can get value of selected radio like this:
$('input[name=vote]:checked').val()
Try changing those 2:
<form name="myForm">
onclick="getValue(document.myForm);"
then the function:
function getValue(form){
var value = '';
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'radio') {
if(form.elements[i].checked == true) {
value = form.elements[i].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("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll-vote.php?vote="+value,true);
xmlhttp.send();
}
Call the function without any value and then read out the radiobutton inbetween your function like this:
var rval = document.getElementsByName('vote');
for (var i = 0, length = rval.length; i < length; i++) {
if (rval[i].checked) {
alert(rval[i].value); // your value
}
}
HTML code :
<form>
<tr><td align="center">
<p><select size="1" id="breed_list" name="D1" onChange="editBreed(this.value);">
<option>Select Cattle Breed</option>
<?php while(list($id, $breed)=mysql_fetch_row($result1)) {
echo "
<option value=\"".$id."\">".$breed."</option>";
} ?>
</select></p>
</td></tr>
</form>
Javascript code :
<script type="text/javascript">
function editBreed(str){
alert("Made it to Edit Breed"+ str);
if (str=="" || str=="Select Cattle Breed") {
document.getElementById("animal_data").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("animal_data").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","editbreed.php?d="+str+,true);
xmlhttp.send();
}
</script>
If I modify the select to read onChange="alert(this.value);">, it displays the correct record, for some reason though it's not going to the function and showing me the alert that's there.
Thanks
On the second to last line in your function, there is a syntax error that is causing the function not to run at all.
xmlhttp.open("GET","editbreed.php?d="+str+,true);
remove the + after str
xmlhttp.open("GET","editbreed.php?d="+str,true);