Ajax response from textbox to select option - javascript

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');
}

Related

jQuery onchange function on one select, ajax populating secondary select. How to change back to default value?

I have two select elements. One for manufacturer and one for model. The manufacturer select element will update the model select element on change via ajax. The function I have works well, but I'd like to add in functionality to change the model select element back to it's default value (Select model...) and disable the model select if the primary manufacturer select element is set back to its default original value (Select manufacturer...).
Manufacturer select (primary)
<select name="inputManufacturer" id="inputManufacturer" class="form-control">
<option selected>Select manufacturer...</option>
<option value="1">Apple</option>
</select>
Model select (secondary, updates via ajax)
<select name="inputModel" id="inputModel" class="form-control" disabled>
<option>Select model...</option>
</select>
jQuery function
$(document).ready(function ()
{
$('select[name="inputManufacturer"]').on('change',function(){
$('select[name="inputModel"]').prop('disabled', false);
var man_ID = $(this).val();
if(man_ID)
{
$.ajax({
url : 'add/' +man_ID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
$('select[name="inputModel"]').empty();
$.each(data, function(key,value){
$('select[name="inputModel"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}
else
{
$('select[name="inputModel"]').empty();
}
});
});
Give the default options value="0"
Then you can use $('select[name="inputModel"]').html('<option value="0">Select model...</option>'); instead of empty. And disable it after that.
$(document).ready(function ()
{
$('select[name="inputManufacturer"]').on('change',function(){
$('select[name="inputModel"]').prop('disabled', false);
var man_ID = $(this).val();
if(man_ID > 0)
{
$('select[name="inputModel"]').append('<option value="1">Option1</option>');
$('select[name="inputModel"]').append('<option value="2">Option2</option>');
}
else
{
$('select[name="inputModel"]').html('<option value="0">Select model...</option>');
$('select[name="inputModel"]').prop('disabled', true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="inputManufacturer" id="inputManufacturer" class="form-control">
<option value="0" selected>Select manufacturer...</option>
<option value="1">Apple</option>
</select>
<select name="inputModel" id="inputModel" class="form-control" disabled>
<option value="0">Select model...</option>
</select>

Drop-down clicked, a form created

enter image description here
This error message keeps opening on console.
And I am using Ember.js
I am trying to make a drop-down and whenever on option from a drop-down is clicked, a form should be made based on what an option is chosen. For example, there are 3 options on dropdown: name, text, drop-down. When a user click a text, a text form should be created below. I already made an dropdown and tried to implement by writing document.write(" < /h1>"), but it keeps saying uncaught syntax error. Can someone help me please?
<script type="text/javascript">
function clicking(option) {
if (option === "name")
//document.write("<h1>Hello<h1>");
}
</script>
<h1>Data Form Test</h1>
<div id="dropdown">
<form>
<select id="selectBox" onchange="clicking(this)">
<option value="" disabled="disabled" selected="selected" style="display:none">Please select a option</option>
<option value="name">Name</option>
<option value="title">Title</option>
<option value="text">Text</option>
<option value="check-box">Check-box</option>
<option value="drop-down">Drop-down</option>
<option value="calendar">Calendar</option>
</select>
</form>
</div>
<div id="div1"></div>
<script type="text/javascript">
function clicking(option) {
if (option == "name"){
//document.write("<h1>Hello<h1>");
}
}
</script>
and on html
onchange="clicking(this.value)"
You can't access your selected value via option, you need to use property value instead. In my example I changed option with event.
To write some HTML/text into div/selector use .innerHTML method instead of document.write.
See working example.
function clicking(event) {
if (event.value === "name")
document.getElementById('div1').innerHTML = "<h1>Hello<h1>";
}
<h1>Data Form Test</h1>
<div id="dropdown">
<form>
<select id="selectBox" onchange="clicking(this)">
<option value="" disabled="disabled" selected="selected" style="display:none">Please select a option</option>
<option value="name">Name</option>
<option value="title">Title</option>
<option value="text">Text</option>
<option value="check-box">Check-box</option>
<option value="drop-down">Drop-down</option>
<option value="calendar">Calendar</option>
</select>
</form>
</div>
<div id="div1"></div>
If you would like to use your form to perform for example an ajax request. Here is another example I created for you.
I used addEventListener to show to different approach of handling your clicking function.
Read my comments.
// Our selectors
var form = document.getElementById('example-form');
var select = document.getElementById('selectBox');
var result = document.getElementById('result');
// Let's add an event listener to our form, we will listen whenever we submit the form
form.addEventListener('submit', function(e) {
var elements = this.querySelectorAll('input, select');
var formData = {};
for(i = 0; i < elements.length; i++) {
var element = elements[i];
Object.assign(formData, { [element.name] : element.value })
}
console.log(formData);
// Now you can perform some ajax call eg.
// I've commented it out, but code works, you just need to replace url
//$.ajax({
// url: 'http://example.com/action/url/',
// type: 'post',
// data: formData, // our form data
// success: function(response) {
// result.innerHTML = response;
// }
//})
// Prevent Page from autoreloading
e.preventDefault();
return false;
});
// Another approach of handling your clicking function is by passing eventListener to select
select.addEventListener('change', function(e) {
// Log
//console.log(e.target.value);
// We can use switch here for example
// Code becomes more readable
switch (e.target.value) {
case 'name':
case 'title':
case 'text':
result.innerHTML = '<h1>Hello ' + e.target.value + '</h1>';
default:
break;
}
});
<form id="example-form">
<select id="selectBox" name="selectBox">
<option value="" disabled="disabled" selected="selected" style="display:none">Please select a option</option>
<option value="name">Name</option>
<option value="title">Title</option>
<option value="text">Text</option>
<option value="check-box">Check-box</option>
<option value="drop-down">Drop-down</option>
<option value="calendar">Calendar</option>
</select>
<input name="example1" value="" placeholder="example input 1" />
<input name="example2" value="" placeholder="example input 2" />
<button type="submit">Submit me</button>
</form>
<div id="result"></div>

getting perticular listbox selected value using javascript

I have html listbox as, which has same name but different id
<select name="dept" id="vrow" >
<option selected="selected" > - Select Department- </option>
<option value="GEN">computer </option>
<option value="SC">mac </option>
<option value="ST">civ </option>
<option value="OBC">ele </option>
</select>
i had atteched it to each row fetched from database,
how can i get ID if i change perticular listbox value.
If you need id then use:
document.getElementById('vrow').addEventListener('change', function(e) {
if (e.target.name==='dept') {
alert(e.target.id);
}
})
Working Demo
If you need value then use:
document.getElementById('vrow').addEventListener('change', function(e){
if (e.target.name==='dept') {
alert(e.target.value);
}
})
Working Demo
You Write Javascript Function or Jquery function
like this
<select onchange="dept(this.value)" name="dept" id="vrow" >
<option selected="selected" > - Select Department- </option>
<option value="GEN">computer </option>
<option value="SC">mac </option>
<option value="ST">civ </option>
<option value="OBC">ele </option>
</select>
<script type="text/javascript">
function dept(id){
$.ajax({
url: 'ajax.php',
data: { id: id} ,
success: function (response) {
try{
alert(response);
}
catch(e){
alert("Error"+e);
}
},
error: function (e) {
alert("error"+e); or alert("error"+JSON.stringify(e));
}
});
}
</script>
Ajax.php
You can add event listener on change event to parent node of all <select> elements it can ul if they are in list or even body.
<script type="text/javascript">
document.getElementByTagName('UL').addEventListener('change', function(e) {
if (e.target.name==='dept') {
//In this case you have got element that you need and its id
//e.target.id
alert(e.target.id);
}
});
</script>

Select box option based on text box value

Below is my code which change select option based on text box value but I want to change value of select option without click on "Select Now" button. Means select option change directly from text box value, button is not needed to do same.
<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>
</select><br><br>
Select By Text: <br>
<input type="text" name="selText" value="Six">
<input type="button" name="selectNow" value="Select Now">
$(function() {
$('input[name=selectNow]').on('click', function(event) {
selectByText($.trim($('input[name=selText]').val()));
}).click();
});
function selectByText(txt) {
$('#MySelect option')
.filter(function() {
return $.trim($(this).text()) == txt;
})
.attr('selected', true);
}
The logic is the same, except you need to hook to the keyup event on the selText element:
$('input[name=selText]').on('keyup', function() {
selectByText($.trim($(this).val()));
});
Example fiddle
Just change the event to be raised when the value of selText changes:
$('input[name=selText]').on('change', function(event) {
selectByText($.trim(this.value));
}).change();
See Fiddle

Select Onchange function in two dropdownlist

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>

Categories