Capture span value using jquery - javascript

Hello Everyone I want to capture price from this span using jquery how can i achieve this please suggest something
<span class="amount"><i class="fa fa-inr"></i>1,000</span>
DropDown:
<li class="tmcp-field-wrap">
<label for="tmcp_select_1">Select</label>
<select class="tmcp-field support-layer-firmness tm-epo-field tmcp-select tm-valid" name="tmcp_select_0">
<option value="Select Firmness_0" class="tc-multiple-option tc-select-option" data-price="">Select Firmness</option>
<option value="Soft_1" class="tc-multiple-option tc-select-option" data-price="1000">Soft</option>
<option value="Medium_2" class="tc-multiple-option tc-select-option" data-price="1500">Medium</option>
<option value="Hard_3" class="tc-multiple-option tc-select-option" data-price="2000">Hard</option>
</select>
<span class="price tc-price hidden">
<span class="amount"><i class="fa fa-inr"></i>1,000</span>
</span>
Now i want to get value using onchange event
I have tried so far
$(".support-layer-firmness .tc-price span").on("change", function() {
var price = $('span.amount').text();
alert(price);
});

You can capture the text by using jquery Class Selector
$('span.amount').text(); // output 1,000
Class Selector: Selects all elements with the given class. Reference
As per comment if you want to get the same span value onChange event then try this.
Method 1
$('select').on('change', function() {
$('span.amount').text();
});
Method 2
You can use also class for selecting the select element
$('select.tmcp-field').on('change', function() {
$('span.amount').text();
});

use jquery selector using class name
$(".amount").text();
https://jsfiddle.net/mc7h22f7/

Please check this demo
You can easily get span value as follow.
On Change you can do something like this
$('.tmcp-select').on('change', function (e) {
alert($('span.amount').text());
});
OnChange Example

Related

check if target element is first element in class

I need to check if the element targeted is first element in its class and perform actions accordingly.
For eg. I have a select element with class name 'team'.
Now I need to check if the selected element is whether a first element or not.
Here's my HTML:
Initially there's a single select and checkbox input. On clicking a button, more select and checkbox inputs are added.
<div class="col-sm-7" id="include-fields">
<select name="team[]" class="form-control team" id="team">
<option></option>
<option value="1">1</option>
</select>
<label>Lead</label>
<input type="checkbox" name="lead_check[]">
</div>
<div class="col-sm-offset-2">
<button id="includes" class="btn btn-success"><i class="fa fa-plus"></i>
</button>
</div>
Dynamic select and checkbox generating:
$('#includes').click(function(e)
{
e.preventDefault();
$('#include-fields').append('<div class="holder-includes"><i class="fa fa-trash-o pull-right"></i>' +
'<select name="team[]" class="form-control team">'+
'<input type="checkbox" name="lead_check[]"></div>');
var items = "";
$.post("teamFetch", function(data)
{
$.each(data,function(index,item)
{
items+="<option value='"+item.id+"'>"+item.title+"</option>";
});
$(".team:last").html(items);
}, "json");
});
I tried following, but no luck:
$(document).on("change",".team",function(e){
var target = $(e.target);
if(target.is(".team:first"))
{
$(this).parent('div#include-fields').find("input[name='lead_check[]']").val($(this).val());
}
$(this).siblings("input[name='lead_check[]']").val($(this).val());
});
Here, first select element is already there, but other select elements are added dynamically later. They all have the same class team.
To check if the select element is a first child of its parent among all the sibling you can use this script.
$(document).ready(function(){
$(document).on("change","#include-fields .team:first",function(){
alert($(this).val());
});
});
Alert will only get triggered on the first select element. Here is a fiddle

How to get current element in order to select with javascript?

