I have 3 radio buttons, when one of them is selected I want to automatically put text in a textbox.
For example, If the user selected the 'TBA' radio button, I want the text 'To Be Advised' put in the textbox, and if they select another radio button I want it to be cleared.
Can anyone help me??
http://jsfiddle.net/ej2hf/1/
Thanks in advance!
This should do:
$('input[name="dest_type"]').on('change', function() {
$('input[type="text"]').val($(this).val());
});
Live demo: http://jsfiddle.net/ej2hf/2/
Try this then
http://jsfiddle.net/ipsjolly/KNct8/
$('input[name="dest_type"]').on('change', function() {
if($(this).val() == "tba"){
$('input[type="text"]').val($(this).val());
}
else
{
$('input[type="text"]').val('');
}
});
OR
http://jsfiddle.net/ipsjolly/KNct8/1/
$('input[name="dest_type"]').on('change', function() {
if($(this).val() == "tba"){
$('input[type="text"]').val('To Be Advised');
}
else
{
$('input[type="text"]').val('');
}
});
In addition to populate the textbox with the value which is selected by default on page load use the below code:
$(document).ready(function(){
$('input[type="text"]').val($('input[name="dest_type"]').val());
$('input[name="dest_type"]').on('change', function() {
$('input[type="text"]').val ($(this).val()); });
});
Assuming that you are or can use the latest jQuery, you can use this:
$(function() {
$('input[name="dest_type"]').on("change", function() {
$('input[type="text"]').val($(this).val());
});
});
See the Fiddle!
If what you need if to toggle the value of TBA, use this:
$(function() {
$('input[name="dest_type"]').on("change", function() {
$('input[type="text"]').val( (($(this).val()=='tba')?($(this).val()):('')) );
});
});
See this Fiddle!
If none of this is what you are trying to do, please rephrase the question or add some more information!
try this,
$(document).ready(function () {
$('input:radio[name="dest_type"]').change(function () {
$("input:text").val($(this).val());
});
})
Related
I would like to add an element to another list and remove it from the current when clicked. I tried it with the property appendTo of Selectable, but nothing happens when I click on it.
I built this https://jsfiddle.net/wgaga8uc/ to ilustrate it.
$("#paramselectable").selectable({appendTo: "#paramselected"});
$("#paramselected").selectable({appendTo: "#paramselectable"});
I would appreciate any help,
Thanks.
$("#paramselected li").click(function(){
$("#paramselectable").append(document.createTextNode( "Hello" ));
});
Finally I achieved it adding and removing classes. https://jsfiddle.net/22d7sxvd/
$(function() {
$( ".paramsnav" ).selectable();
});
$('li').click(function () {
var selected = $('#params').find('.ui-selected');
if(selected.hasClass('selectable')) {
selected.removeClass('ui-selected');
selected.removeClass('selectable');
selected.addClass('selected');
selected.appendTo('#paramselected');
} else {
selected.removeClass('ui-selected');
selected.removeClass('selected');
selected.addClass('selectable');
selected.appendTo('#paramselectable');
}
});
<script>
$(document).ready(function() {
$("#services").click( function() {
$(".subMenus").fadeToggle("slow")
});
});
</script>
This is my code. I can hide and show the dropdown(subMenus) with this code. I want to show the dropdown in my first click which it works but I want to go to a link when I clicked to services for the second time. How can I do?
There is a perfect way for you
$("#services").one('click', function() {
$(".subMenus").fadeToggle("slow")
});
You can do this be checking the visibility of your element. When it's not visible show it, when it is move to your link:
$("#services").click( function() {
if($(".subMenus").is(":visible"))
window.location = "yourLinkHere";
else
$(".subMenus").fadeToggle("slow");
});
I'm trying to change the value of two dropdown lists when a third one changes, to that dropdown's new value:
<script>
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val(this.value);
$('select[name="d3"]').val(this.value);
});
</script>
Nothing happens.
Try this for starters, work your way when you get this to work :)
$(document).ready(function() {
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val(this.value);
$('select[name="d3"]').val(this.value);
});
});
Try like this
$(function() {
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val($(this).val());
$('select[name="d2"]').html($(this).val());
});
});
I have an input field I want cleared. My jQuery works there but if I click the input field and then click off of it the value is back. What's the fix?
$('input').val('');
$('input').click( function() {
$('input').val('');
});
JS fiddle here. http://jsfiddle.net/thomasp423/HqvmD/
It seems that normally the one line I have would work BUT I'm working with some software that probably has js overriding this and adding it back on. Does anyone have a solution?
$('input').click( function() {
$(this).val('');
});
What you're saying is: clear all inputs when clicked on one input.
I think this is what you are looking for http://jsfiddle.net/HqvmD/1/
//$('input').val('');
$('input').focus( function() {
if ($(this).val() == 'search' ) {
$(this).val('');
}
});
$('input').focusout(function () {
if ($(this).val() == '' ) {
$(this).val('search');
}
});
I have two div elements that are hidden on $(document).ready(function(){} and they are supposed to appear if their specific check box is checked, and disappear if it was checked and then unchecked. I can show the element when the checkbox is selected very easily using show() or slideDown() but when i use the if else statements it returns as false everytime and the forms stay hidden...
$(document).ready(function(){
if($("#upload_yes").is(':checked')) {
$("#upload_form").show();
} else {
$("#upload_form").hide();
}
if($("#new_info_yes").is(':checked')) {
$("#new_info_form").slideDown(500);
} else {
$("#new_info_form").hide();
}
});
You aren't binding this code to the proper event:
$(document).ready(function() {
$("#upload_yes").on('change', function() {
if ($(this).is(':checked')) {
$("#upload_form").show();
$("#new_info_form").slideDown(500);
} else {
$("#upload_form, #new_info_form").hide();
}
});
});
See this fiddle
You must do the job in the change event.
then calling .trigger('change') on the check boxes make the div show/hide on the initial page load.
The code :
$(document).ready(function(){
$('input#upload_yes').change(function(){
if($(this).is(':checked')) {
$("#upload_form").show();
} else {
$("#upload_form").hide();
}
});
$('input#new_info_yes').change(function(){
if($(this).is(':checked')) {
$("#new_info_form").slideDown(500);
} else {
$("#new_info_form").hide();
}
});
//Trigger the change event so the divs are initially shown or hidden.
$('input[type=checkbox]').trigger('change');
});
To evaluate if something has changed you need to do your code inside an event! (in this case: change) because what you are doing is to get the value of is(':checked') just at $(document).ready and it will always return false because at first moment your element wasn't checked.
Well, this is the correct way :-)
(I tried to reduce code)
Live Demo:
http://jsfiddle.net/oscarj24/RSDRg/
Code:
$(document).ready(function() {
$('#upload_yes').on('change', function() {
var done = $(this).is(':checked');
if(done) {
$('#upload_form').show();
$('#new_info_form').slideDown(500);
} else {
var frm = $('#upload_form').add('#new_info_form');
frm.hide();
}
});
});