Using jquery to display value - javascript

I have a form with a select currently in use and an empty div (#price) below the form . I was wondering if anyone knew how (using jquery), to make it so that if I chose something in the select, to output it to the box. Or is the best solution to have the prices already loaded into the empty div, and just hide them using css?

$('#selectID').change(function() {
$('#divID').text($(this).find(':selected').text());
});
Or, if you want the value...
$('#selectID').change(function() {
$('#divID').text($(this).val());
});

You could do something like this:
$('#select').change(function() {
$('#price').text($(this).val());
});
Example

What about this:
$("#select-id").change(function() {
$("#price").text($("#select-id").val());
});

Related

Jquery script not working to alter CSS on change

I've added some custom elements to be included with my WooCommerce account page to be seen with the order history. Unfortunately the page is setup with tabs to only display the information pertaining to the active tab.
I'm not very familiar with jquery, but I thought it would be simple enough to use Jquery to hide the divs I added when the order history has a display of none.
I added the following script to my theme's main.js file:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
When the class .my_account_orders has a display of none it should change the div I added (.paging-nav) to have a display of none. But it just doesn't work.
Is there something wrong with this script or do I need to do something special to initiate it? Since it's in my theme's main.js file and I used $(document).ready(function() I figured it would just load with the page.
Any help with this would be greatly appreciated.
Instead of using:
var display = $('.my_account_orders');
Implement it into the if statement like this:
if($('.my_account_orders').css("display") == "none") {
Because originally it is trying to find a variable called $display, so it would return a syntax error of undefined.
You've got an errant $ in your if statement. This should work instead:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
Also keep in mind that your var display is only going to match the first element that has a class of my_account_orders, so if there are multiple elements with that class, and they don't all have the same display, you could get unexpected results.
Try this:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
I believe it's a very lame way to check for a css property such as display to determine if an element is hidden or not. With jquery, you can make use of :hidden selector which determines whether an element is hidden and return a bool value.
$(document).ready(function(){
if($('.my_account_orders').eq(0).is(":hidden")) // eq(0) is optional - it basically targets the 1st occurring element with class 'my_account_orders'
{
$('.paging-nav').css("display","none");
}
});
Example : https://jsfiddle.net/DinoMyte/sgcrupm8/2/

Make TextArea Disabled in JS

I want to make Textarea Disable (Grayed out) in my JS Method
function myfun(status){
if(status=='Yes'){
$('input[id$="txtareaID"]').attr('disabled','disabled');
}
The above code is not working for this.
You should use prop instead of attr:
$('input[id$="txtareaID"]').prop('disabled', true);
jQuery docs
If your selector is correct, than you need only to change attr to prop:
function myfun(status){
if(status === 'Yes'){ // more suitable for comparing
$('input[id$="txtareaID"]').prop('disabled',true);
}
}
Related post:
Disable/enable an input with jQuery?
Considering textarea as
<textarea id='txt'>Something</textarea>
Using jQuery, you can achieve like this
$("#txt").attr('disabled', true);
Using plain javascript
document.getElementById("txt").disabled=true;
Your problem is with CSS not JS. As far I can tell your code is working, but there's no way of changing this specific style. You could try workarounds: Change Font Color For Disabled Input
<textarea> is what you should be looking for not the <input> tag with id = textareaid.
$('input[id$="txtareaID"]').attr('disabled','disabled');
change the above code to the below one and see the magic by clicking the link at the bottom.
$('textarea[id$="txtareaID"]').attr('disabled','disabled');
http://jsfiddle.net/5s9ge7d6/1/
none of the below answers worked.
Then I found something amazing trick which solved my problem ---
Here it is --- JUST REMOVE "input" word from that line in if block -
WORKED CODE :
function myfun(status){
if(status=='Yes'){
$('[id$="txtareaID"]').attr('disabled','disabled');
}
Previous CODE :
function myfun(status){
if(status=='Yes'){
$('input[id$="txtareaID"]').attr('disabled','disabled');
$('input[id$="txtareaID"]').prop('disabled',true); //Didn't worked either
}

How extract form elements from a textarea with jquery

I tried to google it but nothing comes up. I have form builder with builds the form and generate a form structure. Then i will just copy paste that code into my textarea and save the whole html into mysql database. Now I want to modify that data and so I need to get the textarea value and filter it for input elements.
I used some thing like this.
$(document).ready(function(){
$("#btn").click(function(){
$("#ta").each($('input,select,textarea', '#myform'),function(k){
alert(k+' '+$(this).attr('name'));
});
});
});
But its not shwoing me anything. I Know i am doing it wrong as i am not getting the textarea value first and than parse it. So i did somthing like this :
$(document).ready(function(){
$("#btn").click(function(){
var a = $("#ta").val();
a.each($('input,select,textarea', '#myform'),function(k){
alert(k+' '+$(this).attr('name'));
});
});
});
But this too not working. Any suggestions.
You have to parse the textarea's value (say val1) using jquery like var a = $(val1) and saving it in a variable then you can extract out any dom element you want.
like a.find('input[type="text"]')
You're calling each on a single element called with id="ta". Ids are only meant to be used once in a document. Since you didn't provide more sourcecode i cannot see if your issue is there. If it's a single element, what are you trying with the each?
$("#ta").each($('input,select,textarea', '#myform'),function(k){
alert(k+' '+$(this).attr('name'));
});
I would suggest trying the following
$('input, select, textarea').each(function(k){
alert(k+' '+$(this).attr('name'));
});

If span display set to inline do this

I'm working on a .net website that validates an input and if it fails adds an inline style
"display:inline;"
Im trying to use jQuery to see this style and add a class to the respective input field.
if(!!$('span.errorp').length ){
alert('hi');
}
the above is what im currently using to ensure i can target the correct tag which works,
I guess i need something similar too...
if(!!$('span.errorp').display:inline ){
alert('hi');
}
Try the following
if ($('span.errorp').css('display') === 'inline') {
...
}
You can use something like:
$('span.errorp').css('display', 'inline');
It's not necessary to check for length. If there are no matches, nothing happens.
if($('span.errorp[style=display:inline]')) {
// do stuff
}

JQuery 101 - Changing text value

I have a link to hide/display some text:
<a href="javascript:void(0);" id="toggle_status_history">show/hide history<a/>
The corresponding JavaScript looks like this:
$(document).ready(function() {
$('#toggle_status_history').click(function() {
if ($('#status_history').is(":hidden")) {
$('#status_history').slideDown("fast");
} else {
$('#status_history').slideUp("fast");
}
});
It works great, but I'd like to toggle the hyperlink text as well. What do I need to do to modify the 'show/hide history' to show either 'hide history' (if it's currently displayed) or 'show history' if it's currently hidden? Something like this..?
$(document).ready(function() {
$('#toggle_status_history').click(function() {
if ($('#status_history').is(":hidden")) {
$('#status_history').slideDown("fast");
// SOMETHING HERE TO SET TEXT TO 'HIDE HISTORY'
} else {
$('#status_history').slideUp("fast");
// SOMETHING HERE TO SET TEXT TO 'SHOW HISTORY'
}
});
Disclaimer: I have less than an hour of experience with JQuery (and I haven't used JavaScript since the late-90s) - I'm just trying to modify a code sample for my site. I've looked at the API for the toggle() and replaceWith() functions but am not getting it to work. Googling and RTFM'ing hasn't helped me so far.
$('#status_history').text("Whatever you want it to say");
Have a look at the jQuery Documentation. They have a very good documentation which explains everything, with examples. For example, the .text(str); function is underneath manipulation.
$('#toggle_status_history').text("Show history");
$('#status_history').text("Hide/Show History"); is what you need.
The better way of doing such things is using toggle method provided by jQuery, it accepts a list of functions which will be looped on each click. So that you don't need to do is(':hidden')
$('#status_history').val("bla bla bla..");
try this...
fn.val() is getting the value of input, select or textarea's value or text ;)
fn.val(newValue) is setting new values ;)
$(document).ready(function() {
$('#toggle_status_history').click(function() {
$('#status_history').toggle('slow')
$("#toggle_status_history").text(($("#toggle_status_history").text()=='show')?'hide':'show');
}
});

Categories