I've got the follwoing HTML structure (I do not have the IDs of the following elements because they are dynamically created):
<fieldset>
<div class="classA">
<select onchange="updateInputBox()">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</selects>
</div>
<div class="classB">
<input data-myAttribute="case1">
</div>
<div class="classC">
<a type="button">
<i class="fa fa-remove">x</i>
</a>
</div>
</fieldset>
The filedset and it's children is dynamically created. I want to change the attribute in the inputBox depending on what the user selected in the selectBox.
Here is an example how I would have done if the element fieldset would not have been dynamic (the following contains elements have IDs, but only because I want to demonstrate what I want; in reality I don't have IDs because they are dynamically created by clicking a button, that I do not show here):
https://jsfiddle.net/thadeuszlay/6bsgazvv/4/
But unfortunately I don't have the id of the fieldset, because it is dynamically created. Is there a way how you can get the position of the current element?
I tried to pass itself in the updateInputBox-function:
<select id="selectBox" onchange="updateInputBox('+ this +')">
I also tried with jQuery:
$(this).parent().parent()
but in both cases the console would say
"Unexpected identifier"
Update:
Inside the function doing something like this (currentElement is the selectBox/DropDownBox):
currentElement.parent().parent().setAttribute("data-myAttribute", "hello");
Uncaught TypeError: selectBox.parent is not a function
You can use jquery 'closest' for this as below.
HTML
<select id="selectBox" onchange="updateInputBox(this)">
JS
function updateInputBox(selectElm) {
var inputElm = $(selectElm).closest('fieldset').find('input');
inputElm.attr('data-myAttribute', $(selectElm).val());
}
// instead of inline onchange event and the above code, you can use the below to trigger the event
$(document).on('change', 'fieldset select', function () {
var inputElm = $(this).closest('fieldset').find('input');
inputElm.attr('data-myAttribute', $(this).val());
});
In updateInputBox, simply look at the selectedIndex of #selectBox
<select id="selectBox" onchange="updateInputBox(this)">
function
function updateInputBox(dropdowntBox) {
var inputBoxField = document.getElementById("inputBox").setAttribute("data-myAttribute", dropdowntBox.value);
}
Here is jquery version:solution
You need to trigger change() event for select with ID selectBox
$(document).on('change','select',function(){
var value=$(this).val();
$(this).parents('fieldset').find('input').attr('data-myAttribute',value);
});

Change text of all elements with specific data-attribute

I'm currently trying to use jQuery to change the text of a number of elements to the value of a specific data-attribute.
For example:
index.html
----------
<h1 data-change="text2">text1</h1>
<p data-change="paragraph2">paragraph1</p>
I want to change 'text1' to 'text2' and 'paragraph1' to 'paragraph2' (the value of data-change for that specific element).
How would I go about doing this?
I assumed I would be able to 'select' all of the elements with the data-attribute 'data-change' and then just do a simple $(this).text($(this).data('change')); or something.
You can do this:
$('[data-change]').each(function(){
$(this).text($(this).data('change'));
});
You can iterate over the elements and change its text.
.text method could accept a callback function.
$('[data-change]').text(function() {
return $(this).data('change');
});
How would you like this~
-html-
<select id="" name="" class="input_select">
<option value="text2" selected="selected">text2</option>
<option value="paragraph2">paragraph2</option>
</select>
<h1 class="text2">text1</h1>
<p class="paragraph2">paragraph1</p>
</pre>
-js-
$(document).ready(function(){
$('.input_select').change(function(){
var valitem = $(this).val()
if (valitem == 'text2')
{
$('.text2').text(valitem)
}else{
$('.paragraph2').text(valitem)
}
})
});

Live action assign and reassign id to element

I have a select box that looks like:
<select class="span12 select" data-placeholder="Wybierz operacje" tabindex="2" id="contract-operations">
<option></option>
<option value="1" data-url="<?php echo $aggregate_url; ?>" data-id="aggregate_invoice">
Wystaw fakturę dla zaznaczonych kontraktów
</option>
<option value="2" data-url="<?php echo $notification_url; ?>" data-id="">
Awizacja do klienta
</option>
<option value="3" data-url="<?php echo $notification_cost_url; ?>" data-id="">
Awizacja do klienta z potwierdzeniem
</option>
</select>
under it there is a link that attributes href and id are assigned dynamic and it looks like:
<a class="btn btn-info btn-large contract-operations" href="#">
<b class="icon-circle-arrow-up"></b>Wykonaj operacje dla zaznaczonych kontraktów
</a>
now depend on what option you choose from select box, id and href will change. Problem is with Id's, they are not working after attr assign any of them from js script that looks simple like:
select: function()
{
$.obj.$select.on('change', function(){
button.href = $(this).find(':selected').data('url');
var id = $(this).find(':selected').data('id');
$.obj.$a.attr('href', button.href);
$.obj.$a.attr('id', id);
});
}
They are assigning to a href element correctly but when I try to use those id's in another script or function it is like they never were assign.
use following
$(document).on('change','.select',function(){
var url = $(this).attr('data-url');
$('a.btn-info').attr({href:url});
});
working fiddle: http://jsfiddle.net/patelmilanb1/8H49X/2/
$(document).on('change', '.select', function (e) {
e.preventDefault();
var selectedURL = $(this).children('option:selected').data('url');
alert(selectedURL);
$('a.btn-info').prop('href', selectedURL);
});
Use on instead of delegate- it's been superseded.
$(document).on('change','.select', function()
{
$('a.btn-info').prop('href',$(this).attr('data-url'));
$('a.btn-info').prop('id',$(this).children('option[value="'+$(this).val()+'"]').prop('data-id')); });
});
What this does is bind the event "change" to the document instead of the ".select" elements. Then the 2nd argument is a selector which is what the event actually acts on. The 3rd is a typical event handler.
Rather than altering the element's id, which is generally static and unique, I would recommend adding another class instead. You can use .addClass, like so:
$(document).on('change','.select', function()
{
$('a.btn-info').addClass($(this).attr('data-id'));
});
Fiddle: http://jsfiddle.net/8H49X/6/

Get Value from Element Javascript/Jquery

Given the following html:
<div class="product">
<span class="name">Product name</span>
<span class="price">Product price</span>
</div>
<input type="button" class="button" value="Purchase" onclick="myfunction()" />
<input type="hidden" name="p-name" value="">
<input type="hidden" name="p-price" value="">
I am trying to build a function in javascript that takes the value from span.name (span.price) and adds it to input p-name (input p-price).
How can you do that?
Apperantly http://api.jquery.com/val/ is not working as expected.
EDIT
Thanks all for answering!
I've corrected the html error you guys pointed out in the comments.
Try this:
$('.product span').each(function () {
var selector = 'input[name=p-' + this.className + ']';
$(selector).val(this.innerHTML);
});
Fiddle
You will need a button or something to fire the copying:
<input type="button" id="copy_values" value="Copy the values" />
and your javascript
$(document).ready(function(){
$("#copy_values").click(function(){
//Change the value of the input with name "p-name" to the text of the span with class .name
$('input[name="p-name"]').val($('.name').text());
$('input[name="p-price"]').val($('.price').text());
});
});
For span we use text() function instead of val()
.val() is used when we use input and .text() is used when we use span in HTML.
Reference link : http://api.jquery.com/text/
That's going to be hard to click to a HIDDEN field.
If you change input type to text, then in onclick you can write: this.value=document.getElementById('name').innerHTML; (to use this, you have to add ID with name to your )
OR, you can create a seperate button, and onclick method can be fired.

Categories