Develop Reference

trigger/bind jquery event for textbox on page load

I have a zip code textbox in view1 when the user enters zip code and click next to add more details I am passing zip code from view1 to view2. In view2 I need to display state and city based on the zip code entered. I have used keyup to get city and state based on zip entered. It works fine when I change zip code in view2.But dones not work when i am coming from view1 to view2. I need to trigger event for zip code textbox on page load I mean when zip code is passed from view1 to view2. Right now when I come from view1 to view2 only zip code display in its respective textbox, and city and state field don't display anything. How do I trigger an event for zip code textbox or bind to the existing event on page load?
$(document).ready(function ()
{
$("#zip").keyup(function () {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
type:'GET',
dataType: "json",
cache: true,
url: "../api/Getstatelist/" + el.val(),
success: function (html) {
$.each(html,function(key,value){
$('#state').append($('<option></option>').val(value.State).html(value.State));
});
$.each(html,function(key,value){
$('#city').append($('<option></option>').val(value.City).html(value.City));
});
}
});
}
});
});
<div>
<div class="city-wrap">
<select id="city">
<option value="">Select City first</option>
</select>
<label for="city">City</label>
</div>
<div class="state-wrap">
<select id="state">
<option value="">Select State </option>
</select>
<label for="state">State</label>
</div>
<div class="zip-wrap">
#Html.TextBoxFor(model => model.Zip, new { #class = "form-control", #id = "zip", #name = "zip" })
<label for="zip">Zip</label>
</div>
</div>

