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.
Related
I copy need the dynamic text of a spam that is generated by a slider that the user sets. It must be copied to a value of an input.
I tried that, and didnt work:
<h4>Valor do consórcio: <span class="slider-value quote-form-element valor-carro1" data-name="Valor | Automóvel" name="Valor" data-slider-id="consorcio-auto">R$ <span id="THAT_VALUE"></span></span>
</h4>
<div class="slider" data-slider-min="20000" data-slider-max="100000" data-slider-start="23192" data-slider-step="1000" data-slider-id="consorcio-auto"></div>
<h4>Seus dados:</h4>
<input type="hidden" id="THAT_FIELD" name="THAT_FIELD" value="" />
<h4>Seus dados:</h4>
<input type="hidden" id="valorcarro" name="valorcarro" value="" />
script
$(function(){
var valorcarro = $('#THAT_VALUE').html();
$('#THAT_FIELD').val(valorcarro);
});
example in this page in the button on menu "Simulação".
The script just does not copy because the value is generated later and the user can still change
You need to use an event to fire your code after the slider value has changed. This is how you do it with a bootstrap slider.
$('.slider').on('slideStop', function () {
var valorcarro = $('#THAT_VALUE').text();
$('#THAT_FIELD').val(valorcarro);
});
To get the text of an element, use text()
For example
$("span").text();
you can try this code.
jQuery(function(){
var valorcarro = jQuery('#THAT_VALUE').text();
jQuery('#THAT_FIELD').val(valorcarro);
});
Actually, #Pamblam's response is better than mine. I was assuming the .slider class was for regular range inputs, which fire the 'change' event when their value changes, but it looks like it is in fact a bootstrap slider, which fires the slideStop event instead. Regardless, the code here listens for a change in the slider value, and when it is triggered, takes the text from the #THAT_VALUE span (from op's code) and sets the value of the #THAT_FIELD field to whatever it is :
$(".slider").change(function(){
var valorcarro = $('#THAT_VALUE').text();
$('#THAT_FIELD').val(valorcarro);
});
I'm using a calculator widget where I can enter random values into an inputfield and then the widget automatically calculates when clicking the "go"-button.
Now I want to insert/prefill the value into this input field, since the value which needs to be calculated comes from a server. The issue though is, that this input field apparently only reacts on keypress. I tried to do this:
$('input[name="value"][data-type-money]').val('150.000').focus();
and
$('input[name="value"][data-type-money]').val('150.000').select();
which prefills the input field with the desired value but when I click the "go" button the calculation fails as long I dont enter the value manually into the input field. So, in the end my solution does not work.
Does anyone know how I can solve this?
If data changes frequently you can also use the setInterval function:
<input name="value" data-type-money="money">
setInterval (function(){
var moneyValue = "150.000";
$('input[name="value"][data-type-money]').val(moneyValue);
},1000);
fiddle here: http://jsfiddle.net/85pbnnu1/
or you can just do:
$(document).ready(function(){
$('input[name="value"][data-type-money]').val('150.000').change();
});
Edit, Updated
the input field is -
and reacts only on keypress, I mean when value is entered manually
If input value property cannot be changed , try replacing the element in DOM with value set at html using .replaceWith()
$('input[name="value"][data-type-money]')
.replaceWith("<input name=value data-type-money type=text value=150.00 />")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input name="value" data-type-money type="text" />
I'm working on a dynamic form where you can add or delete fields, Here you can find the fiddle
The first button you find is Add Metric. From this the code generates:
Input Field Metric
Button Add Tag
Inside this field a user can add a tag with the button Add Tag, generated when you click add Metric. When you click Add Tag button, two fields are generated:
Input Field Id
Input Field Value
The Html code that I need to generate in order to serialize the entire form (this is not however the question point) will result like this:
<input type="text" name="metrics[0][name]" value="Text 0"> // Metric
<input type="text" id="TagId0" name=" "> //Tag Id
<input type="text" id="TagValue" name="metrics[0][tags][][0]">
Problem:
I need that (when I fill the field with id="TagId0") the value I select will go immediately to the field name with id="TagValue". This field must result like this:
Consider I write on TagId0 the word "hello", field will become:
<input type="text" id="TagValue" name="metrics[0][tags][hello][0]">
How, if it's possible, it can be done?
Thanks
You can use the change method to detect a change in the fields value. Then use the attr method to change the name. Hope I understood correctly. Here is the modified JSFIDDLE.
$(document).on('change', '#InputsWrapper .inputID', function(){
thisVal = $(this).val();
thisName = $(this).siblings('.inputVal').attr('name');
newName = thisName.replace('[tags][', '[tags][' + thisVal);
$(this).siblings('.inputVal').attr('name', newName);
});
Don't forget to press enter after change the field value :)
Edit: I also added two classes to the fields you are appending. .inputID and .inputVal. I hope this helps!
you can write id of field something like TagId-0 and some common class like tagfield,so that u can split the value to get the index an then access it using the class
$(".tagfield").keypress(function() {
var id=parseInt($(this).attr("id").split("-"));
$(this).siblings().attr("name","metrics["+id+"][tags]["+$(this).val()+"][0]");
});
I was wondering if I could get some help with jquery. This is the html I have now:
http://jsfiddle.net/spadez/9sX6X/4/
<form name="input">
<input id="current" type="text" name="content" placeholder="content">
<input type="submit" value="Add" id="add">
</form>
What I want to do is when the user clicks "add" and as long as the input field isnt empty, I want to do the following:
Change that input field id to "accepted" and remove the add button
next to it and replace it with a remove button
Add an input field below the original one with the id to "current"
with an add button next to it
I want this process to happen every time the add button is clicked so more and more input boxes can spawn under each other. As far as I got was trying to spawn input boxes but even that doesn't work.
function addField(){
$('#add').append('<input type="text" name="myinput" />');
return false;
}
Can anyone please show me how this should be achieved.
I think it isn't a good solution to clone existing elements every time. Instead I would suggest cloning ... well... clones )) The original input and button remain the same, only visually shifted.
Is this behavior needed? - http://jsfiddle.net/skip405/9sX6X/6/
Use before()
$('#add').before('<input type="text" name="myinput" />');
since you need to append the new input just before your submit button (and not into it, which is not possible here, since it's an input element)
A working example http://jsfiddle.net/steelywing/9sX6X/12/
$('form').on('click', '.add', function () {
var row = $(this).closest('div'),
new_row = row.clone();
row.find('input:text').addClass('accepted');
row.find('.add')
.removeClass('add')
.addClass('remove')
.val('Remove');
new_row.find('input:text').val('');
row.after(new_row);
}).on('click', '.remove', function () {
$(this).closest('div').remove();
});
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