Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I'm trying to get value of data-cart-item-id from the input below. But I'm unable to do it.
<td>
<input
id="qinput-xxx"
data-link="http:xxxx"
data-item-id="xxx"
data-cart-item-id="xxxx"
class="qty cart-item-quantity input-text" name=""
value="1"
/>
<button id="qbutton-xxx"
data-item-id="xxx"
disabled="disabled"
data-update
data-cart-item-update
class="button quantity-button">
ok
</button>
</td>
I'm trying with the following code, but I'm getting nothing from it.
document.querySelectorAll('data-cart-item-id')
Since the input has it's own unique id, I would suggest you to use getElementById instead. Then, just get it's data-cart-item-id attribute value with getAttribute function.
var elem = document.getElementById('qinput-xxx'),
data = elem.getAttribute('data-cart-item-id');
console.log(data);
<td>
<input id="qinput-xxx" data-link="http:xxxx" data-item-id="xxx" data-cart-item-id="xxxx" class="qty cart-item-quantity input-text" name="" value="1" />
<button id="qbutton-xxx" data-item-id="xxx" disabled="disabled" data-update data-cart-item-update class="button quantity-button">ok</button>
</td>
data-cart-item-id is not a tag name. It is a property, so use input[data-cart-item-id] or [data-cart-item-id].
Also querySelectorAll retuns an Array of elements, so you have to specify the index.
console.log(document.querySelectorAll('[data-cart-item-id]')[0].getAttribute('data-cart-item-id'));
<td>
<input
id="qinput-xxx"
data-link="http:xxxx"
data-item-id="xxx"
data-cart-item-id="xxxx"
class="qty cart-item-quantity input-text" name=""
value="1"
/>
<button id="qbutton-xxx"
data-item-id="xxx"
disabled="disabled"
data-update
data-cart-item-update
class="button quantity-button">
ok
</button>
</td>
You have to get element by class name for example for
qty class if it is specified for products only then you will get array of products then use a for loop from 0 till element length then with in it use the getAttribute() function you will get that attribute value do your code with it.
Related
This question already has answers here:
Allow 2 decimal places in <input type="number">
(18 answers)
Closed 3 years ago.
I want to show a popup on submit if the value is less than the max attribute. I am able to achieve that with the HTML5 attribute like this: <input type='number' max='21' />
but the problem is that when the max value is a float number like <input type='number' max='21.1' /> then it shows another popup saying that the value must be less than 21.
I've searched and I can solve that problem with Javascript but I want to use the max attribute even when the value is a float number.
<input type='number' max='21.1' />
<button type='submit'>Submit</button>
I want the form to be able to submit even if the value is 21 or 21.1 unless it is 21.2 or more.
You need to add the step property like this:
<form>
<input type="number" max="21.1" step="0.1"/>
</form>
Alternatively you can use any as value:
<form>
<input type="number" max="21.1" step="any"/>
</form>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
HTML:
<form id="form_filter" action="{{ Request::fullUrl() }}" method="post">
<input type="checkbox" name="shape[]" value="Aviator">
<input type="checkbox" name="shape[]" value="Round">
<input type="checkbox" name="shape[]" value="Oval">
</form>
I need get element by [name] and [value] as:
$('#form_filter input[name=shape][value=Round]').prop('checked', true);
Please help!
Your have missed [] in the name value, it should be name="shape[]"
$('#form_filter input[name="shape[]"][value=Round]').prop('checked', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form_filter" action="{{ Request::fullUrl() }}" method="post">
<input type="checkbox" name="shape[]" value="Aviator">
<input type="checkbox" name="shape[]" value="Round">
<input type="checkbox" name="shape[]" value="Oval">
</form>
You should just use quotes inside the selector, ie:
$('#form_filter input[name="shape[]"][value="Round"]').length === 1 // true
Or:
$('#form_filter input[name="shape[]"][value="Round"]').prop('checked', true); // checks your specific checkbox
jQuery docs on equals selector also state the following:
attribute: An attribute name.
value: An attribute value. Can be either a valid identifier or a
quoted string.
Test on the JSFiddle.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
Im new to jQuery but have to get a solution together to add an alert to a generated form (so I cant change the divs, only tack JS and jQuery at the end).
I've been trying to create an alert when a certain radio button is clicked but I cant seem to get it to trigger, had a look through some other threads but no joy! (cant seem to get the code to format properly here!)
<div class="inputWrapper">
<span id="tfa_3575" class="choices horizontal ">
<span class="oneChoice">
<input type="radio" value="tfa_3576" class="" id="tfa_3576" name="tfa_3575">
<label class="label postField" id="tfa_3576-L" for="tfa_3576">Confirmed Submission</label>
</span>
<span class="oneChoice">
<input type="radio" value="tfa_3577" class="" checked="" id="tfa_3577" name="tfa_3575">
<label class="label postField" id="tfa_3577-L" for="tfa_3577">Keep as Draft</label>
</span>
</span>
</div>
I have used the below but I cant get it work! Any Ideas what im doing wrong!
The goal is to check which one is ticked and if one is ticked send an alert and edit button text (though I can manage that last bit!!)
<script type='text/javascript'>
jQuery(document).ready(function(){
$('input:radio[name="tfa_3576"]').change(function(){
alert("test");
});
});
</script>
Thanks!
With a radio button, you change the "checked" state, not the value, therefore the 'change' event doesn't fire. Observe the 'click' event instead.
And make sure the jQuery selector is correct.
The problem is that you do not have a radio button with a name attribute of tfa_3576
$('input:radio').change(function(){
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputWrapper">
<span id="tfa_3575" class="choices horizontal ">
<span class="oneChoice">
<input type="radio" value="tfa_3576" class="" id="tfa_3576" name="tfa_3575">
<label class="label postField" id="tfa_3576-L" for="tfa_3576">Confirmed Submission</label>
</span>
<span class="oneChoice">
<input type="radio" value="tfa_3577" class="" checked="" id="tfa_3577" name="tfa_3575">
<label class="label postField" id="tfa_3577-L" for="tfa_3577">Keep as Draft</label>
</span>
</span>
</div>
You have the name attribute set to the wrong value tfa_3575. Just change the name attribute from tfa_3575 to tfa_3576
<input type="radio" value="tfa_3576" class="" id="tfa_3576" name="tfa_3576">
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i have a text field , where i input the value to filter ....
<input type="text" name="filter" id="filter">
<input type="radio" name="item" id="item" value="1">apple
<input type="radio" name="item" id="item" value="2">banana
<input type="radio" name="item" id="item" value="3">grapes
<input type="radio" name="item" id="item" value="4">mango
<input type="radio" name="item" id="item" value="5">orange
<input type="radio" name="item" id="item" value="6">pineapple
if i input apple in text field, only radio button with apple has text value should appear , rest must hide . Is der any way to do that ?
Check out the jquery selectors page:
"Attribute Contains Selector [name*="value"]"
var name2lookFor = $('#filter').val();
var $matchingElements = $('input[type="radio"]').filter('[name*="'+name2lookFor +'"]');
There are a lot of other selectors, just find the one you need. You might need a combination to make a bit more custom search, but this should put you in the right track.
Offtopic: An id must be unique, you cant call them the same in the ID attribute.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Hi guys I have been making this form that has different inputs but they all have the same class:
<input type="text" name="username" class="field" />
<input type="text" name="email" calss="field" />
what i want to do is when ever the input filed is clicked i want to change the border color with JQuery(only the element that is clicked not all at the same time)
any one got an idea?
<input type="text" name="username" class="field" />
<input type="text" name="email" calss="field" />
$('.field').click(function(){
$(this).css('attributeName','value'); //here $(this) represents current element.
});
Bind a click event to all inputs, then use $(this) to target the one that was actually clicked .
$('.field').on('click', function() {
$('.field').removeClass('clicked'); // Remove previous
var $this = $(this);
$this.addClass('clicked'); // If you want to add the CSS with a class, which i recommend.
$this.css('border', '[css-border-values]'); // Inline CSS
});
<input type="text" name="username" class="field" />
<input type="text" name="email" calss="field" />
$('input[type=text]').focus(function(){
$('input[type=text]').css({'border':''});
$(this).css({'border':'solid 2px #ccc'});
});
http://jsfiddle.net/jCpfH/