Here is some example code for one if the search field and it is a select box
<html>
<head>
<script>
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?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
And this is HTMl code for input field
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
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","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
This two ajax related form's are working individually..
What i want is those two opertions should take place in single form and single ajax script
can anyone help me?
thanks in advance
You can use something like -
<html>
<head>
<script>
function showHint(str,type)
{
var str2 = '';
if (type == 1)
{
if (str.length==0 && document.getElementById('users').value == '')
{
document.getElementById("txtHint").innerHTML="";
return;
} else {
str2 = document.getElementById('users').value;
}
} else {
if (str.length==0 && document.getElementById('text').value == '')
{
document.getElementById("txtHint").innerHTML="";
return;
} else {
str2 = document.getElementById('text').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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str+'&str2 = '+str2,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" id = "text" onkeyup="showHint(this.value,'1');">
<select name="users" id = 'users' onchange="showHint(this.value','2');">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Related
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.
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);
I am trying to make an html select box which dynamically disables and enables based on what the user inputs in a different select box... This was working fine when I used just html, but I would like to use the jQuery plugin Chosen for this, and it is not working... The main thing I need to do is update chosen to be disabled or enabled based on the onchange for the other select box. Is this possible with chosen? And how? Thanks so much.
Below is my javascript:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PROCapture Marketing | My Dashboard</title>
<link rel="stylesheet" type="text/css" href="../Style Sheets/PCMBackOffice-Styles.css">
<link href="../Style Sheets/headermenuhome.css" rel="stylesheet"><script type="text/javascript" src="../Scripts/jQuery1.7.1.js"></script>
<script src="../Scripts/instantiatemenu.js"></script>
<script>
function displayleads(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("fromleadstransfer").innerHTML="<option value=''>Select Leads To Transfer...</option>";
document.getElementById("fromleadstransfer").disabled=true;
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("fromleadstransfer").innerHTML=xmlhttp.responseText;
if (document.getElementById("fromleadstransfer").value != "noleads") {
document.getElementById("fromleadstransfer").disabled=false;
} else {
document.getElementById("fromleadstransfer").disabled=true;
}
}
}
xmlhttp.open("GET","../Scripts/transferfromselect.php?system="+str,true);
xmlhttp.send();
}
</script>
<script>
function displayfolders(str2)
{
var xmlhttp;
if (str2=="")
{
document.getElementById("tofoldertransfer").innerHTML="<option value=''>Select Folder To Send Leads...</option>";
document.getElementById("tofoldertransfer").disabled=true;
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("tofoldertransfer").innerHTML=xmlhttp.responseText;
document.getElementById("tofoldertransfer").disabled=false;
}
}
xmlhttp.open("GET","../Scripts/transfertoselect.php?system="+str2,true);
xmlhttp.send();
}
</script>
<link rel="stylesheet" type="text/css" href="../chosen/chosen2.css">
<script src="../chosen/jquery.js"></script>
<script src="../chosen/chosen.jquery.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(".fromleadstransfer").chosen();
jQuery(".fromsystemtransfer").chosen();
jQuery(".tofoldertransfer").chosen();
jQuery(".tosystemtransfer").chosen();
jQuery(".operationselect").chosen({disable_search_threshold: 3});
});
And here is the form:
<form method="post" name="transferleadsform">
<div class="transferleftside">
<div class="primarytransfercontainer">
<span class="primarytransferspan">From:</span>
<br>
<div class="transferinnercontainer1"><label>Operation: </label>
<select id="operationselect" name="operationselect" class="operationselect">
<option value="Copy" selected="selected">Copy</option>
<option value="Move">Move</option>
</select></div>
<br>
<div class="transferinnercontainer2"><label>System: </label>
<select name="fromsystemtransfer" class="fromsystemtransfer" id="fromsystemtransfer" onChange="displayleads(this.value)">
<option value="">Select A System...</option>
<?php
foreach($systems as $systemid) {
?>
<option value="<?php echo $systemid?>"><?php echo $systemid?></option>
<?php
}
?>
</select></div>
<br>
<div class="transferinnercontainer2"><label>Leads: </label>
<select name="fromleadstransfer" multiple disabled="disabled" class="fromleadstransfer" id="fromleadstransfer">
<option value="">Select Leads To Transfer...</option>
</select></div>
</div>
</div>
<div class="transferrightside">
<div class="primarytransfercontainer">
<span class="primarytransferspan">To:</span>
<br>
<div class="transferinnercontainer1"><label>System: </label>
<select id="tosystemtransfer" name="tosystemtransfer" class="tosystemtransfer" onChange="displayfolders(this.value)">
<option value="">Select A System To Send Leads...</option>
<?php
foreach($systems as $systemid) {
?>
<option value="<?php echo $systemid?>"><?php echo $systemid?></option>
<?php
}
?>
</select></div>
<br>
<div class="transferinnercontainer3"><label>Folder: </label>
<select id="tofoldertransfer" name="tofoldertransfer" disabled="disabled" class="tofoldertransfer">
<option value="">Select Folder To Send Leads...</option>
</select></div>
<br>
<input type="submit" class="transferbutton TransferSprites" value="<< Transfer Leads >>">
</div>
</div>
<div class="longdivider TransferSprites">
</div>
</form>
after you disable the element, you need to trigger it's update function
$(element).prop('disabled', true).trigger("liszt:updated");
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "liszt:updated" event on the field. Chosen will re-build itself based on the updated content.
jQuery Version: $("#form_field").trigger("liszt:updated");
Prototype Version: Event.fire($("form_field"), "liszt:updated");
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.
I have this code (below) that works on FF&Chrome but doesn't work on IE*. I am trying to populate the select tag with email address. Thanks
question.php
<html>
<head>
<script type="text/javascript">
function myFunction(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.open("POST","qsrcipt.php?q="+val,true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send();
}
</script>
</head>
<body onload="myFunction(document.myForm.mySelect.value)">
<form name="myForm" style="float:left; margin-right: 10px; overflow: hidden;">
<select name="mySelect" onchange="myFunction(this.value)" size="10">
<option value="1" selected="selected">level 1</option>
<option value="2">level 2</option>
<option value="3">level 3</option>
</select>
</form>
<div>
<select id="myDiv" size="10"></select>
</div>
</body>
</html>
qsrcipt.php
<?php
// Fill up array with names
$lsts = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona");
//get the q parameter from URL
$q=$_GET['q'];
if ($q == '1')
{
foreach($lsts as $lst){
echo "<option id='1'>".$lst."</option>";
}
}
else
{
echo "<option id='1'>this is a test</option>";
}
?>
Your $lsts contains the array of names not email.
Secondly, instead generating the HTML server side, it's better to return the values of $lsts as a JSON encoded array and, in JavaScript, dynamically generate the select list.