We Keep Coding

How to change a drop-down list into a text-box on a selection in jQuery?

I have a drop-down list, and I want it to change to an empty text-box when I select the Other option.
HTML code:
<select id='visit'>
<option value='1' class='volunteer'>Romania</option>
<option value='2' class='volunteer1'>Slovakia</option>
<option value='3' class='volunteer2'>Belgium</option>
<option value='4' class='volunteer3'>Other</option>
</select>
And this is the minimal JavaScript code to start with:
$('#visit').live('change', function () {
if ((this.value) == 4) {
alert("Other selected")
//Code to change select list into textbox here
}
});
The JSFiddle where it can be tried is here.
How can I do this using jQuery?

Try to use .replaceWith() in this context,
$(this).replaceWith('<input/>');
DEMO
Full code would be,
$('#visit').live('change', function () {
if ((this.value) == 4) {
$(this).replaceWith($('<input/>',{'type':'text','value':'other'}));
}
});
DEMO
It seems like a bad idea to replace the select element as everyone said,
So try to show/hide the input element based on the user's selection.
Try,
$("input[type=text]").hide();
$('#visit').live('change', function () {
$(this).next('input[type=text]').toggle((this.value) == 4)
});
DEMO

Use on() as live is deprecated. You have to do it like this:
if ($(this).val() == 4) {
alert("Other selected")
//Code to change select list into textbox here
$('#txt').show();
}
else
$('#txt').hide();
FIDDLE DEMO

You can use it like this:
$('#visit').live('change', function () {
if ((this.value) == 4) {
$(this).replaceWith($("<input/>",{type:"text"}));
}
});

$("input[type=text]").hide();
$('#visit').live('change', function () {
if ((this.value) == 4) {
$("input[type=text]").show();
}
else {
$("input[type=text]").hide();
}
});
Fiddle

Fiddle
Code:
$('#visit').live('change', function () {
if ((this.value) == 4) {
alert("Other selected")
var html = "<input id='visit' type='textbox' value="
+ 5 +" />";
$("#visit").replaceWith(html);
}
});

Add this to your HTML:
<input type="text" class="hide" id="myText"/>
And say if other selected
$("#visit").hide();
$("#myText").show();
You can hide $("#myText").hide(); on load.
But replacing is bad idea. By mistake, if the user selects other, there is no way to get the drop down again. So if the other is selected, get a text box beside the drop box.
See #sudharsan's Fiddle.

Radio Button Check

I am trying to check if a radio box is checked using JavaScript, but I can't seem to figure it out properly.
This is the HTML code:
<input type="radio" name="status" id="employed_yes" value="yes">
<input type="radio" name="status" id="employed_no" value="no">
I have tried using jQuery as follows:
$(document).ready(function() {
if($('#employed_yes').is(':checked')) {
// do something
}
});
Also, I tried using pure Javascript by getting the element and check its 'checked' attribute, but it didn't work.
I look forward to your insight!
Thank you!

Use onchange
$('input[type="radio"]').on('change',function(){
if($('#employed_yes').is(':checked')) {
alert("yes");
}
});
DEMO

Try to check using name of the radio buttons like
if($('input[name="status"]').val() != "") {
// do something
} else {
alert("Select an Status");
}

Your solution doesn't work because when the page loads the checkbox's default state is unchecked, which is when the jQuery code runs.
You need to listen for the change event on the checkbox like so:
$(document).ready(function() {
$("#employed_yes").change(function() {
if(this.checked) {
document.write("checked");
}
});
});
Demo: http://jsfiddle.net/7CduY/

Try this. This will alert Hi on document ready if the any radio button is checked. If you want to check on specific event then you can bind on any event to check same.
$(document).ready(function() {
if($('input[type=radio]').is(':checked')) {
alert("Hi");
}
});

