HTML
<td data-title="Quantity">
<div class="clearfix quantity r_corners d_inline_middle f_size_medium color_dark m_bottom_10">
<button class="btn-minus bg_tr d_block f_left" data-item-price="8000.0" data-direction="down">-</button>
<input min="0" class="f_left" type="text" value="2" name="order[line_items_attributes][0][quantity]" id="order_line_items_attributes_0_quantity">
<button class="btn-plus bg_tr d_block f_left" data-item-price="8000.0" data-direction="up">+</button>
</div>
<div>
<i class="fa fa-times f_size_medium m_right_5"></i>Remove<br>
</div>
</td>
Javascript
$('.remove-order').click(function(){
????
});
How to get the value of the input text when remove is click?
You can use .val()
$('.remove-order').click(function(){
$('#order_line_items_attributes_0_quantity').val()
});
$('.remove-order').click(function(){
var input_val = $('#order_line_items_attributes_0_quantit').val();
console.log(input_val);
});
$('.remove-order').click(function () {d
var myval="";
myval = $('input.f_left').val();
// or use:
myval = $('input.f_left')[0].value;
});
In this case those would both return the 2 value as a string. IF you want a number be sure to parse it with parseInt(myval);
NOTE: since you have an ID you should use that selector:
var myvalInt = parseInt($('#order_line_items_attributes_0_quantity').val(), 10);
as that would be the fastest method.
Try closest():
$('.remove-order').on('click', function(e){
alert($(this).closest('td').find('input[name^=order]').eq(0).val());
});
Here,
.closest('td'), the nearest parent td.
.find('input[name^=order]'), all input with name attribute starting with order
.eq(0), first item in the list
Related
I have two input fields with the same class sliderValue, with data-index=0 and data-index=1:
<div style="display: flex;">
<input type="text" class="sliderValue" data-index="0" value="5"/>
<input type="text" class="sliderValue" data-index="1" value="10"/>
<a id="submit_price" href="some_url" class="btn btn-default">OK</a>
</div>
How can I get the value of data-index once the value of the field is changed? To be simple: I would like to know which field (1st or 2nd) is changed.
<script>
$(document).ready(function() {
$("input.sliderValue").change(function() {
var dataIndex = ???;
});
});
</script>
You can use the .data method:
var dataIndex = $(this).data("index");
Or for the vanilla JS / JQuery hybrid (just because..).
$(document).ready(function() {
$("input.sliderValue").change(function(e) {
var el = e.currentTarget;
var dataIndex = el.getAttribute('data-index');
});
});
You should probably accept someone else's answer as it's more geared to JQuery, this was just to show.
How can I get the value of the textbox?
<input class="num1" type="text" val=""><br>
<button class="show">Click</button>
this is my Js code:
var value = $('.num1').text();
$('.Click').click(function(){
$('<'p>').text(value);
});
when I clicked the "click" button I want to show in a paragraph the text that I'd input to the textbox.
Use .val() for form elements to retrieve or set its value. Also, care with typo when you set the paragraph text.
var value = $('.num1').val();
$('.show').on('click', function(){
$('p').text(value);
});
In your code there is an error: if you want to catch the click event you should use the class of the button. Another error in your code is about the single quotes you use to insert value into the <p>. And remember, is $('p'), not $('<p>').
The code should look like that:
$('.show').click(function(){
$('p').text(value);
});
You can use this code:
jQuery
$(function(){
$("form").on("submit", function(event){
event.preventDefault();
var text = $(".num1").val();
$("#outputText").text(text);
})
});
Your HTML should be something like that:
HTML
<form>
<input class="num1" type="text" val="">
<button class="show">Click</button>
</form>
<p id="outputText"></p>
Note that in this case is really important to stop the default event behavior using preventDefault().
If you are not using a form the previous code became something like that:
jQuery
$(function(){
$(".show").on("click", function(event){
var text = $(".num1").val();
$("#outputText").text(text);
})
});
HTML
<input class="num1" type="text" val="">
<button class="show">Click</button>
<p id="outputText">
</p>
The outputText div is a div I've created to show the text.
I've prepared jsfiddle1, jsfiddle2 you can use to see the code in action, I hope it helps ;-)
That would be
var value = $('.num1').val();
Use the val() operator on the input to get the value, and then you could use the following code:
Html:
<input class="num1" type="text">
<button class="show">Click</button>
<p class="output"></p>
Javascript:
$('button').click(function(){
$('.output').html($('.num1').val());
});
use .val() not .text()
$(".show").click(function(){
var value= $(".num1").val();
$(".para").text(value)
});
demo
$('.show').click(function () {
var value = $('.num1').val();
$('p').text(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="num1" type="text" val=""></input>
<button class="show">Click</button>
<p></p>
There are type mistakes
var value = $('.num1').val(); should be in click method.
Use val() instead of .text() to get the input value.
<div class="uk-sortable js-sortable-option">
<div class="uk-margin-small-top">
<i class="uk-icon-bars"></i>
<input type="text" name="customfield[data][option][0]" value="First Option">
</div>
<div class="uk-margin-small-top">
<i class="uk-icon-bars"></i>
<input type="text" name="customfield[data][option][1]" value="Second Option">
</div>
<div class="uk-margin-small-top">
<i class="uk-icon-bars"></i>
<input type="text" name="customfield[data][option][2]" value="Third Option">
</div>
</div>
<button class="uk-margin-small-top uk-button js-add-item" type="button">Add Item</button>
In this form, a user can create a simple list, which can be used, e.g. for a custom select input. Every item have a unique id customfield[data][option][id]. To add a item, the user can click the button.
My problem is, that I have to change the name attribute for every new added item. How can I only change the id of the name-attribte?
var sortele = $('.js-sortable-option'),
additem = $('.js-add-item');
additem.on('click',function(){
ele = sortele.first();
/** code to change name attr (e.g. to customfield[data][option][newid])*/
sortele.append(ele);
});
to change any attribute of an element , use :
$(elm).attr("attr_name","new_val");
in this case , you should have a counter variable for using as array index.
var counter = 0;
additem.on('click',function(){
ele = sortele.first();
ele.attr("name", "customfield[data][option]["+counter+"]");
counter++;
sortele.append(ele);
});
With jquery you can do this:
var sortele = $('.js-sortable-option'),
additem = $('.js-add-item');
additem.on('click',function(){
ele = sortele.first();
myVar = "something";
/** code to change name attr (what to do?)*/
ele.attr("name", myVar);
});
not sure if this is even possible, I have a page with mutiple inputs,each input has a button. is there anyway of getting the inputs value on button click, without hardcoding the inputs id?
example
js
$('button').click(function () {
var inputcontent = $('input').prop('id');
console.log(inputcontent);
});
html
<input type="text" id="1">
<button type="button">Go!</button>
<input type="text" id="2">
<button type="button">Go!</button>
<input type="text" id="3">
<button type="button">Go!</button>
<input type="text" id="99">
<button type="button">Go!</button>
$('input').prop('id') returns id of first matched element in selector. To target the input before each button, you need to use .prev() along with $(this).
Try this:
$(this).prev().attr('id');
Working Demo
You already doing it right, just change a little bit in your code. You have to find out the value of the input field, which is placed just before your button on which you will click. So your code should be:
$('button').click(function () {
var inputcontent = $(this).prev().prop('id');
console.log(inputcontent);
});
This'll solve the issue
$('button').click(function () {
var value = $(this).prev().val();
console.log(value);
});
You're not targeting the item that you want the id from, the input just prior to the button. Use prev(0 to do that. In addition, id is really an attribute, not a property, so you should do this -
$('button').click(function () {
var inputID = $(this).prev().attr('id'); // gets the id of the input that precedes the button
console.log(inputID);
});
I want to get value of one textbox and put the same in another textbox.
my code is :
<input type="text" value="Keyword" id="one" />
<input type="text" value="Search" id="two" />
button
jquery:
var input = $("#one");
$('#btn').click(function(){
alert('dgdhjdgj');
var oneValue = $('#one').val();
alert("one value "+ oneValue);
var twoVal = $('#two').val($(input).attr('value'));
alert('two Val' + twoVal);
});
demo is here.
Issue : when I change the value of textbox #one, it does not change the value of #two.
thanks in advance.
$(input).attr('value') gets the value of the value attribute, which is the initial value, not the current value.
You had it right two lines earlier. Use val().
Try this
HTML
<input type="text" placeholder="Keyword" id="one" />
<input type="text" placeholder="Search" id="two" />
button
Script
$('#btn').click(function() {
var oneValue = $('#one').val();
$('#two').val(oneValue)
})
Fiddle
write textarea and check it. JSFIDDLE
$("#add").click(function(){
var thenVal = $("#textarea_first").val();
$("#textarea_second").val(thenVal);
});
if all that you want to change the text of second textbox, as soon as you change the text of first textbox, just use jQuery's change event.
just try this then:
$('#one').on("change",function(){
$('#two').val($(this).val());
});