What I'm trying to do is create a chained select boxes and display the information when selects. How I can connect my first dropdown to my second dropdown? When I try to add this <select name="customers" id="customers" onchange="showUser(this.value)"> it also not working.
This like the function is http://www.w3schools.com/ajax/ajax_database.asp
What I need to do is like this http://www.melco-crown.com/eng/careerpop_js.php
What I have right now is this
<script>
function showUser(str,ids) {
var $txtHint = $('#txtHint');
if (str=="" || ids=="") {
$txtHint.html('');
return;
}
$txtHint.load('list.php?q='+str+'&id='+ids)
}
</script>
I don't have problem in list.php, what I can't do is the ajax function. Any help will appreciate.
Here's my full script
Script Loads the Information from database display in HTML table.
<script>
function showUser(str) {
var $txtHint = $('#txtHint');
if (str=="") {
$txtHint.html('');
return;
}
$txtHint.load('list.php?q='+str)
}
</script>
HTML FORM and SELECT BOXES
<form action="">
<select name="customers" id="customers" onchange="showUser(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
<div id="txtHint">Customer info will be listed here...</div>
Ajax Script for Chained Select box
<script type="text/javascript">
$(document).ready(function()
{
$("#customers").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}
});
});
});
</script>
Related
I have an Inline editable Table which updates the Mysql table for the team group column I want to use the drop-down list.
But the table is saving all the value of Dropdown instead of the one i have selected
Below is the code I'm working with and few screenshot for your reference
<td class="editable-col" contenteditable="True" col-index='5' oldVal ="<?php echo $res['TeamGroup'];?>" nowrap>
<?php echo $res['TeamGroup'];?>
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
As suggested i'm adding the script-
<script type="text/javascript">
$(document).ready(function(){
$('td.editable-col').on('focusout', function() {
data = {};
data['val'] = $(this).text().trim();
data['id'] = $(this).parent('tr').attr('data-row-id');
data['index'] = $(this).attr('col-index');
if($(this).attr('oldVal') === data['val'])
{
return false;
}
$.ajax({
type: "POST",
url: "server.php",
cache:false,
data: data,
dataType: "json",
success: function(response)
{
if(response.status) {
$("#msg").removeClass('alert-danger');
$("#msg").addClass('alert-success').html(response.msg);
} else {
$("#msg").removeClass('alert-success');
$("#msg").addClass('alert-danger').html(response.msg);
}
}
});
});
});
</script>
I apologize if this is a very simple question, however I am not able to find any answers or don't know what I am doing wrong here.Also I am new to ajax and jquery. Thanks for helping in advance!
I have a select menu which I want to submit to the page on change I have the following:
<from action="" method="post">
<select name="option">
<option value="a">a </option>
<option value"b">b </option>
<option value"c">c</option>
</select></form>
and
<script type="text/javascript" >
$('#option').change, (function(e)
{
e.preventDefault();
$.ajax({
type: 'post',
url: "",
data: $("form.option").serialize(),
success: function() {
}
});
return false;
});
</script>
and to check if it has submitted
<?php
if (isset($_POST['option'])) {
echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
}
?>
The form is submitted fine, however the page is still reloading on change, is there a way to stop the reloading of the page?
Any help would be appreciated!
try this code
<?php
if (isset($_POST['option'])) {
echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
exit;
}
?>
<form action="" method="post">
<select name="option" id="option">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</form>
<div id="msg">
</div>
<script type="text/javascript" src="../library/jquery-3.2.1.min.js"></script>
<script type="text/javascript" >
$('#option').change(function(e)
{
e.preventDefault();
var data="";
data=$("#option").val();
$.ajax({
type: 'post',
url: "",
data: {option:data},
success: function(result) {
$('#msg').html(result);
}
});
return false;
});
</script>
your output will be in div tag which option is submit the form
you can also display in alert
alert(result);
or using console in developer tool
console.log(result);
Try this
<select id="option" name="option">
<option value="a">a </option>
<option value"b">b </option>
<option value"c">c</option>
</select>
And your jquery should be
<script type="text/javascript" >
$('#option').change(function()
{
var option_val = $(this).val();
$.ajax({
type: 'post',
url: "",
data: "option="+option_val,
success: function(res)
{
alert(res)
}
});
});
</script>
Simple Example :
<?php
if (isset($_POST['option'])) {
echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
die;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>temporary test</title>
</head>
<body>
<select id="option">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('#option').change(function(){
var option_val = $(this).val();
$.ajax({
type: 'post',
url: "",
data: "option="+option_val,
success: function(res)
{
alert(res)
}
});
});
</script>
</html>
I want to make dropdown where I select the value and it can fetch data from database without submit button.
I paste my code here I am student and making project I shall be very thankful to you please help...
My controller is
public function find($id)
{
$product=$this->user_model->find($id);
echo "ID ".$product->email;
}
Model is
public function find($id)
{
$this->db->where('id',$id);
return $this->db->get('users')->row();
}
View file:
<script type="text/javascript">
$(document).ready(function() {
$('#slt').change(function(){
var country_id = $('#slt').val();
$.ajax({
type: 'GET',
url: "<?php echo base_url('index.php/main/find/')?>"+country_id,
success: function(result)
{
$('#result').html(result);
}
});
});
});
</script>
<form>
<input type="button" value="find" id="btnfind"/>
<select name="opt" id="slt">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">one</option>
<option value="4">two</option>
</select>
<br/>
<div id="result"></div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#slt').change(function(){
var country_id = $('#slt').val();
$.ajax({
type:'GET',
data:country_id,
url:"<?php echo base_url('index.php/main/find/')?>",
success:function(result)
{
$('#result').html(result);
}
});
});
});
</script>
Change $('#result').html(result) to $('#result').text(result)
Below is my code, everything is working. I am giving input to first textbox and getting ajax response to second textbox and than select option show the same value as second textbox but select option only change when i press arrow key after putting cursor in second textbox, here i want to change select option without putting cursor or pressing any key.
Code:
<script>
$(document).ready(function() {
$('#searchip').change(function(){
$.ajax({
type: "GET",
url: "reverseip.php",
data: 'result=' + $('#searchip').val(),
success: function(output){
$('#resultip').val(output);
}
}); // Ajax Call
}); //event handler
}); //document.ready
</script>
<script type="text/javascript">
$(function() {
$('#resultip').on('keyup', function() {
selectByText($.trim($(this).val()));
});
});
function selectByText(txt) {
$('#MySelect option')
.filter(function() {
return $.trim($(this).text()) == txt;
})
.attr('selected', true);
}
</script>
<input type="text" id="searchip">
<input type="text" id="resultip">
<select name="sel" id="MySelect" >
<option value="">Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
How to change selectbox option without pressing arrow key in second textbox?
Call the same function when you set the value of the text box:
success: function(output){
$('#resultip').val(output);
selectByText($.trim($('#resultip').val()));
}
Make change in ajax call success function as follows:
success: function(output){
$('#resultip').val(output);
$('#MySelect option[value='+output+']').attr('selected','selected');
}
How do i pass the selected value in a SELECT tag with serializeArray?I tried the followng code but when i click post it empties the select tag option.
html
<form action="" name="frm" id="frm" method="post">
<input type="text" name="title_val" value="abc" id="title_val"/>
<select name="test" id="test">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
post
</form>
JS
$( document ).ready(function() {
$('#save').click(function() {
var form = $('#frm');
$.ajax({
url: 'topic.php',
type:'post',
data: form.serializeArray(),
success: function(response) {
$('#test').html(response);
}
});
});
});
php
<?php
echo $_POST['test'];
?>
following code works for me,
data: form.serialize();