Hi I'm having a bit of a problem with my code I'm trying to test if this line of code(ajaxmaprequest.js)is working making it retrieve a string from xmlspitquery.php and echo it at testajax.php. Would appreciate any help on what I'm doing wrong.
ajaxmaprequest.js
$ ('#lgu','#category','#type').change(function(){
var Lgu = $('#lgu').val();
var Category = $('#category').val();
var Type = $('#type').val();
$.get('xmlspitquery.php',
{ input: Lgu, input2: Category, input3: Type},
function(data) {
$('#xmlreturn').text(data);
});
});
And this is from testajax.php
<select id="lgu" name="Lgu">
<option>LGUs</option>
<option>Bacolod City</option>
<option>Bago City</option>
<option>Cadiz City</option>
</select>
<select id="category" name="Category">
<option>Categories</option>
<option>Hotel</option>
<option>Restaurant</option>
<option>Attractions</option>
</select>
<select id="type" name="Type">
<option>Tourism Type</option>
<option>Eco</option>
<option>Resto</option>
<option>Fun</option>
</select>
<div id="xmlreturn"> </div>
xmlspitquery.php
only has echo "Test"; I will add more code once i get the connection done.
Change this:
$('#lgu','#category','#type')
to this:
$('#lgu,#category,#type')
Related
Hey guys I'm trying to create a dynamic button from a drop down list. for example, in the HTML code below...
function dropdownbutton(){
var make = document.getElementById("makelist");
var answer = make.options[make.selectedIndex].value;
alert("answer")
}
<div class="make">
<label>Make</label>
<select name="make" id="makelist" onchange="getId(this.value);">
<option value="">Select Make</option>
<option value="">1</option>
</select>
</div>
<div id="model">
<label>Model</label>
<select name="model" id="modellist" onchange="getId2(this.value);">
<option value="">Select Model</option>
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div id="year">
<label>Year</label>
<select name="year" id="yearlist" onchange="getId3(this.value);">
<option value="">Select Year</option>
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>
I'm open to trying it in different languages but I would prefer to do it in php, I simply don't know how to get the values from each dropdown.
I have taken help of Jquery here, inside the dropdownbutton() function i call all the select box element.
And using .each function extracted the value selected value of dropdowns.
i check those value if not empty then created a button inside element having Id #append_new_button
Please check the below code it might solve your issue
Thanks
function dropdownbutton() {
jQuery('#append_new_button').html('');
jQuery('select').each(function(){
var select_value = jQuery(this).val();
var select_label = jQuery("#"+jQuery(this).attr('id')+" option[value='"+select_value+"']"). text();
if(select_value != ''){
jQuery('#append_new_button').append('<input type="button" id="'+select_value+'" value="'+select_label+'"></button>')
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="make">
<label>Make</label>
<select name="make" id="makelist">
<option value="">Select Make</option>
<option value="make_1">Make 1</option>
<option value="make_2">Make 2</option>
</select>
</div>
<div id="model">
<label>Model</label>
<select name="model" id="modellist" >
<option value="">Select Model</option>
<option value="model_1">Model 1</option>
<option value="model_2">Model 2</option>
</select>
</div>
<div id="year">
<label>Year</label>
<select name="year" id="yearlist" >
<option value="">Select Year</option>
<option value="year_1">year 1</option>
<option value="year_2">year 2</option>
</select>
</div>
<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>
<div id="append_new_button">
</div>
I updated that code to find the values for each drop down
function dropdownbutton(val){
var make = document.getElementById("makelist");
var answer = make.options[make.selectedIndex].value;
var model = document.getElementById("modellist");
var answer2 = model.options[model.selectedIndex].value;
var year = document.getElementById("yearlist");
var answer3 = year.options[year.selectedIndex].value;
alert(answer2);
}
Now i need to figure out how to pass these variables to a link for example, mydomain.com/answer/answer2/answer3
i think that this code is more dynamic.
$("button").click(function() { // if button is clicked
var arr = $('select').map(function() { // run through all selects and get value
return this.value
}).get();
var url = "http://exp.com"; // base for the url
arr.forEach(function(item) {
url = url + '/' + item; // append all options to the base url
});
window.location.href(url); // redirect to base url + all options
});
Don't forget to add value to your options. <option value="1">1</option>
Please look at jsfiddle for a working example
Hello just want to ask what is the proper way to pass a parameter using jquery my parameter is from a html input , below is my code.
function ajax_post(){
var param = document.getElementById('def').value;
$('#chatlogs').load('main.php?id='+param);
}
I'm able to load the main.php but cannot get to echo the param, here is my main.php code.
<?php echo $_GET['id'];?>
Adding more details.. im getting the parameters from a HTML select input then after getting the value, will then load the main.php into a div with a id of #chatlogs.
<select name="topic" id="def" class="form-control" style="width:450px;" onChange='ajax_post()'>
<option value="" selected>---</option>
<option value="Solder Short">Solder Short</option>
<option value="Insufficient Solder">Insufficient Solder</option>
<option value="Misaligned Component">Misaligned Component</option>
<option value="Missing Component">Missing Component</option>
<option value="Inverted Component">Inverted Component</option>
<option value="Pad Contamination">Pad Contamination</option>
</select>
<div id="chatlogs">
Please select a defect category...
</div>
Try this:
<select name="topic" id="def" class="form-control" style="width:450px;">
<option value="" selected>---</option>
<option value="Solder Short">Solder Short</option>
<option value="Insufficient Solder">Insufficient Solder</option>
<option value="Misaligned Component">Misaligned Component</option>
<option value="Missing Component">Missing Component</option>
<option value="Inverted Component">Inverted Component</option>
<option value="Pad Contamination">Pad Contamination</option>
</select>
<div id="chatlogs">
Please select a defect category...
</div>
<script>
$(document).ready(function(){
$('#def').on('change', function() {
var param = document.getElementById('def').value;
//alert(param);
$('#chatlogs').load('main.php?id=', param);
})
});
</script>
Try this one:
function ajax_post(){
var param = document.getElementById('def').value;
$('#chatlogs').load('main.php?id='+param);
}
I have 2 select box option, city and district. I use ajax go get district name when I choose on the city. For this process I have succeed but when I click submit I get the error message Undefined index: district ,as this picture you can see
result image.
Here is my ajax code:
$(document).ready(function($) {
$("#city").change(function() {
var search_id = $(this).val();
$.ajax({
url: "search.php",
method: "post",
data: {search_id:search_id},
success: function(data){
$("#district").html(data);
}
})
});
});
Here is HTML code:
<form action="" method="post">
select city:
<select name="city" id="city">
<option value="1">Phnom Penh</option>
<option value="2">Kampong Soam</option>
<option value="3">Siem Reap</option>
</select>
select district:
<select name="distrcit" name="district" id="district">
<option>Select District</option>
</select>
<input type="submit" name="submit">
</form>
Here is PHP code:
<?php
if(isset($_POST['submit'])){
echo $_POST['city'];
echo $_POST['district'];
}
?>
//ajax request
<?php
if(isset($_POST['search_id'])){
$search_id = $database->escape_string($_POST['search_id']);
if(!empty($search_id)){
// $output = array();
$sql = "SELECT * FROM district WHERE ref_id = '$search_id'";
$districts = District::find_this_query($sql);
foreach($districts as $district){
// echo $district->id;
// echo $district->district_name;
$output .= "<option value='{$district->id}'>{$district->district_name}</option>";
}
echo $output;
}
}
?>
You have set name twice in select box. assign name only once:
so make it:
<select name="district" id="district">
<option>Select District</option>
</select>
I think this way is not very clean, you may create an ajax request returning values in json format and then append resultats in the select tag using
new Option(text, value);
please define name one time only :
<select name="district" id="district">
<option>Select District</option>
In the HTML you have declared name attributes 2 times:
<select name="distrcit" name="district" id="district">
Please replace with:
<select name="district" id="district">
<form action="" method="post">
select city:
<select name="city" id="city">
<option value="1">Phnom Penh</option>
<option value="2">Kampong Soam</option>
<option value="3">Siem Reap</option>
</select>
select district:
<select name="distrcit" name="district" id="district">
<option>Select District</option>
</select>
<input type="submit" name="submit">
</form>
I tried to create an array with serializeArray and post it to php. but my code doesn't work. I read this questions (question) but I didn't understand my mistake yet.
this is my ajax code
var str = $("form").serializeArray();
$.ajax({
type: "POST",
url: "myfile.php",
data: str,
success: function (value) {
$("#mydata").html(value);
}
});
HTML Code
<form>
<select name="num0">
<option value="">num0</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select name="num1">
<option value="">num2</option>
<option value="123">123</option>
<option value="133">133</option>
</select>
<select name="num2">
<option value="">num3</option>
<option value="12345">12345</option>
</select>
</form>
PHP Code
$postarr = array();
$num=$_POST['num0'];
$postarr[]=$num;
$num=$_POST['num1'];
$postarr[]=$num;
$num=$_POST['num2'];
$postarr[]=$num;
it giving me the following error message:
Notice: Undefined index: num0 (and same message for other variables).
By the way, English is not my native language; please excuse typing errors.
With the name attribute of an input field you are able to create an array in your $_POST:
<form method="post">
<select name="values[num0]">
<option value="">num0</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select name="values[num1]">
<option value="">num2</option>
<option value="123">123</option>
<option value="133">133</option>
</select>
<select name="values[num2]">
<option value="">num3</option>
<option value="12345">12345</option>
</select>
</form>
In your php you can use it like this:
$postarr = $_POST['values'];
echo $postarr['num0'];
Try this:
$.ajax({
type: "POST",
url: "myfile.php",
data: $('form').serialize(),
success: function (value) {
$("#mydata").html(value);
}
});
and instead of
$num=$_POST['num0']
use
$num=filter_input(INPUT_POST,'num0');
Add an id to your form,
<form id="my_form">
<select name="num0">
<option value="">num0</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select name="num1">
<option value="">num2</option>
<option value="123">123</option>
<option value="133">133</option>
</select>
<select name="num2">
<option value="">num3</option>
<option value="12345">12345</option>
</select>
Just change
var str = $("#my_form").serialize();
In your script
I have an HTML form that accepts user input:
<form action="script_conv.php" method="post">
Convert: <input type="number" name="input" id="input">
<select name="unit1" id="unit1">
<option value="w">Words</option>
<option value="l">Lines</option>
<option value="p">Pages</option>
<option value="r">Recorded Minutes</option>
<option value="f">Finished Minutes</option>
</select>
to
<select name="unit2" id="unit2">
<option value="w">Words</option>
<option value="l">Lines</option>
<option value="p">Pages</option>
<option value="r">Recorded Minutes</option>
<option value="f">Finished Minutes</option>
</select>
<input type="submit">
</form>
The php script takes the user data and performs some calculations:
<?php
$input=$_POST["input"];
$unit1=$_POST["unit1"];
$unit2=$_POST["unit2"];
(bunch of if...else statements)
echo "<ul>";
echo "<li>$cat1f</li>";
echo "<li>$cat2f</li>";
echo "<li>$cat3f</li>";
echo "</ul>";
?>
This all works fine, but of course the results of the function are returned to a new page. I'd like to append the results of the function to the same page. I know this will require AJAX/jQuery, but nothing I've tried has worked. Can anyone give me some guidance?
Much appreciated!
Try test.php(html):-
<form method='post'>
Convert: <input type="number" name="input" id="input">
<select name="unit1" id="unit1">
<option value="w">Words</option>
<option value="l">Lines</option>
<option value="p">Pages</option>
<option value="r">Recorded Minutes</option>
<option value="f">Finished Minutes</option>
</select>
to
<select name="unit2" id="unit2">
<option value="w">Words</option>
<option value="l">Lines</option>
<option value="p">Pages</option>
<option value="r">Recorded Minutes</option>
<option value="f">Finished Minutes</option>
</select>
<input type="button" onclick="getvalue();">
</form>
test.php (script function):-
<script src="http://localhost:8004/js/jquery-1.9.1.js"></script>
<script>
function getvalue() {
var input= document.getElementById('input').value;
var unit1=document.getElementById('unit1').value;
var unit2=document.getElementById('unit2').value;
$.ajax({
type: "POST",
url: "http://localhost:8004/test/test.php",
data: { input: input,unit1:unit1, unit2:unit2,fun:'getvalue' }
}).done(function( data )
{
alert(data);
});
}
</script>
php code at the top of this (test.php)file:-
<?php if(isset($_REQUEST['fun']) == 'getvalue')
{
echo $_REQUEST['input'].$_REQUEST['unit1'].$_REQUEST['unit2'];
exit();
}
?>
You need to exit else it will display all the data from this file so use another way using php for doing in php
remove action from <form method="post"> and get response on the same page
Try this:
$(function(){
$('form').submit(function(e){
e.preventDefault();
$.post('/path/to/your/php', $(this).serialize(), function(response){
// do something with the response
});
});
});
Might be this will helpfull for you and fulfill your requirement
http://sharp-coders.blogspot.in/2012/06/submit-form-using-ajax-without.html