Hi i have a radio button(StarRating radiobutton using jquery) and a textbox. When i click on the star, i would like the radiobutton value to display to the textbox.
<input id="InsRating1" class="star" type="radio" name="InsRating" value="1" title="Worst"/>
<input id="InsRating2" class="star" type="radio" name="InsRating" value="2" title="Good"/>
I tried put the Onclick() in the but onClick() has never get fired.
Please advice how to get the value from my radiobutton to textbox. Thanks
I tried this below, but the value is "Undefined"
$(document).ready(function() {
$('#InsRating1').click(function() {
alert(this.value)
});
});
-------------Edit----------
I am using g_thom's answer below but come to this problem :
I have 3 set of stars with 3 textboxes. Each rating should show to only 1 textbox.
However whenever any star is clicked, it shows the value to all 3 textboxes instead of just specified one. Please advice. Thanks
<script type="text/javascript">
$(function() {
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#EvaluationInstructorRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
// the value is '0' when the cancel button is clicked
$('#EvaluationInstructorRatingTextBox').val('0');
});
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#EvaluationMaterialRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
// the value is '0' when the cancel button is clicked
$('#EvaluationMaterialRatingTextBox').val('0');
});
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#EvaluationValueRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
// the value is '0' when the cancel button is clicked
$('#EvaluationValueRatingTextBox').val('0');
});
});
Since the inputs are converted to divs (with the 'rated stars' being assigned a different class), I think you'll want to count the number of divs with the .star-rating-on class and assign that value to the input, like this:
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#ratingText').val($('.star-rating-on').length);
});
Boring looking example - without the actual graphics/animations (just the HTML from the transformed inputs on plugin page - the value will always be 4): http://jsfiddle.net/bhf2d/
EDIT
The code above should work. I think you may be thinking that you need to apply your jQuery to the radio button, but that's not the case, since it is swapped out on page load with a div. Just in case you're not clear, I've added a live example using the code you provided in your question: Click here to see it.
EDIT 2
See an updated version here, matching the additional requirement to set multiple checkboxes. The textboxes have been renamed slightly (InsRatingText0 etc) to facilitate easily adding more items. The name convention InsRatingText[n] is set that way to match the div classes the plugin adds dynamically ('rater-0', 'rater-1', etc)
These <input> elements are not clicked, since they are hidden and replaced by <div> elements. You should use onChange() events instead.
Also, radio button do not use the property value, but checked.
Try something like this
$(function (){
$(".star").click(function(){
$("#textbox1").val($(this).val());
});
});
Basically, it is adding a handler for onclick to the eloement with class ="star" and then copying that value to the textbox.
$(".star").bind('click', function() {
$("#ratingValue").val($(this).text())
});
Seems like getting the val() on the checkbox didn't work, but using text() gives the value. Here is the example working: jsfiddle
Related
I have the following code:
jQuery
$(document).ready(function(){
$('input[name="new_tax_button_post_tag"]').click(function(){
value = $('input[name="post_tag"]').val();
$("#fieldID3").val(value);
});
});
and I want it change:
HTML
<input type="text" id="fieldID3" name="changeme"value="n/a">
The problem is that the click itself is what creates the value, so I have to click the button twice to get the desired results. The first click creates the value. The second click sets the value in the field.
How do I make it so that it does it in one click?
It's like which came first the chicken or the egg.....
I write jquery on the basis of ID of button and textbox,
and also remove value from following input field,
<input type="text" id="fieldID3" name="changeme">
$(document).ready(function(){
$("#new_tax_button_post_tag").click(function(){
value = $("#post_tag").val();
$("#fieldID3").val(value);
});
});
I hope this useful for you.
I have a textbox which is hidden using display = none. I am trying to change it to visible on some condition, however it does not seem to work. I have checked that the control is going to the change event. I have tried various ways to get it to work, the 3 ways that I have tried are within the $('body')
colValue = "<input id ='val' class='value' value ='" + field.Value + "'style = 'display: none'/>";
I have tried these different things to get it to show the control. None of these work.
$('#val').css("display", "block");
$('#val').css('display', 'inline');
$('#val').css({ "display": "inline" });
Am I missing something?
Edit
So your issue appears to be that the box isn't appearing after a change event. Ensure that your HTML IDs are unique, and that your change handler is getting wired up after the DOM is ready. If those are all true the issue likely exists outside of the code fragment you've shown, since the code you've provided should work. One thing to note is that the change event doesn't get fired until the control being changed loses focus. If it's another textbox, you have to click out of the box before the event gets fired. See the example below (note: I'm using show to update the element's visibility since that's more idiomatic, but it should be functionally equivalent to what you attempted.)
$(function() {
$('body').on('change', '.condition', function () {
$('#val').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Text Box 1 <input id ='val' class='value' value='test' style='display: none' type='text'/> <br />
Text Box 2 <input class='condition' type='text'/>
There's no variable named inline in your application. Wrap it in quotes and make it a string. Additionally, you're trying to change the style, so you have to call the appropriate method (See docs for css method):
$("#val").css("display", "inline");
Got this script that gets the value of a checked radio button and prints it out in another tag. It works perfectly when you click a radio button, but I've realized that I need to have some of the radio buttons checked by default.
How do I change this script so that it will output the values of already checked radio buttons on page load as well?
$("input[type='radio']").click(function(){
var radioValue = $(this).val();
if(radioValue){
$(this).closest('section').find('h2 .value').text(radioValue);
}
});
Fiddle: https://jsfiddle.net/tactics/bykf31e6/4/
You can use the :checked selector to find all the checked :radio elements on load, and the loop over them to set the value of the related .value element. Try this:
$(":radio:checked").each(function() {
$(this).closest('section').find('h2 .value').text(this.value);
});
Example fiddle
Note that you should use the change event for binding to radio and checkbox elements to cater for those who navigate websites using their keyboards. Also, if you remove the check that the radio element has a value (which is redundant as they should always have a value) you can simplify the code:
$("input[type='radio']").change(setText); // when user selects
$(":radio:checked").each(setText); // onload
function setText() {
$(this).closest('section').find('h2 .value').text(this.value);
}
Example fiddle
I want to change the value of an hidden input field each time a user checks a radio button.
This is how my HTML looks like.
<input type="hidden" id="ZAAL_NAME" value="" name="ZAAL_NAME" />
<input type="radio" name="zaal_ID" value="ROOM1" onclick="change">
<input type="radio" name="zaal_ID" value="ROOM2" onclick="change">
<input type="radio" name="zaal_ID" value="ROOM3" onclick="change">
Now I want that each time I check a radio button, the value of that radio button becomes also the value of the hidden input field. Does anybody knows how to do that? Here is what I have so far.
$('input[name="radbut"]').click(function() {
console.log(this.value);
$('ZAAL_NAME').val(this.value);
});
Could anybody help ?
Kind regards,
Steaphann
Your inline onclick handler won't work since you didn't include parentheses: it needs to be onclick="change()" to actually call your function. But you should change it to onclick="change(this);" to pass a reference to the clicked button to your function, then:
function change(el){
$("#ZAAL_NAME").val(el.value) ;
}
Also you jQuery selector need a # to select by id.
Better though would be to remove the inline onclick from your markup and do it like this:
$('input[name="zaal_ID"]').click(function() {
$('#ZAAL_NAME').val(this.value);
});
The latter would need to be in a document ready handler and/or in a script block that appears after your radio buttons in the page source.
Note: when getting the value of the clicked element you can say $(el).val() or $(this).val() (depending on which of the two functions you are looking at), but given that el and this are references to the DOM element you can just get its value property directly with el.value or this.value.
$('input[name="zaal_ID"]').change(function(){
$('#ZAAL_NAME').val( this.value );
})
function change(){
$("ZAAL_NAME").val( $(this).val() ) ;
}
or
function change(){
$("ZAAL_NAME").val($("input[type='radio']:checked").val()) ;
}
try -
$(':radio').change(function(){
$('#ZAAL_NAME').val($(this).val());
})
Demo: http://jsfiddle.net/KMXnR/
use onclick="change(this.value);" and the function use like this
function change(e){
$("ZAAL_NAME").val(e) ;
}
You can use is
$("input:radio[name=ZAAL_NAME]").click(function() {
var value = $(this).val();
// or $('input:radio[name=theme]:checked').val();
$("#ZAAL_NAME").val(value);
});
in short
$("input:radio[name=ZAAL_NAME]").click(function() {
$("#ZAAL_NAME").val( $(this).val() );
});
I programmed a select box for a client which come to find out gets re-scripted by a third-party JavaScript function into a bunch of divs and spans, then finally a hidden element which contains the selected value from choosing the div/span element. There is another select box which I programmed just underneath this select box which is dependent on the value of the first select box (i.e. the user chooses a country, then if the country contains regions such as USA and Canada, a state select box appears). In any case, I thought it would be best to just add an onChange event to the newly created hidden element from the first select box and then write my own JavaScript function which would show/hide the second select box based on the hidden elements value when it changed as a result of selecting the country (the third party JavaScript already updates the hidden element value with the newly selected country value). I've tried doing this in jQuery and just straight JavaScript API, however nothing seems to work. Just FYI, when the third party javascript rescripts my select box into div/span's and a hidden input field, the hidden input field does not have an id attribute, so I reference the element through its name (collected_data[7][0]). Here's the code I tried thus far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("input-country").change(function(e){
console.log("testA");
});
})
jQuery("input-country").change(function(e){
console.log("testB");
});
jQuery(document).ready(function(){
jQuery(document.forms['myForm']['collected_data[7][0]']).change(function(e){
console.log("testC");
});
})
jQuery(document.forms['myForm']['collected_data[7][0]']).change(function(e){
console.log("testD");
});
document.forms['myForm']['collected_data[7][0]'].onchange = function(){
console.log("testE");
};
document.getElementById('input-country').onchange = function(){
console.log("testF");
}
jQuery(document.forms['myForm']['collected_data[7][0]']).live('change',function(){
console.log("testG " + jQuery(this).val())
});
jQuery('input-country').live('change',function(){
console.log("testH " + jQuery(this).val())
});
jQuery(document).ready(function(){
jQuery(document.forms['myForm']['collected_data[7][0]']).live('change',function(){
console.log("testI " + jQuery(this).val())
});
})
jQuery(document).ready(function(){
jQuery('input-country').live('change',function(){
console.log("testJ " + jQuery(this).val())
});
})
</script>
You won't get "change" events when the hidden element is changed programatically by somebody's JavaScript code. Those are only generated by the browser when there's actually user action. What would be better would be for the 3rd-party JavaScript to explicitly call ".change()" (the jQuery method) on the hidden select.
A hidden element is clearly never going to be a target for user interaction.
'input-country' is not a valid selector. Further, the change event requires focus gain, value change, focus loss (blur)--hidden inputs will not have such a sequence of events, so you must manually trigger change on them when you change their values.