javascript not working -> Selected - javascript

With help I've made this function that posts the value of a selected option in my html form.
In this jsfiddle you can see the code and html.
anyone knows why this is not working? : http://jsfiddle.net/qqcAT/1/
$(document).ready(function() {
$("#catid").change(function() {
var src = $(this).val();
$(".test").html($(this).val());
});
});

You're missing a } , indent your code next time.

By looking at your Fiddle you will need something like this. I have not tested but should display the select text in division below it:
$(function () {
$("#catid").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div.test").text(str);
})
.trigger('change');
});

Related

Copy input value from one input to second input in jQuery

I have this code:
function copyInputsCompanyInvoices() {
document.querySelector('input[name="company_invoice_company_name]').value = document.querySelector('input[name="company_info[name]"]').value;
}
and this work fine.
I want change it to jQuery.
I write this code:
jQuery(document).ready(function() {
$(".copyInputsToInvoice").click(function(){ $('input[name="company_invoice_company_name]').val($('input[name="company_info[name]"]').val());
});
});
but it's not working. How can I repair it?
You forgot : ( " )
jQuery(document).ready(function() {
$(".copyInputsToInvoice").click(function(){
$('input[name="company_invoice_company_name"]').val($('input[name="company_info[name]"]').val());
});
});
or u can use this; keyup event
jQuery(document).ready(function() {
$('input[name="company_info[name]"]').keyup(function(){
$('input[name="company_invoice_company_name"]').val($('input[name="company_info[name]"]').val());
});
});

Append values to a textbox while clicking button

I'm trying to make a calculator using jquery. But i don't know how to append values to the textbox when clicking each calulator buttons. I had tried with the following code.
$(document).ready(function () {
$("input[type=button]").on({
click: function () {
var nn = $(this).val();
$("#text-box-id").val(nn);
}
})
});
Please help me to solve this scenario.
Concate your value with textbox value to avoid replace.
$("input[type=button]").on({
click: function () {
var nn = $(this).val().toString();
var txtval=$("#text-box-id").val().toString();
$("#text-box-id").val(txtval + nn);
}
})
I am not sure I understand exactly but I think what I understand is that you want to just add more numbers rather than override?
$(document).ready(function () {
$("input[type=button]").on({
click: function () {
var nn = $(this).val();
$('#text-box-id').val($('#itext-box-id').val() + nn);
}
})
});

Unable to get div value for voting system

When I click on #upvote the #vote increases by 1 and when #downvote is clicked it decreases by 1. But when the vote value is "-1" and if the upvote is clicked the vote value becomes "1" and not "0".
<script type="application/javascript">
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').val();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').val();
$('#vote').text(VoteValue1-1);
});
});
</script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>
Any idea to what might be wrong.
Try parseInt()
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').text();
$('#vote').text(parseInt(VoteValue)+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').text();
$('#vote').text(parseInt(VoteValue1)-1);
});
});
Working DEMO
Note: .text() should use for getting value of DIV instead of val()
First, you should use html() or text() instead of val(), val() is for inputs or textarea.
Then, you should use parseInt, to make sure you manipulate the right types : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
If that doesn't solve it, then create a jsfiddle so that we can reproduce the problem.
Last, beware of duplicate ids if you have multiple voting systems on the same page.
Use .text() instead of .val(), and use + to parse the string into a numeric.
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = +$('#vote').text();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = +$('#vote').text();
$('#vote').text(VoteValue1-1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>
Solution:
Firstly, $('#vote').val() should be $('#vote').text() . Now these values will be of string type. Parse them to int first to work them correct . Because then it would only append the digits rather incrementing or decrementing .
$(document).ready(function () {
$('#upvote').click(function () {
var VoteValue = parseInt($('#vote').text());
$('#vote').text(VoteValue + 1);
});
$('#downvote').click(function () {
var VoteValue1 = parseInt($('#vote').text());
$('#vote').text(VoteValue1 - 1);
});
});
In an HTML document, .html() can be used to get the contents of any element. .val() used for input box. http://api.jquery.com/html/
var VoteValue1 = $('#vote').html();
OR
var VoteValue1 = $('#vote').text();

How can I take contents of one element and add to another when they both have an id ending in the same two or three digit number?

I have this code:
$('.update-title')
.change(function () {
$(this).prop('title', $('option:selected', this).prop('title'));
});
and this HTML:
<select id="modal_TempRowKey_14" class="update-grid update-title">
...
...
</select>
<input id="modal_Title_14" class="update-grid" type="text" value="xx">
Is it possible for me to make it so that when the .update-title changes
then the value of the title is put into the input id with the matching number.
So in this case the #modal_TempRowKey_14 title would go into #modal_Title_14 value
Important
I want this to happen only if the element being changed starts with modal_TempRowKey. Is this possible to put into the change block?
Try
$('.update-title').on("change", function() {
var id = this.id.replace('modal_TempRowKey_', '');
$("#modal_Title_" + id).val( $(this).val() );
});
My suggestion, rather than trying to parse id attributes, is to make use of jQuery's data function.
Edit your HTML so that the select menu has a data-target attribute:
<select id="modal_TempRowKey_14" data-target="#modal_Title_14" class="update-grid update-title">
...
...
</select>
Then, create your event handler like so:
$('.update-title').on('change',function() {
var $this = $(this);
$($this.data('target')).val($this.val());
})
You use the data-target attribute to find the element to which you want to apply the select menu's value.
Here's a demo:
--- jsFiddle DEMO ---
$('.update-title').change(function () {
var m = this.id.match(/^modal_TempRowKey_(\d+)$/);
if (m) {
$("#modal_Title_" + m[1]).val(this.id);
}
});​
DEMO.
Others have a more elegant approach, here is my attempt:
http://jsfiddle.net/8sLCL/1/
$('.update-title')
.change(function () {
var my_text = $(this).find(":selected").text();
var my_id = $(this).attr("id");
var my_num_pos = my_id.lastIndexOf("_");
var my_num = my_id.substr(my_num_pos + 1 ,my_id.length - my_num_pos );
$( "#modal_Title_" + my_num ).val(my_text );
});​

jquery textarea value focus

This is probably stupidity on my part, but where am I going wrong with this?
$(function() {
$('textarea#comment').each(function() {
var $txt = $(this).val();
$(this).bind('focus', function() {
if($(this).val($txt)) {
$(this).val('');
}
});
});
});
Basically on focus I want to check if the value is the default value in this case 'Enter your comment', then if it is change the value to nothing.
Anyone know how to do this? I'm guessing its relatively simple. What the code does at the moment is removes any value.
Ok first off you should only have one tag with the id of comment since ids are supposed to be unique, but if we go with your code you have to setup a default value first like this:
<textarea id="comment">Enter text here</textarea>
Now the javascript:
(function() {
$('textarea#comment').each(function() {
var $txt = $(this).val();
//alert($txt);
$(this).bind('focus', function() {
if($(this).val() === this.defaultValue) {
$(this).val('');
}
});
});
})();
The self executing function syntax has been corrected here and should be as follow:
(function () { // my code here })();
and for default value use:
this.defaulValue; // works for input boxes as well
Hope it helps. Cheers
jquery_example plugin do exactly what you need. You may have a look at its source code and get some inspiration. Or you can store the default value as meta-data on the tag and check against it on change event of the textarea tag.
try
$('#comment').live('click change focus', function() {
var $txt = $(this).val();
if($txt == 'Enter your comment' );
$(this).val('');
});
DEMO

Categories