if($('input:radio:checked').text("yes") {
// do something
}
Got the idea from the jQuery forum. http://forum.jquery.com/topic/how-to-check-whether-all-radio-buttons-have-been-been-selected

Dude, I think you Wanted, whether radio button is checked or not, this what i understand from your question
If so here it is
$(document).ready(function() {
$('input[type="radio"]').on('change',function(){
if($('[name=status]:checked').length) {
alert("checked");
}
});
});
FIDDLE DEMO

Pure JS:
<input type = "button" value = "What?" name = "wic" onclick = "whatischecked(this.name);" />
Event onClick:
function whatischecked(name) {
var
emp = document.getElementById("employed_yes").checked
nonemp = document.getElementById("employed_no").checked
if (emp) {
alert("Employed");
};
if (nonemp) {
alert("Non-Employed");
};
if ((emp == false) & (nonemp == false))
{
alert("nothing checked")
};
}

Get radio button by name in a loop using jQuery

I'm using jquery 1.4.1 and while I plan to upgrade soon, I need to resolve the below issue. I need to loop over all the radio buttons on my html page and then do some logic for a couple of radio button's based on their name. Below was my attempt but it's not working, any ideas?
jQuery('input:radio').each(function() {
if(jQuery(this).name('radioOneName')) {
alert("radioOneName")
} else {
alert("not radioOneName")
}
});

Try this jQuery(this).attr('name') === 'radioOneName'. Link to docs.

Try this :)
$(document).ready(function () {
$(':radio').each(function () {
var myval = $(this).val();
if (myval == "button1")
{
alert("first");
}
else
{
alert("second");
}
});
});

You should be using
$(this).attr("name");
Glad I could help.

You can try this:
<input type="radio" id="abc" name="myradioname"/>
and in javascript using this:
$('input[name="myradioname"]').each(function(){
// do something...
})
Basically, this syntax queries the document for the <input> tag having the specified name.

disable a CheckBox depending on dropdownlist

I'm working on a asp.net mvc3 application with DropDownLists and CheckBoxes and so on.
I wrote a javascript to disable a CheckBox if a defined option of a dropdownlist is selected:
$(function() {
$('#dropdownlistId').change(function() {
if (this.value == '1st option') {
$('#checkboxId').attr('disabled', disabled);
} else {
$('#checkboxId').removeAttr('disabled', disabled);
}
});
});
this works fine, but the script reacts only on a change of the dropdownlist
so if '1st option' is on the top of the dropdownlist and so automatically selected as default, the script doesn't disable the checkbox. Only if the user select another option and select '1st option' once again...
Please help me :)
PS: the script also doesn't work if I use my keyboard to switch the dropdownlist options instead of my mouse
So it would be very kind if you could help my to improve the script, because I really can't do javascript :/

$(function() {
var $cb = $('#checkboxId');
$('#dropdownlistId').change(function() {
if (this.value == '1st option') {
$cb.prop('disabled', true);
} else {
$cb.prop('disabled', false);
}
}).trigger('change');
});
The difference in triggering change event after adding halnderl. About your second question - Using keyboard the 'change' event will be triggered when select will lose focus ('blur').

You could do something like this:
function setCheckBox() {
if (this.value == '1st option') {
$('#checkboxId').attr('disabled', disabled);
} else {
$('#checkboxId').removeAttr('disabled', disabled);
}
}
$(function() {
setCheckBox();//do this on load..
$('#dropdownlistId').change(function() {
setCheckBox();//and on change
});
});

When you define your CheckBox control, use disabled attribute to disable it by default. That way it will be disabled already and there is no need to add more javascript to disable it from the get go.
It would look something like this:
#Html.CheckBoxFor(model => model.IsCheckBox, new { #disabled = "true" })

$(function() {
var $cb = $('#checkboxId');
$('#dropdownlistId').change(function() {
if (this.value == '1st option') {
$cb.attr('disabled', disabled);
} else {
$cb.removeAttr('disabled', disabled);
}
}).trigger('change');
});
works like a charm now
thank you guys

Your code seems to be little incorrect depends on your need because your calling the disable function on change of that dropdown list you need to write it in document.ready like this
$(document).ready(function () {if(document.getElementById("dropdownlistId").value="1stoption")
{
document.getElementById('checkboxId').style.visibility = 'hidden';
}
else
{//do something whatever you wish here in else condition
}
}
Hope it helps!!!

Script to disable select if option selected

How would you write a script to disable a select if you have two selects (both with ids) and an option in the first select is selected.

Since you have tagged the question with jQuery, I'll give you an idea of how to do it using jQuery:
$("#firstSelectId").change(function() {
var first = $(this);
$("#secondSelectId").prop("disabled", function() {
return first.val() === "whatever";
});
});
Note that the above assumes you want to enable the second select again if a different option was selected. Here's a working example.

How about:
$('#first').change(function() {
if ($(this).val() != '') { // '' is default value??
$('#second').attr('disabled', 'disabled');
} else {
$('#second').removeAttr('disabled');
}
});

use something like:
if($("#selectbox1 option:selected").val() == ...)
to see what was selected.
and then use
$("#selectbox2").attr('disabled', 'disabled');
to disable that other box.