jQuery if element id exists add class to the same element - javascript

I am trying to addClass to an input if it exists and trigger a click else addClass to different element and trigger a click on it in jQuery but I am having some problems and tried different ways but with no luck.
This is the html:
<td>
<input type="radio" name="shipping_method" value="free.free" id="free.free" />
<label for="free.free">Free</label>
<input type="radio" name="shipping_method" value="flat.flat" id="flat.flat" />
<label for="flat.flat">Payed</label>
</td>
and my script :
<script language="Javascript" type="text/javascript">
$(document).ready(function(){
if($('#free.free').length > 0) {
$('#free.free').addClass('sgcheck');
$('.sgcheck').trigger('click');
}
else {
$('#flat.flat').addClass('sgcheck');
$('.sgcheck').trigger('click');
}
});
</script>

You need to escape dot character in id selector with double \\:
$('#free\\.free').length
otherwise #free.free selector means element with id free and class name free, which your HTML obviously doesn't have.

Related

Cannot add class to next element of $(this)

I want to add class, next to checked input. So, class will be added to span, which is next to a checked input radio.
<label>
<input type="radio" name="option[228]" value="20" checked="checked">
<span data-toggle="tooltip" data-placement="top" title="" data-original-title="Purple (+₹20)">
<img src="http://countrylivings.com/image/cache/catalog/sample/q2-50x50.png" alt="Purple +₹20" width="36px" height="36px">
</span>
</label>
I have tried a no. of ways to do so... But didn't work. like---
$(document).ready(function(){
if ($('label input').is(':checked')) {
$(this.element).next().addClass('hloo');
alert($(this.element).val());
};
});
But i get an alert of undefined when input is checked.
So,
if ($('label input').is(':checked')) {
is working fine to detect if checkbox is checked But
$(this) or $(this.element)
is not working.
Anyone know what is going wrong?
There's three issues in your code. Firstly ::checked is not a valid jQuery selector, it's just :checked.
Secondly, assuming this is a reference to an Element object (as it is in the vast majority of cases in jQuery) then there is no element property. Just use $(this).
Lastly, if conditions run under the outer scope, so this would refer to the document in your example, not the input. It's for this reason val() is undefined; you're looking at document.value. To fix this, select the element directly before working with it:
$(document).ready(function() {
var $checkedInput = $('label input:checked');
$checkedInput.next().addClass('hloo');
console.log($checkedInput.val());
});
.hloo { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="option[228]" value="20" checked="checked">
<span data-toggle="tooltip" data-placement="top" title="" data-original-title="Purple (+₹20)">
<img src="http://countrylivings.com/image/cache/catalog/sample/q2-50x50.png" alt="Purple +₹20" width="36px" height="36px">
</span>
</label>

Dynamic Checkbox selector in jquery

I have a series of dyanmic checkboxes which are creating at runtime but with differnt Ids like this (patter is same)
ModellingTagID_1201
ModellingTagID_1202
ModellingTagID_1203
ModellingTagID_1204
I want to know that above check box change or not? how can i make a dyanmic event with dynamic selector? so that i can get that particular checkbox value has changed? is this kind of thing possible?
$jqLib("#ModellingTagID_*").change(function(){
var lastState =$jqLib("#ModellingTagAlternativePlanning").prop("disabled");
$jqLib("#ModellingTagAlternativePlanning").prop("disabled",!lastState);
});
you can apply same class to all those checkboxes
<li><input type="checkbox" id="yourcbid1" name="x" value="1" class="yourcbclass" /> cb1</li>
<li><input type="checkbox" id="yourcbid2" name="x" value="1" class="yourcbclass" /> cb2</li>
and then you can make function for it's change event like this.
$(function(){
$('.yourcbclass').on('change', function() {
if($(this).is(':checked'))
{
//do your stuff here
}
});
});
see if this helps..
Very simple using this way:--
$("#envoyer").click(function(e) {
var myArray = [];
$(":checkbox:checked").each(function() {
myArray.push(this.value);
});
if(myArray == ''){
alert('Please check');
}else{
alert("Checked: " + myArray.join(","));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
one<input type="checkbox" name='checkbox0' value="one_name" checked>
two<input type="checkbox" name='checkbox1' value="one_name1">
three<input type="checkbox" name='checkbox2' value="one_name2">
<input type="button" id="envoyer" value="Envoyer Reponse" />
</body>
</html>
From what I understand, your issue is to distinguish the unique id of the checkbox, which is being, changed. To achieve this, you can simply add a common class to all the elements, alongwith unique random ids.
cb_1<input type="checkbox" class="someclass" id='ModellingTagID_1201' value="value_1" checked>
cb_2<input type="checkbox" class="someclass" id='ModellingTagID_1202' value="value_2">
cb_3<input type="checkbox" class="someclass" id='ModellingTagID_1203' value="value_3">
And then you can simply bind a change event listener to the common class, and fetch the value of the random id, which has been changed, from inside the event listener.
$(document).ready(function(){
$('.someclass').on('change', function() {
alert($(this).attr("id"));
});
});

find element html with jquery

how to find element html with Jquery .
in this example element html is "input"
jsfiddle
$("#her").click(function() {
var $t = $('#mee');
console.log($t.filter());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="mee">
<input type="submit" value="click ici" id="her">
$(this).prev().prop('nodeName');
I believe this was the JSFiddle link - http://jsfiddle.net/sr2o412y/
<input type="text" id="mee">
<input type="submit" value="click ici" id="her" >
If you want to select a element using jquery you can use (#)id attribute or (.) class attribute or (input) html tagname.
In this case if you want to take the data from text element which has id => "#mee" on click if id => "#her". You can use the below code
$('#her').on('click', function(){
var textvalue = $('#mee').val();
console.log(textvalue);
});
Provide readable id and class names to identify elements properly.
Your selectors looks fine to me. In short, you can use any valid CSS selector, so both $('#her') and $('#mee') should be working in your example, as you have HTML elements with those ids:
$('#her').click(function() {
var $t = $('#mee');
console.log($t.val());
});
<input type="text" id="mee" />
<input type="submit" id="her" value="SUBMIT" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you want to select an element based on its type (tag) instead, then just remove the #. For example, to select any input element on the page you would just do:
$('input')
Or, to get just the first one:
$('input').first()
Or also:
$('input').eq(0)
You can also select elements based on type plus attribute to select specific inputs:
$('input[type="text"]')

Validate form with checkboxes using Javascript

I have a set of checkboxes in a form as follows:
<form name="form1" onsubmit="return window.Validate()" method="post" action="myprog.cgi">
<div id="filters">
<input name="One_f" type="checkbox"> No. 1<br>
<input name="Two_f" type="checkbox"> No. 2<br>
<input name="Three_f" type="checkbox"> No. 3<br>
</div>
<div id="Colors">
<input name="Red" type="checkbox"> Red<br>
<input name="Blue" type="checkbox"> Blue<br>
<input name="Green" type="checkbox"> Green<br>
</div>
<div id="Button">
<input name="Submit" value="Submit" type="submit">
</div>
</form>
I want to write a function Validate in Javascript that would see whether any of the checkboxes in the div id
filters is checked. If none of them is checked, it should show an alert box and prevent the cgi from
getting executed. The checkboxes in the div filters all have their names ending in _f, if that helps.
How do I write such a function?
Here's a jQuery solution, I'll add a plain JS one in a few moments.
$('form[name="form1"]').on('submit', function(e) {
if(!$('#filters input:checkbox:checked').length) {
e.preventDefault();
alert('Please select at least one filter.');
}
});
This codes does not require the onsubmit inline event.
Since you are not familiar with jQuery I'll explain it more thoroughly:
$('form[name="form1"]') creates a jQuery object containing all elements matching the selector. It would be faster if you gave your form id="form1" and used $('#form1')
.on() binds an event handler. The first argument passed to the callback function is a wrapped event object which we'll need to prevent the form from being submitted if necessary.
$('#filters input:checkbox:checked') selects all checked checkboxes that are children of #filters. :checkbox and :checked are pseudo-selectors which will only match checkboxes that are currently checked)
.length is the number of elements in the jQuery object - if nothing is checked it's zero
e.preventDefault(); prevents the default action of the event from being executed, i.e. the form will not be submitted.
Usually you would wrap the whole code with $(document).ready(function() { ... }); to make it execute as soon as the DOM is ready - if you put the <script> tag containing the code after the </form> tag of your form, it's not necessary though.
If you really want a plain JS solution, try this:
function Validate() {
var container = document.getElementById('filters');
var checked = 0;
for(var i = 0; i < container.childNodes.length; i++) {
var elem = container.childNodes[i];
if(elem.tagName == 'INPUT' && elem.type == 'checkbox' && elem.checked) {
checked++;
}
};
if(checked) {
return true;
}
alert('Please select at least one filter.');
return false;
}

JavaScript click function null value in text box

I need to null the value in text box on click, currently I have written a code as such:
<div class="keyword_non">
<h1>Keywords : <a class="someClass question_off" title="Keywords "></a></h1>
<h2><input type="text" name="kw1" value="one" /></h2>
<h2><input type="text" name="kw2" value="two" /></h2>
<h2><input type="text" name="kw3" value="three" /></h2>
<h2><input type="text" name="kw4" value="four" /></h2>
</div>
<script type="text/javascript" src="/functions/javascript/custom/non_profit_edit.js"></script>
<script type="text/javascript" src="/functions/javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/functions/javascript/custom/jquery-ui-1.8.7.custom.min.js"></script>
Inside non_profit_edit.js i have written as such
$(document).ready(function(){
$(".kw1").click(function() {
$(".kw1").val(" ");
});
$(".kw2").click(function() {
$(".kw2").val(" ");
});
$(".kw3").click(function() {
$(".kw3").val(" ");
});
$(".kw4").click(function() {
$(".kw4").val(" ");
});
});
But write now its not working properly. Is this any browser issues or error in code?
In the selector the '.' indicates a class. For names use
$('[name="kw1"]'). //
Error in code.
Your selector ".kw1" selects an element with kw1 as the class attribute. None of your inputs have a class, they just have names. Add classes to them or replace the selector in your jQuery to this format: $('[name="kw1"]')
You can also simplify your function by doing this:
$('.keyword_non')
.on('click', 'input[type="text"]', function(e) {
this.value = ''; // input that was clicked on
}
This is a syntax error in your code.you does not use dot(.) in click function.Dot(.) will use for class. when kw1 is name in your input

Categories

Resources