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");
Related
I have many input values from a form, and I would like to push them to PHP code using ajax code. Here's an example of what i'm trying to do. I have test1 and test2 that i want to keep track when user press search button.
Right now it only get the value of test1 "getResults(this.test1.value)" I would like to know how to get the test2 value using the same method.
<form name="input" action="" method="" onsubmit="getResults(this.test1.value); return false;">
<input type="text" name="test1">
<select id="test2" name="test2">
<option value="">Make a choice ...</option>
<option value="c1">choice 1</option>
<option value="c2">choice 2</option>
<option value="c3">choice 3</option>
</select>
<input type="submit" value="Search">
</form>
<div id="here"><b></b></div>
The getresults method, right now it only support one string, how can I add more arguments ?
function getResults(str)
{
if (str=="")
{
document.getElementById("here").innerHTML="";
return;
}
else (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("here").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","info.php?q="+str,true);
xmlhttp.send();
}
and finaly and more importantly how can I retreive values from info.php ? Thanks a lot
<?php
$test1 = $_GET['test1'];
echo "$test1";
$test2 = $_POST["test2"];
echo "$test2";
?>
You don't need to pass argument to the function. We can grab the form fields value there.
<html>
<head>
<script type="text/javascript">
function getResults()
{
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("here").innerHTML=xmlhttp.responseText;
}
}
var data = "test1="+document.getElementById("test1").value+"&test2="+document.getElementById("test2").value;
xmlhttp.open("POST","info.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(data);
}
</script>
</head>
<body>
<form name="input" action="" method="" onsubmit="getResults(); return false;">
<input type="text" name="test1" id="test1">
<select id="test2" name="test2">
<option value="">Make a choice ...</option>
<option value="c1">choice 1</option>
<option value="c2">choice 2</option>
<option value="c3">choice 3</option>
</select>
<input type="submit" value="Search">
</form>
<div id="here"><b></b></div>
</body>
</html>
Than in your info.php file do this to grab the variables sent via Ajax,
<?php
$test1 = $_POST["test1"];
$test2 = $_POST["test2"];
echo "Test1: ".$test1."<br/>Test2: ".$test2."";
?>
The reason it doesn't pull both values is because 1) you need to add a method to your form. You can either do post or get, not both.2) In your php you define test 1 as from the get array and variable 2 as from the post array. If you make $test2 from the get array it should work.
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>
I have build an instant search with AJAX using this tutorial, I am getting instant result but the problem is the div in which result comes stays open there.
I want to modify it like after getting instant result, then
when clicked anywhere on page the result(div) should disappear.
and when mouse-over again on input field result(div) should reappear.
AJAX Code
<script type="text/javascript">
function showResult(str)
{
if (str.length==0)
{
document.getElementById("search-result").innerHTML="";
document.getElementById("search-result").style.border="0px";
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("search-result").innerHTML=xmlhttp.responseText;
document.getElementById("search-result").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","instant-search.php?keyword="+str,true);
xmlhttp.send();
}
</script>
HTML Code
<div id="search">
<form action="" method="get" id="search-form" >
<input name="" type="" size="" id="search-input" onkeydown="showResult(this.value)"/>
<select name="" id="search-select">
<option value="all" >All</option>
<input type="hidden" name="" value="" />
</select>
<input type="submit" value="Search" id="search-btn" />
</form>
</div>
<div id="search-result"></div>
PHP Codes are simple MySQL Full Text Search query.
I tried like adding this but nothing happens
<input name="keyword" type="text" size="50" id="search-input" onkeydown="showResult(this.value)" onclick="(this.value==this.defaultValue) this.value='';" onmouseout="showResult(this.value='';)"/>
Please suggest any way of doing this.
Thanks.
A nasty way
<body>
<div id="main" onclick="fx(0)">
<div id="search">
<form action="" method="get" id="search-form" >
<input name="" type="" size="" id="search-input" onkeydown="showResult(this.value)"/>
<select name="" id="search-select">
<option value="all" >All</option>
<input type="hidden" name="" value="" />
</select>
<input type="submit" value="Search" id="search-btn" />
</form>
</div>
<div id="search-result" onclick="fx(1)"></div>
</div>
</body>
<script>
function fx(var flag)
{
// document.getElementById(theIdYouWantToShowHide).style.display="none" or inline or block ...
}
</script>
Got it finally, hope this helps others too.
<script type="text/javascript">
function showResult(str)
{
if (str.length==0)
{
document.getElementById("search-result").innerHTML="";
document.getElementById("search-result").style.border="0px";
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("search-result").innerHTML=xmlhttp.responseText;
document.getElementById("search-result").style.border="1px solid #A5ACB2";
document.getElementById("search-result").style.display="block";
document.getElementById("search-input").onmouseover = function(){show_box()};
}
}
xmlhttp.open("GET","instant-search.php?keyword="+str,true);
xmlhttp.send();
}
function close_box(){
document.getElementById("search-result").style.display="none";
}
function show_box(){
document.getElementById("search-result").style.display="block";
}
document.onclick = function(){close_box()};
</script>
I created 3 drop down list in my html. For the first drop down, once user selects an option, a function is called on onchange. This runs a php script on the server and then updates the second drop down list. However, After it updates the second drop down list, the third drop down list disappears. Is there anything wrong with my code? If so, how should I change it to?
.html
<script type="text/javascript">
function showApplications(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("appname").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("appname").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getApplications.php",true);
xmlhttp.send(null);
}
</script>
<script type="text/javascript">
function showTargets(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("target").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("target").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getTargets.php",true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<form action="post">
Environment:
<select name="customers" onchange="showApplications(this.value)">
<option value="Environment">Select an environment:</option>
<option value="SandBox">Sandbox</option>
<option value="Production">Production</option>
</select>
</br>
</br>
Application Name: <div id="appname">
<select name="customers" onchange="showTargets(this.value)">
<option value="">Select application:</option>
</select>
Target: <div id="target">
<select name="select">
<option>Select one option</option>
</select>
</div>
</form>
</br>
</body>
</html>
.php
<?
$link = mysql_connect("127.0.0.1:3306", "root", "");
if(!$link){
die('Could not connect: ' . mysql_error());
}
mysql_select_db("PushApplication");
$query="SELECT AppName FROM Applications";
$result=mysql_query($query);
?>
<select name="state" onchange="showTargets(this.value)">
<option>Select application</option>
<? while($row=mysql_fetch_array($result))
{
?>
<option value=<?=$row['AppName']?>><?=$row['AppName']?></option>
<?
}
?>
</select>
You're missing a close tag for your element <div id="appname">. Close it up after your select element and your script should work just fine.
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.