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.
Related
I have a HTML form (PHP), that has one or two checkboxes depending on what a user selects in a dropdown earlier in the form. The problem is:
When a user selects an option from the dropdown, I need to access an SQL DB to find out how many records fit the query and if it exceeds a limit, only allow one checkbox, otherwise 2.
Pseudo:
Select location dropdown (populated by PHP/SQL );
If onchange.location has less than 50 records
show/enable 2 type checkboxes
else
show/enable one type checkbox
From the research I've done:Using javascript to access server DB is a no-no,Can't be done on client side using PHP.
When a user selects a user in the dropdown list, a function showUser() is triggered by the onchange event.
HTML Page:
<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">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
AJAX request sent to getuser.php, so you can do request to your DB.
Code of getuser.php:
<?php
$q = intval($_GET['q']); // your sent parameter by AJAX
// do your request and process all needed info from DB.
?php>
You can find all needed info in this tutorial.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
<body>
<form method="post" action="eex4.php">
<label for="text_2">Select the Scheme: </label>
<select name="users" id="users">
<option value="">Select:</option>
<option value="1">Sem1</option>
<option value="2">Sem2</option>
<option value="3">Sem3</option>
<option value="4">Sem4</option>
<option value="5">Sem5</option>
<option value="6">Sem6</option>
</select>
<input type="submit" value="Submit" name="btn" onClick="ResultPage()"/>
</form>
</body>
The above code output has selectbox with submit button. when i click the submit button it call the script.
<script>
function ResultPage()
{
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;
}
}
var select = document.getElementById('users');
var sem = select.options[select.selectedIndex].value;
var uurl = "eex4.php?q=" + sem;
xmlhttp.open("GET",uurl,true);
xmlhttp.send();
}
</script>
i need to pass a value of selectbox which option i selected and send to following php file.
eex4.php
<?php
$schm = $_GET['sem'];
$txt1 = "Semester";
echo $txt1 ." ". $schm;
?>
My expected result is:
"Semester[value of option have select]" but it simply displaying "Semester"
can any one find the error..
use
$schm = $_GET['q'];
because you are passing q here
var uurl = "eex4.php?q=" + sem;
The problem is with your form when you click the submit button it posts the data to eex4.php and just displays Semester.
Change
<input type="submit"
to
<input type="button"
So when you click this button the content will load in the page without refreshing the page.
The ajax part has been taken from w3schools. You just have to replace $schm = $_GET['sem']; to $schm = $_GET['q'];
change
var uurl = "eex4.php?q=" + sem;
to
var uurl = "eex4.php?sem=" + sem;
because you are getting 'sem' in eex4.php but passing 'q' to it
You are passing value with through q
$schm = $_GET['q'];
<body>
<div id="txtHint"></div>
<form method="post" action="eex4.php">
<label for="text_2">Select the Scheme: </label>
<select name="users" id="users">
<option value="">Select:</option>
<option value="1">Sem1</option>
<option value="2">Sem2</option>
<option value="3">Sem3</option>
<option value="4">Sem4</option>
<option value="5">Sem5</option>
<option value="6">Sem6</option>
</select>
<input type="submit" value="Submit" name="btn" onClick="return ResultPage()"/>
</form>
</body>
<script>
function ResultPage()
{
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;
}
}
var select = document.getElementById('users');
var sem = select.options[select.selectedIndex].value;
var uurl = "eex4.php?q=" + sem;
xmlhttp.open("GET",uurl,true);
xmlhttp.send();
return false;
}
</script>
eex4.php
<?php
$schm = $_GET['sem'];
$txt1 = "Semester";
echo $txt1 ." ". $schm;
?>
change
$schm = $_GET['sem'];
to
$schm = $_GET['q'];
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");
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.