Develop Reference

Sending each select value via javascript to php script

I'm using ajax function to send select values to my php script, it is working fine but i have issue when there user add multiple data, i have option to add multiple add child in the form, user can add as many fields.
I need a each loop here. This is my code.
<select class="firstpiller" name="firstpiller">
<option value="0">0</option>
<option value="1">1</option>
</select>
<select class="thirdpiller" name="thirdpiller">
<option value="2">2</option>
<option value="3">3</option>
</select>
if (document.querySelector('[name=firstpiller]') != null){
var firstpiller = document.querySelector('[name=firstpiller]').value;
} else {
var firstpiller = null;
}
if (document.querySelector('[name=thirdpiller]') != null){
var thirdpiller = document.querySelector('[name=thirdpiller]').value;
} else {
var thirdpiller = null;
}
var stepVar = firstpiller + "--" + thirdpiller;
Can anyone help how should i write each loop here?
Thanks in advance.

add a common class to the select say you are given a class .myselect, now you can do something like below
var stepvar = '';
$('.myselect').each(function(value){
stepvar += '--' + value.val();
});
alert(stepvar);

Converting a JavaScript function to jQuery - Select option list

This is literally the first time I've worked with jQuery and I've read the entire chapter in my textbook but am finding a hard time wrapping my head around it. I'm attempting to convert a JavaScript function (a simple option selection drop-down list) to jQuery. I've attempted a few lines of code that I've gotten from the book or from w3schools and api.query but to no avail. I'll try to make this quick and simple, I just cannot understand jQuery for some reason.
What I've attempted usually doesn't work. Before my option list works fine, then I tried experimenting but I didn't get too far.
I also apolgize for the vagueness of the question, I'd appreciate any help!
Here's something I've tried:
$(document).ready( function () {
var c = ???
if ($(c...
calc.js and index.html below it
function selectedCountry() {
var c = document.getElementById("countryChooser").value;
var message;
if (c == "nothing") { //if they selected the default option, error pops up.
alert("Please select a country.");
} else if (c == "usa") {
message = "United States of America";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else if (c == "canada") {
message = "Canada";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else {
message = "Mexico";
document.getElementById("count").innerHTML = "Your country is: " + message;
}
}
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser" onchange="selectedCountry()">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

Through jQuery you can do it like below:-
Example:-
$(document).ready(function(){
$('#countryChooser').change(function(){ // on change of select
if($(this).val()!=='nothing'){ // if selected value is some country
$('#count').html("Your country is: "+$("#countryChooser option:selected").text()); // get country name and add it to paragraph
}else{
$('#count').html("");
alert('Please select a country.'); // alert for selecting a country
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

Get an element by id:
var c = $('#countryChooser');
Get the value of this input/select element
var value = c.val();
Set the html of an element using the element id
$('#count').html('some html');
or set the text (html is not parsed this way)
$('#count').text('some html');
You can also handle the events with jQuery
$(document).ready(function() {
$('#countryChooser').on('change', function(event) {
// this is the DOM element with the id 'countryChooser'
// same as the native: var val = this.value;
var val = $(this).val();
// ...
});
});

I have bind the onchange() event of your select list inside the jQuery(document).ready() method. check this out-
// Updated code--
$(document).ready(function (){
$('#countryChooser').on('change' ,function () {
if(this.selectedIndex){
$('#count').html("Your country is: "+ this.options[this.selectedIndex].text);
}else{
$('#count').html("");
alert("Please select a country.");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

$('#countryChooser').change(function(){
var selectedCountry = $(this).val();
if(selectedCountry == 'nothing'){
console.log('Select A country');
}
else{
$('#count').html('Your country is '+$('#countryChooser option:selected').text());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--JavaSript link -->
<select name="countrylist" id="countryChooser" >
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>
Please check the code might help you out
thanks

HTML5 Datalist auto suggest shows the list that starts with the search keyword

I am using HTML5 Datalist for autosuggestion in my project.by default HTML5 follows the keyword contains approach rather then starts with appoarch.or example if i have a datalist of one,two,three means if i type o in the search box,it is showing both one and two.but what i am expecting is to show only one in the autosuggestion list.guys pleas help me out how to achieve this.
<input list="sampleList" >
<datalist id="sampleList">
<option value="one">
<option value="two">
<option value="three">
</datalist>

A possible duplicate to: HTML datalist: Is there a way to autocomplete based character order?.
JSFiddle Link by Buddhi Madarasinghe from the site above.
<input type="text" list="countries" name="mycountry" id="countryInput" />
<datalist id="countries">
<option value="India">India</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Israel">Israel</option>
</datalist>
You can achieve it with the help of JavaScript.
var initialArray = [];
initialArray = $('#countries option');
$("#countryInput").keyup(function() {
var inputVal = $('#countryInput').val();
var first = [];
first = $('#countries option');
if (inputVal != '' && inputVal!= 'undefined') {
var options = '';
for (var i = 0; i < first.length; i++) {
if (first[i].value.toLowerCase().startsWith(inputVal.toLowerCase())) {
options += '<option value="' + first[i].value + '" />';
}
}
document.getElementById('countries').innerHTML = options;
}
else
{
var options = '';
for (var i = 0; i < initialArray.length; i++) {
options += '<option value="' + initialArray[i].value + '" />';
}
document.getElementById('countries').innerHTML = options;
}
});
You can even modify the code for different search queries:
JSFiddle Link

Only by javascript (perhaps jQuery autosuggest) as default suggestions depends on browser's implementation of the datalist tag. And It's very poor. But, As long as I remember, IE compares only first letter

javascript drop down list equal to the same number of textbox

I have one drop-down list that has numbers 1-10 and a proceed button.
What I want is, when the user select a specific number and the user click the proceed button, it should display a number of textboxes equal to the number of selected in the drop-down list.
is it possible to doit with a loop? or any suggestions?

Using addEventListener, you can generate the textboxes as:
function create(param) {
//'use strict';
var i, target = document.getElementById('screens');
target.innerHTML = '';
for (i = 0; i < param; i += 1) {
target.innerHTML += '<input type="text" name="Fname"><br /><br />';
}
}
document.getElementById('createTextboxes').addEventListener('change', function () {
create(this.value);
}, false);
JsFiddle Demo

Here is an option - using jQuery cos its much cooler than just plain JS - first determine the number of textboxes required based on the value of the select list. Then create a string with the required number of textboxes and third - apply that HTMl to the empty div. Note that the reason for building the textboxes as a string and then adding it to the div is that this requires only one alteration to the DOM - doing it on each iteration would require altering the DOM numerous times. Its fine if you don't want to use jQuery - as the other answers demonstrate - all things done in jQ can be done in JS - but its just more fun to use.
$(document).ready(function(){
$('#selection').change(function(){
var num = $(this).val();
var HTML='';
for(i = 0; i < num; i++){
HTML += "<input type='text' name='textBox"+i+"' /><br/>"
}
$('#newDiv').html(HTML);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for = "selection"> Enter the number of textboxes required</label>
<select id="selection">
<option disabled selected></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<hr/>
<div id="newDiv"></div>

Try this... Pure Js and Fast
function creator(){
var tb = document.getElementById("generator").value
var area = document.getElementById("tbArea");
var childcount = area.childNodes.length;
if(childcount != 0)
{ for(var i = childcount-1; i > -1;i--)
{
area.removeChild(area.childNodes[i]);
}
}
for(var i =0; i < tb; i++){
var tbox = document.createElement('input');
document.getElementById("tbArea").appendChild(tbox);
}
}
document.getElementById("generator").onchange = creator;
<select id='generator'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>
<div id='tbArea'></div>

Option selected value onchange

Hello this is my current code:
<select id="link_course">
<option value="">Select Course</option>
<option value="ALL">ALL</option>
<option value="BSIT" selected>BSIT</option>
<option value="BSA">BSA</option>
<option value="BSBA">BSBA</option>
<option value="BSHRTM">BSHRTM</option>
</select>
<script>
$("#link_course").change(function()
{
document.location.href = "home.php?course=" + $(this).val();
});
</script>
If you click any of those options, for example BSBA, it will go to home.php?course=BSBA, and also you can see that the selected attribute is on the option BSIT. What I wanted to do is whenever I click another link, for example BSHRTM, the selected attribute will go to BSHRTM like it would be <option value="BSHRTM" selected>BSHRTM</option>. Any thoughts?

You can do selection via JavaScript :
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
if(getQueryVariable('course') != false) {
$('#link_course option[value="' + getQueryVariable('course') + '"]').prop('selected', true);
}
Reference

After loading the new page, you need to run JavaScript code to set the value on the correct item from the list.

Use window.location.hrefto get current URL. Then check on which page is user currently on and finally select corresponding option.
if(window.location.href.indexOf('home.php?course=BSHRTM)') != -1) {
$('select#link_course option[value=BSHRTM]').attr("selected","selected");
}
To avoid code duplication see Parse query string in JavaScript

You should do it in PHP:
<option value="BSHRTM" <?php if($course == 'BSHRTM') echo 'selected';?>>
Supposing that you previsously set $course = $_GET['course'];