I figured out the solution. Added on load function like below. I am not sure is this the right way to do. Any suggestions would be helpful.
$( window ).on( "load", function() {
var val = $('#zip').val();
if (val.length === 5) {
$.ajax({
type:'GET',
dataType: "json",
cache: true,
url: "../api/Getstatelist/" + val,
success: function (html) {
$.each(html,function(key,value){
$('#state').append($('<option></option>').val(value.State).html(value.State));
});
$.each(html,function(key,value){
$('#city').append($('<option></option>').val(value.City).html(value.City));
});
}
});
}
}

Populate select2 dropdown dynamically

I am using select2 version 3.5.4.
I want to have two select2 dropdowns side by side. When page loads first time one select2 dropdown has data whereas second select2 dropdown is empty. Once user clicks on an entry/option in the first select2 dropdown an ajax call should be made to the server and second select2 dropdown should be populated with ajax response data. I am not being able to achieve it. Whenever i try to populate second dropdown I get errorrs like,
Option 'data' is not allowed for Select2 when attached to a <select> element
Option 'ajax' is not allowed for Select2 when attached to a <select> element
My code is something like,
HTML:-
<div class="form-group">
<label class="col-md-4 control-label" for="folderSelect">Files & Folders</label>
<div class="col-md-5">
<div class="select2-wrapper">
<select class="form-control select2" id="folderSelect" name="folderSelect">
<option></option>
<option th:each="folder : ${folders}" th:value="${folder}" th:text="${folder}"/>
</select>
</div>
</div>
<div class="col-md-5">
<div class="select2-wrapper">
<select class="form-control select2" id="fileSelect" name="fileSelect">
<option></option>
<option th:each="file: ${files}" th:value="${file}" th:text="${file}"/>
</select>
</div>
</div>
</div>
JS:-
$('#folderSelect').on("select2-selecting", function(e) {
var value = $(e.currentTarget).find("option:selected").val();
var data = null;
$.ajax({url: "test?value=" + value, success: function(result){
data = result;
return result;
}});
$("#fileSelect").select2({
/* ajax: { // Tried but didn't work
dataType: 'json',
url: 'test',
results: function (data) {
return {results: data};
}
}*/
/*data: function() { //Tried but didn't work
$.ajax({url: "test", success: function(data){
return data;
}});
}*/
});
//Tried but didn't work <br>
$("#fileSelect").select2('destroy').empty().select2({data: data});
});

follow this
$("#fileSelect").empty();
$("#fileSelect").select2({data: data});
It worked well in my case

How to program Select Menu's using Javascript

I'm new here to stack overflow and I've been searching on how to program drop-down menus in HTML and jscript. I've found a few decent examples but since I don't know much about jscript. I'm trying to integrate what I currently have to work with the labVIEW webservice. I will add the code I have below. Basically the buttons I have work perfectly with the javascript and the buttons. I want the select menus to work exactly the same so when I select a value it will call a function that will assign the value I need to the URL. For example when the start button is pushed it assigns start=1 in the url "digital" I want the same thing to happen for the select menu. When I select 511 from the dropdown menu I want it to assign the variable patternselector=1 in the url digital. Same thing for 2047 patternselector=0 in the url"digital" and so forth etc. I don't know what I'm doing at all so if someone could please help me right the example code/ function so I know how to program all of my other select menu's I have that will be awesome.
<html>
<head>
<script language="javascript" type="text/javascript" src="js/jquery.js </script>
<script type="text/javascript">
<select id="category" class="icon-menu" onchange="myFunction()"></select>
$(function() {
function onDataReceived(data) {
// update the displayed count
$('#errorfreeseconds').text(String(data.Temperature).substring(0,4) + " degF");
}
function fetchData() {
$.ajax({
url: "digital",
type: "GET",
//data: params,
dataType: "json",
success: onDataReceived
});
setTimeout(fetchData, 1000);
}
fetchData();
$('#start').click(function(){
$.ajax({
url: "digital",
type: "GET",
data: "start=1",
//dataType: "json",
//success: onDataReceived
});
});
$('#stop').click(function(){
$.ajax({
url: "digital",
type: "GET",
data: "stop=1",
//dataType: "json",
//success: onDataReceived
});
});
});
</script>
</head>
<body>
<div id="errorfreeseconds" style="font-size: 300%">0 Error Free Seconds</div>
</br>
<button id="start"style="font-size: 200%">Start Test</button>
<button id="stop" style="font-size: 200%">Stop Test</button>
<select>
<option value="2047">2047</option>
<option value="511">511</option>
<option value="63">63</option>
<option value="71">7:1</option>
<option value="31">3:1</option>
<option value="17">1:7</option>
<option value="14">1:4</option>
<option value="13">1:3</option>
<option value="11">1:1</option>
<option value="Space">Space</option>
<option value="Mark">Mark</option>
<option value="215">2^15-1</option>
<option value="220">2^20-1</option>
<option value="223">2^23-1</option>
<option value="QRSS">QRSS</option>
</select>
<h3 style="color:green;">BAUD RATE(in Hertz)</h3>
<select>
</body>
</html>

Assuming the select element has id="mySelect" :
$('#mySelect').on('change', function() {
var value = $(this).val();
// do whatever arcane thing you need to do with the value.
});

Appending options to select element doesn't work - MaterializeCSS

I want to update a select options according to date that the user picks. For that I tried using ajax request to get data and append the data received to a select element as options. There's nothing wrong with the json object that's received as I tried logging data to console and it gives the data I ant. But hen I try to append it to select element the options do not get appended.
JavaScript code
$.ajax({
type: 'GET',
url: 'sessions',
data: { date: date },
success: function (data) {
var sessions = data['sessions'];
console.log(sessions);
$('select').html('');
$.each(sessions, function (i, session) {
$('select').append($('<option/>', {
value: session[0],
text : session[1]
}));
console.log(i);
console.log(session[1]);
});
}
});
html code
<div class="row">
<div id="sessionDiv" class="input-field" style="padding:10px">
<select class="black-text text-lighten-1" name="session" id="session" >
<option value="0" disabled selected>Choose your preferred session</option>
</select>
<label for="session" class="purple-text text-lighten-2"> Session :</label>
</div>

function f1(){ $.ajax({
type: 'GET',
url: 'sessions',
data: { date: date },
success: function (data) {
var sessions = data['sessions'];
console.log(sessions);
$('select').html('');
$.each(sessions, function (i, session) {
$('select').append($('<option/>', {
value: session[0],
text : session[1]
}));
console.log(i);
console.log(session[1]);
});
}
});
}
var data ={
"sessions" : [{"value":"value 1","text":"Option 1"},
{"value":"value 2","text":"Option 2"},
{"value":"value 3","text":"Option 3"},
{"value":"value 4","text":"Option 4"},
{"value":"value 5","text":"Option 5"}]
}
function fillSelect(){
var sessionList=data.sessions;
$('#session12').empty();
var msg='';
console.log(sessionList.length);
for(i=0;i<sessionList.length;i++){
var bean=sessionList[i];
msg+='<option value="'+bean.value+'">'+bean.text+'</option>';
}
$('#session12').html(msg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div id="sessionDiv" class="input-field" style="padding:10px">
<select class="black-text text-lighten-1" name="session" id="session12" >
<option value="0" disabled selected>Choose your preferred session</option>
</select>
<button type="button" onclick="fillSelect()"> click to fill</button>
<label for="session" class="purple-text text-lighten-2"> Session :</label>
</div>
</div>
If response of async request you are getting in data is similar to what i have written in data variable in snippet then my way of generating the option will work just fine. If response you are getting is exactly same as i have shown in data(by that i mean structure of the variable) then you can simply replace all your code in ajax function with my code in fillSelect function

Selected option value sending with ajax

I am trying to insert into the database a selected option value and a text input with jQuery but I get a
Uncaught SyntaxError: Unexpected identifier
<div class="text-field" id="catUp" >
<form id="upload_category" method="post" >
<div class="text-inside">
<select id="select-category">
<option value="audio">Audio,Video</option>
<option value="electro">Electrocasnice</option>
<option value="ingrijire">Ingrijire personala</option>
<option value="pc">PC</option>
<option value="telefoane">Tablete,telefoane</option>
</select><br><br>
<div id="insert-category">Nume Categorie<br>
<input type="text" name="input-categorie" /><br><br>
</div>
<input type="submit" name="sumit" value="Adauga categorie" id="catButton" class="button" /><br><br>
</div>
</form>
</div>
$('#upload-category').on('submit', function(){
var getCategory = '';
var getCategoryName = $('#insert-category').val();
$('#select-category').change(function(){
var selectedCat = $('#select-category option:selected');
getCategoryName = selectedCat;
})
var items = {
'categorie': getCategory,
'nume':getCategoryName
}
$.ajax({
url:'category.php',
type: 'post',
contentType: 'application/json',
dataType: 'json'
data:JSON.stringify(items)
});
});

$.ajax({
url:'category.php',
type: 'post',
contentType: 'application/json',
dataType: 'json', //you forgot comma here
data:JSON.stringify(items)
});
you forgot comma here after this line dataType: 'json',

Few things I have noticed.
//this is div
$('#insert-category').val();
//you probably wanted input value - add id to input-categorie and get value from there.
Why do you have change function inside submit? And you forgot ; add the end of change function.
Add prevent default at the end of submit, to prevent from page reloading (return false;).