Develop Reference

How can I get value of textbox? It returns undefined

Here is my textbox
<input type="text" name="allowance" id="rs1"
class="form-control allowance1" placeholder="Allowance (Rs.)">
Here is my code for disable textbox
<script type="text/javascript">
$('.allowance1').attr('readonly', true);
</script>
While I Change dropdown value at that time I want textbox value.
$(".val").change(function() // this is dropdown class name
{
var a=$("#rs1").val();
alert(a);
}
I have some value in textbox and It returns undefined.

Since your demo code for input didn't have a value, I added one.
Here's a working code... and I don't see an issue with yours. Is this the expected behaviour?
You should probably check on the logic that changes the value of the input field. I have mocked it in the demo.
$('.allowance1').attr('readonly', true);
$(".val").on("change", function() {
alert($("#rs1").val())
});
$(".change-value").on("click", function() {
$("#rs1").val(Math.random());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="" class="val">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="allowance" id="rs1" value="asdf" class="form-control allowance1" placeholder="Allowance (Rs.)">
<button class="change-value">Change Input Value</button>

I guess you are trying to do like this.
HTML:
<input type="text" name="allowance" id="rs1" class="form-control allowance1" placeholder="Allowance (Rs.)">
<select class="val">
<option value"One">One</option>
<option value"Two">Two</option>
<option value"Three">Three</option>
</select>
JS:
$( ".val" ).change(function() {
$("#rs1").val("some text");
alert( $("#rs1").val());
});
working DEMO

This works for me. Instead of get the value on $("#rs1").on('keyup'... you have to do this on your dropdown change listener. You can check my demo
$("#rs1").on('keyup', function(){
var value = $("#rs1").val();
alert(value);
});
I hope it helps.

Make one function and fire it onChange of Dropdown
function gettextvalue()
{
var a= $("#l").val();///l is textbox id
alert(a);
}

Remove one value from all drop down using jquery

I have multiple drop down with same value.If they select Lunch first time from other drop down I have to remove Lunch. Following is my code
Front end code
<?php for($i=1; $i<=7; $i++)
{?>
<select name="task<?php echo $i;?>" onchange="checkSelected(this,<?php echo $i; ?>);" id="task<?php echo $i;?>"
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
<?php } ?>
In javascript I am removing 3rd select box (task3) its got removed but i have to remove all the other except the selected one how i can implement this
javascript function
function checkSelected(e,number)
{
if(e.value == 'Lunch')
{
$('#task3 option[value="Lunch"]').remove();
}
}
I tried this but its not working
$("#task+"number"+ > option[value='Lunch']").remove();

It should be
$("#task" + number + " > option[value='Lunch']").remove();

You could use the .each() function to remove only the option that has the value you select from the list.
$('select').change(function(){
var value = $(this).val()
// Probably best to store this value here before removing the option below.
$(this).children().each(function(){
if($(this).val() == value){
$(this).remove();
}
});
});
Working example - http://jsfiddle.net/amQuU/
Example with multiple dropdowns http://jsfiddle.net/amQuU/1/
Example that removes the options from another select box - http://jsfiddle.net/amQuU/2/
The only problem in doing this is that by removing the selected option it is not shown as the selected option. you can however store the value after selecting it and before removing it from the list as commented above.
Another thing you should consider is changing .remove() to .attr('disabled','true') so that you can re-enable the option later on if you need to e.g. someone wants to go back and change the previous select. Here is an example of that too http://jsfiddle.net/amQuU/3/

If only the "lunch" option is concerned by your answer (see my comment above), then there's a solution. It's not already full-optimized, but you see how you can do it.
JSFiddle http://jsfiddle.net/4qndV/1/
HTML
<form action="demo.html" id="myForm">
<p>
<label>First:</label>
<select class="event_handler" name="task1">
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
</p>
<p>
<label>Second:</label>
<select class="event_handler" name="task2">
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
</p>
<input type="submit" value="Submit">
</form>
JQuery
$(function () {
// Handler for .ready() called.
$(".event_handler").on("change", function () {
event.preventDefault();
var name_select = $(this).attr("name");
if ($(this).val() == "Lunch") {
//Loop through each "lunch" element
$('.event_handler option[value=Lunch]').each(function(){
//Remove all 'lunch' option, except the ont in the 'name_select' select
if($(this).parent().attr("name") != name_select){
$(this).remove();
}
});
}
})
});
NB: I suppose you have to allow the user to change his selection. It's why I use "disable" in place of "remove". But you can easily adapt this code if you really want to remove the option element.

Set an option as selected from select dropdown using jquery

I have a select dropdown list having n number of options, i want on page load, option which i selected earlier should get selected in dropdown using jquery :
Here is my html code :
<select id="myList">
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
</select>
<input type="hidden" value="1" id="hiddenoptionid" />
Here is my jquery code :
$(document).ready(function() {
var projectId=document.getElementById("hiddenoptionid").value;
$("#myList option[value="+projectId+"]").attr("selected", "selected");
});
$("#projectlist").on('change', function() {
var id = $(this).val();
document.getElementById("hiddenoptionid").value=id;
location.reload();
});
Thanks.

You can use like,
$(document).ready(function(){
$("#projectlist").val($("#hiddenoptionid").val());
});
Note that, if you reload the page, $("#hiddenoptionid").val() will get reset to 1 again. If you want to retain that value, use cookies for that

HTML:JS:BOOTSTRAP ; validate the multiselect dropdown

In my web application we have used the twitter-bootstrap theme. I have to do client side validation for one form in my application. The form includes text fields,checkboxs and multiselect dropdowns. I can validate textfield and checkboxes but i cant validate the dropdown.
<select id="users" name="username[]" class="chzn-select span2" multiple="multiple">
<option value="sdfsd">sdfsdfs</option>
....
</select>
But during runtime the select tag is hide and they generate <li> tags.
I cant use document.getElementByID();
Please provide me the best way to do the validation.

Try this
HTML
<form action="#">
<select id="users" name="username[]" class="chzn-select span2" multiple="multiple">
<option value=""></option>
<option value="sdfsd">sdfsdfs</option>
....
</select>
<input type="submit" id="add_btn">
</form>
Script
$('#add_btn').on('click', function(e) {
if($('#users').val() == null && $('#users_chosen').is(':visible')) {
alert('You must choose division');
}
});
DEMO
OR
$(function(){
$('form').submit(function(){
var options = $('#users > option:selected');
if(options.length == 0){
alert('no value selected');
return false;
}
});
});
DEMO

//You can use Js for this
var ptype=document.getElementById('username').options[document.getElementById('username').selectIndex].value;
if(ptype=""){
document.getElementById('username').style.display='none';
alert('Please select field');
document.getElementById('username').focus();
return false;
}

Javascript producing a value into a form textbox on selection

Trying to figure out how I can produce text dynamically in a text box of a form using javascript.
I want to select a type of event from a dropdown list which I have made and on that selection a value be input in to the textbox of the form for eventprice.
So far this is what I have but I have no value being produced in the textbox any help appreciated.
function totalprice(){
if($('#type').val() == '3'){
$('#eventprice') == ("45");
}
}
<input type="text" disabled="" id="eventprice" onChange="totalprice();" name="eventprice" class="form-input" />

If you don't mind using jQuery, it is going to be a breeze: you'll simply need to add the data attribute price to every option. What this function does is:
Compares the value of all options to the value currently visible in the select box when the value is changed.
If the values are the same, copies the data-attribute to the other input.
Working demo: http://jsbin.com/acuyux/6/edit
The HTML
<select id="type">
<option data-price="25">Party</option>
<option data-price="35">Meeting</option>
<option data-price="45">Lounge</option>
</select>
<input type="text" id="eventprice" name="eventprice" disabled="" class="form-input" />
The JS
$('#type').change(function totalprice(){
$('option').each(function() {
if($(this).val() === $('#type').val()) {
$('#eventprice').val($(this).data('price'));
}
});
});

I would recommend using jQuery due to its efficient code.
HTML:
<input type="text" disabled id="eventprice" />
<select id="select">
<option data-cost="5">Event 1</option>
<option data-cost="10">Event 2</option>
</select>
jQuery:
$('#select').change(function () {
var str = $(this).find('option:selected').data('cost');
$('#eventprice').val(str);
});
// This code can be used to run it on load
// $('#select').trigger('change');
Code in action:
http://jsfiddle.net/LkaWn/
Hope this helps :)

Modify the 3rd/4th line of your code to be $('#eventprice').val("45"); as suggested, except that the suggestion had a syntax error.