HTML Select Box To Check Specific Options [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I've been lurking for a while, and finally need to ask a question!
I'm testing a select form as follows:
<form id='list'><br>
1<input type='checkbox' value='1' />
2<input type='checkbox' value='2' />
3<input type='checkbox' value='3' />
4<input type='checkbox' value='4' />
5<input type='checkbox' value='5' />
CheckThese<input type='checkbox' name='checkthese' onclick='checkThese()'><br>
</form>
And corresponding JavaScript as:
<script language='JavaScript'>
function checkThese () {
var values = ['1', '2', '4', '5'];
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", true);
}
</script>
For some reason, when I check "CheckThese" checkbox in the form, it doesn't select option 1, 2, 4, and 5..
Can someone please help me get it work?
Thank you very much!

Your code works provided you link jquery src??
add the following to your code : (using google cdn)
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

Related

Javascript, Jquery: get element by two attr? [closed]

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.

How to debug non-working jQuery on mobile devices? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
This is my JavaScript code which is not executing properly. I think I am getting something wrong somewhere.
I want to add a search bar to make a search option in a responsive menu navbar. However, it is showing in desktop but not in mobile menus. That's why I am using jQuery to add this manually.
$(document).ready(function() {
$('ul').append("
<li class='fusion-custom-menu-item fusion-main-menu-search fusion-last-menu-item'>
<a class='fusion-main-menu-icon'></a>
<div class='fusion-custom-menu-item-contents'>
<form action='http://www.heilmancenter.com/' method='get' class='searchform' role='search'>
<div class='search-table'>
<div class='search-field'>
<input type='text' placeholder='Search ...' class='s' name='s' value=''>
</div>
<div class='search-button'>
<input type='submit' value='' class='searchsubmit'>
</div>
</div>
<input type='hidden' value='en' name='lang'>
</form>
</div>
</li>
");
});
remove new lines from the html: either concat all lines or put your html code in one line
The first problem is that you mispelled the function keyword, the second one is that you are creating a mult-line string, but the engine doesn't know it and interprets the second line as a instruction. You need to take a precaution, such as add a backslash at the end of any line.
jQuery(document).ready(function(){
jQuery('ul').append("<li class='fusion-custom-menu-item fusion- main-menu\
-search fusion-last-menu-item'><a class='fusion-main-menu-icon'></a><div\
class='fusion-custom-menu-item-contents'><form\
action='http://www.heilmancenter.com/' method='get' class='searchform'\
role='search'>\
<div class='search-table'>\
<div class='search-field'>\
<input type='text' placeholder='Search ...' class='s' name='s'\
value=''>\
</div>\
<div class='search-button'>\
<input type='submit' value='' class='searchsubmit'>\
</div>\
</div>\
<input type='hidden' value='en' name='lang'></form>\
</div></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Radio Button In Form Function With Javascript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I use this code to make simple form function with javascript, but doesn't work correctly.
(function(){
var o=document.getElementById('formsz');
o.getElementsByTagName('form')[0].onsubmit=function(){
if(this.version.value == "show"){
alert("show")
}else{
alert("hide")
}
return false
}})();
<div id="formz">
<form action='#'>
<input type="radio" name="version" id="x64" value="show">Show<br/>
<input type="radio" name="version" id="x32" value="hide">Hide<br/>
<button type='submit'>Login</button>
</form>
</div>
Whats wrong?? Why it doesn't work ??? Please help,,,
'formzs' !== 'formz' - .getElementById is finding nothing because you've passed the wrong ID in.
Try using your developer console next time, the error is pretty obvious.
(function(){
var o = document.getElementById('formz');
o.getElementsByTagName('form')[0].onsubmit=function(){
if(this.version.value == "show"){
alert("show")
}else{
alert("hide")
}
return false
};
})();
<div id="formz">
<form action='#'>
<input type="radio" name="version" id="x64" value="show">Show<br/>
<input type="radio" name="version" id="x32" value="hide">Hide<br/>
<button type='submit'>Login</button>
</form>
</div>

How to filter among a number of radio button for a radio button with particular label [closed]

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.

javascript with checkbox to count and hide/show [closed]

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 8 years ago.
Improve this question
i need help to make one script
The script I'm trying to do is the following:
I have a page with multiple checkbox's corresponding products and they all have an associated value.
  then I have a variable that is the value I have in the account, and what I wanted to do with that as I start choosing products by clicking on the checkbox, javascript would have to count the value that has already been chosen and see how and lacking and hide all products that have a higher value or have available
<?php
$totalmoney = '50';
?>
<div class="tags">
<label><input type="checkbox" id="arts" value="20" /> Arts </label>
<label><input type="checkbox" id="computers" value="40" /> Computers </label>
<label><input type="checkbox" id="phone" value="15"/> Phone </label>
<label><input type="checkbox" id="video-games" value="5" /> Video Games </label>
</div>
Help me please, i need this to my work :S
Start with calculating the values of selected checkboxes with JS something like this:
var $inputs = $('#arts,#computers,#phone,#video-games');
$inputs.on('click', function (event) {
$checked = $inputs.is(':checked');
totalChecked = 0;
$checked.each(function () {
totalChecked += $(this).val();
});
});
Now you can easily check the rest:
var toBeSpend = totalmoney - totalChecked;
$inputs.not(':checked').each(function () {
$(this).toggle($(this).val() > toBeSpend);
});

Categories

Resources