The HTML with the select value is:
<select id="value_select" onchange="get_value_js()">
<option>Value 1</option>
<option>Value 2</option
</select>
The JavaScript code:
function get_value_js() {
var the_value = document.getElementById("value_select").value;
}
I don't know how to continue the JavaScript to send the value to, for example, work.php. In work.php, I want to store the value in a PHP variable.
You can use AJAX.
function get_value_js(){
var xmlhttp;
var e = document.getElementById("value_select");
var the_value = e.options[e.selectedIndex].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)
{
//Do whatever with xmlhttp.responseText;
}
}
xmlhttp.open("GET","work.php?val="+the_value,true);
xmlhttp.send();
}
You can use $_GET['the_value'] to grab the value.
You need to enclose the <select> in a <form> tag like so:
<form id="myForm" method="post" action="work.php">
<select name="value_select">
<option value="1">Value 1 text</option>
<option value="2">Value 2 text</option
</select>
</form>
Please note that i've added value attributes to the <option> tags & added a name attribute to the <select>.
Next, you can submit the form in the following way:
function send()
{
document.getElementById( "myForm" ).submit();
}
Next in work.php:
<?
$value_select = $_POST[ "value_select" ];
echo( $value_select );
?>
You could either send it as an AJAX call if you want to stay on the same page or perform a redirect and pass the value as query string parameter:
window.location.href = '/work.php?value=' + encodeURIComponent(the_value);
Use ajax with jQuery
function get_value_js() {
var the_value =$("#value_select option:selected").val();
$.post('work.php?val='+the_value , function(data) {
//do whatever you want with the result
});
}
Related
(Re Post) i had going through this tutarial : PHP ajax database : how to pass two variables and get data of them in different div even one? ,but it seems not working,and i need to have 3 select works together.i choose first select option then using ajax to pass data for getting second and using the
function showUser(strOther);
to get third data which is related to the first and second answer.all is running well but the third select which is:
<select id="txtHint1">
doesnt show me any answer.here is my scripts:
<script>
function showForum(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>
<script>
function showUser(strOther) {
if(strOther==""){
document.getElementById("txtHint1").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("txtHint1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q1="+strOther,true);
xmlhttp.send();
}
</script>
this is the select options which i get the ajax data:
<!-- this forum will be
choosed to pass data to get second
select to filled up-->
<form>
<!-- first select-->
<select name="users" onchange="showForum(this.value)">
<option value="">All Orgs</option>
<option value="1">WebStatsProject</option>
<option value="2">mmu</option>
</select>
</form>
this select option will be filled by the first ajax request:
All Forums
the third not show any data,the other two working properly:
<!-- third select-->
<select id="txtHint1">
<option value="All Users">All Users</option>
</select>
Because you not define strOther
try this
function showUser(str,strOther){
and pass strOther to this function
I have a problem with AJAX and JQUERY.
I have a form, which contents a tag. After select an option, I use AJAX to generate a formular, fill it with some data from a database and show it.
I would like to use the jQuery UI MultiSelect Widget
The problem is that I need to initialize the select with jQuery but it doesn't work when I call this function in the file that generates the new content: (it works well if I don't use AJAX).
<script type="text/javascript">
$(function(){
$("#ExampleSelect").multiselect({
selectedList: 4
});
});
</script>
The structure is the following:
PHP file with the main form which contains a normal and a which will contain the elements that are generated after the AJAX call. (onChange event in the <select>).
Ajax file
function LoadDiv()
{
var xmlhttp;
var serie_id = document.getElementById('serie_id').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("divForm").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","divDataManagement.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("serie_id="+serie_id);
}
$.ajax({
success: function(){
$("#ExampleSelect").multiselect("destroy").multiselect({
selectedList: 4
});
}
});
PHP file that contains the jQuery UI MultiSelect which wil be displayed in the main php form (inside the <div> tag).
<select id = "ExampleSelect" multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
Thanks for your help.
Initialize it in AJAX success method.
$.ajax({
...
success: function(){
$("#ExampleSelect").multiselect({
selectedList: 4
});
}
...
If you make changes on a selected instance of multiselect, destroy it and reinitialize after changing.
$.ajax({
...
success: function(){
$("#ExampleSelect").multiselect("destroy").multiselect({
selectedList: 4
});
}
...
In case you use XMLHttpRequest instead of jQuery ajax, you should init multiselect in onreadystatechange method.
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divForm").innerHTML=xmlhttp.responseText;
$("#ExampleSelect").multiselect({
selectedList: 4
});
}
}
I'm trying to pass multiple parameters via the POST method using AJAX to my PHP file so that I can make a query to a MySQL database.
HTML file :
<div class="dropdown dropdown-dark">
<select class="dropdown-select" id="searchselect11" required>
<option value="faculty">Faculty</option>
<option value="dept">Dept.</option>
<option value="course">Course</option>
<option value="year">Year</option>
<option value="name">Name</option>
</select>
</div>
<td style="padding:5px;"> <input type="text" id="searchtext11" required></td>
<button id="searchgo1" onclick="searchone()"></button>
This is the Javascript file where I successfully access dropdown value and textbox value and store them in sv and searchtext11 variables respectively. But the problem is to pass the two values to the PHP file. The problem seems to be in the_data variable that is passed in xmlhttp.send(the_data);
The searchone() function is as follows:
function searchone()
{
//alert("hi");
var xmlhttp;
var sel = document.getElementById('searchselect11');
var sv = sel.options[sel.selectedIndex].value;
var searchtext11= document.getElementById("searchtext11").value;
var the_data = 'select='+sv+'text='+searchtext11;
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", "searchone.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(the_data);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
document.getElementById("searchresults").innerHTML = xmlhttp.responseText;
}
}
}
This PHP code works only if
var the_data='select='+sv;
searchone.php
<?php
if (isset($_POST['select'])) {
$str = $_POST['select']; // get data
echo $str;
}
?>
How do i get both dropdown and textbox value to my PHP file so that i can form sql query using those variables.
You need to use an ampersand, just as if it was a GET. Further, you should encode your text to make sure that it doesn't contain any characters that could have a special meaning
var the_data = ''
+ 'select=' + window.encodeURIComponent(sv)
+ '&text=' + window.encodeURIComponent(searchtext11);
// ^ ^^
You don't need to decode manually server-side because you are already letting it know that POST data is x-www-form-urlencoded.
add & in this string:
var the_data = 'select='+sv+'&text='+searchtext11;
So I am trying to put the GET of the ajax request in the <select> using an id but it doesn't work. However when I use for example <p> with an id or <option> or anything else it does work and output what I want.
This is my Ajax script
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("brand").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("brand").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","inc/parts_form2.php?q="+str,true);
xmlhttp.send();
}
This is a part of the form
Year:
<select onchange="showUser(this.value)">
%year%
Brand:
<select id="brand">
</select>
And this is my php
<?php
$q = $_GET['q'];
echo $q;
?>
I am trying to get the output in <select id="brand"></select>. Which I check in the source code if it worked.
You need to put the content in option tags inside the select tag.
"<option>"+xmlhttp.responseText+"</option">;
or in php :
$d = "<option>".$_GET['q']."</option">;
Isnt the response text passed into the onreadystatechange callback?
xmlhttp.onreadystatechange = function (response){
// insert your method body here
}
I have a page called getvalues.php, I need to call a function which is written in a different php page(fileclass.php) in a class from this page(getvalues.php), but the issue is i need to pass a variable also which is $i, and the value of $i passed should be 1 if we are selecting option B, and $i=2 if option=c, and $i=3 if option=D given in dropdown. I had simply wiritten an onchange event but had not written any code in javascript. Please help Thanks. Here is the code for getvalues.php
<html>
<select id="s" onchange="callsome();">
<option value='B' selected>B</option>
<option value='c'>c</option>
<option value='D'>D</option>
</select></html>
<?php include("fileclass.php")
$obj=new file;
echo $obj->func($i);?>
You could implement this using JQuery or Javascript (I use JQuery in the example because it is shorter and easier to make Ajax calls) :
<html>
<select id="s" onchange="callsome();">
<option value='1' selected="selected">B<option>
<option value='2'>C</option>
<option value='3'>D</option>
</select>
<script>
function callsome() {
var selected = $('select#s option:selected').val();
$.ajax({
type: "POST",
url: "fileclass.php",
data: ({selectedvalue : selected}),
success: function(data) {
alert(data);
}
});
}
</script>
</html>
After that the callsome returns the output of the fileclass.php script and you can use that however you like in your code. From your explanation it was not really clear what is happening in fileclass.php and what you want to do with it, so I hope it helps you.
If you want the function in Javascript only:
<script type="text/javascript">
function callsome() {
var e = document.getElementById("s");
var strVal = e.options[e.selectedIndex].value;
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) {
var data = xmlhttp.responseText;
//use the data as you wish
}
}
xmlhttp.open("GET","fileclass.php?selectedvalue=strVal",true);
xmlhttp.send();
}
</script>
This isn't the way PHP and HTML work.
PHP is rendered on the server. HTML is rendered on the client, after the PHP is completely done. To do what you want to do, you need to have the HTML (possibly Javascript) make a request to the PHP page at fileclass.php.