Given the following HTML:
<table class="cat_list">
<tr>
<td>
<input type="checkbox" name="filter_cat[1]" id="cat_1" value="1"/>
<label for="cat_1">Music</label>
</td>
<td>
<input type="checkbox" name="filter_cat[2]" id="cat_2" value="1"/>
<label for="cat_2">Applications</label>
</td>
<td>
<input type="checkbox" name="filter_cat[3]" id="cat_3" value="1"/>
<label for="cat_3">E-Books</label>
</td>
<td>
<input type="checkbox" name="filter_cat[4]" id="cat_4" value="1"/>
<label for="cat_4">Audiobooks</label>
</td>
<td>
<input type="checkbox" name="filter_cat[5]" id="cat_5" value="1"/>
<label for="cat_5">E-Learning Videos</label>
</td>
<td>
<input type="checkbox" name="filter_cat[6]" id="cat_6" value="1"/>
<label for="cat_6">Magazines</label>
</td>
<td>
<input type="checkbox" name="filter_cat[7]" id="cat_7" value="1"/>
<label for="cat_7">Comics</label>
</td>
</tr>
The following script should uncheck all checkboxes in the table row, then check the one specific one with id cat_1.
$(".cat_list input[type='checkbox']").attr("checked",false);
$("#cat_1").attr("checked",true);
In Greasemonkey, it checks the one box for a millisecond then just unchecks all boxes. The second command alone DOES check the cat_1 box when executed alone, but when you add the line above it, they all get unchecked after...
So, is Greasemonkey executing things incorrectly or what? it looks like it's running the script backwards or there's a timing issue, like it's starting the unchecks async then finishing the check before the uncheck can finish.
It may be that your script's jQuery and the page are conflicting. A simple #grant GM_addStyle may ix it. Post your complete script.
Otherwise, that jQuery code operates synchronously. The page's javascript is interfering with what you are trying to do, or something key was omitted from the question.
Possibly, your script is firing before the page is done setting itself up. Link to the actual target page if you can.
Analyze the page's javascript that acts on those inputs, and consider using the page's own JS to make the changes. The page may need/expect states to be set, not just checkboxes toggled.
Use the page's JS via script injection or via unsafeWindow.
Using a timer, like in psyjoniz's answer, might be sufficient. Might not. But, it's easy enough to try. I'd use a longer interval though:
$(".cat_list input[type='checkbox']").attr ("checked", false);
//-- Give the page's JS time to react and settle.
setTimeout ( function () { $("#cat_1").attr ("checked", true); }, 100);
Try this ..
setTimeout(function(){$("#cat_1").attr("checked",true);},0);
If it is a race condition of some kind this will put your command at the bottom of the stack.
Related
I am not a developer but I do like to delve and in this case I have been asked to help out making some small changed to an old site, I have completed most of it like adding ReCapchta but I am struggling with just one thing I would like to add to it.
All I am trying to do is get a Text Box to show if a Radio Box is selected to "Other" and in addition this field should be REQUIRED but only if Other is selected in the Radio box above obviously.
I have tried a number of things, mostly based on this article...
Hide/display of 3 textboxes on selection of radio button
But I cannot get it to work it just never shows, if I remove the Hidden and Display tags it shows correctly so I know the layout etc. is right, it's just getting this JavaScript to play ball.
===========================================================
JavaScript located in Header...
<script type="text/javascript">
$(function() {
$('input[name="BodyType"]').on('click', function() {
if ($(this).val() == 'Other') {
$('#textboxes').show();
}
else {
$('#textboxes').hide();
}
});
});
</script>
===========================================================
HTML Table Defining the Radio Boxes
<table width="900" border="0" cellspacing="0" cellpadding="0">
<td align="center"><span class="tablebodytxt2"><strong>VEHICLE BODY TYPE:</strong></span><br>
<table>
<td width="0" align="center" valign="top">
<span class="tablebodytxt">
<input type="radio" name="BodyType" required value="Convertible" id="BodyType">Convertible
<input type="radio" name="BodyType" required value="Coupe" id="BodyType">Coupe
<input type="radio" name="BodyType" required value="Crossover" id="BodyType">Crossover
<input type="radio" name="BodyType" required value="Hatchback" id="BodyType">Hatchback
<input type="radio" name="BodyType" required value="MPV" id="BodyType">Multi-Purpose (MPV)
<input type="radio" name="BodyType" required value="Pick-Up" id="BodyType">Pick-Up (UTE)
<input type="radio" name="BodyType" required value="Sedan" id="BodyType">Sedan
<input type="radio" name="BodyType" required value="Saloon" id="BodyType">Saloon
<input type="radio" name="BodyType" required value="SUV" id="BodyType">Sports Utility (SUV)
<br>
<input type="radio" name="BodyType" required value="Other" id="BodyType">Other: (Please specify below!)</span></label></td>
</table>
===========================================================
DIV Header, this is what should appear only when OTHER has been selected in the Radio Table above...
<div id="textboxes" class="tablebodytxt21" style="display: none">
Specify:<input type="text" required class="formtxt" hidden="true"/>
</div>
===========================================================
It just does not show unless I removed the Hidden and Display tags, I have tried playing with the ID and NAME tags but no luck. :(
Thanks to anyone who looked at this but I managed to resolve this myself using my old trusted suck it and see method as I got lost trying to use the Google Debugger on my own code, oh well.
Anyway as I didn't get an answer here I repharsed the question here: Code to display boxes based on Radio Checkboxes not working
This in the end got me the result I was looking for.
Essentially the reaosn it was not working was I tried the Script Code in the Header & the Body both above and below the code.
However I did not try it below the body which was where it needed to sit apparently for reasons I don't understand and need to look into, thanks anyway to anyone who looked.
Hopefully this thread will help someone else with a simliar problem in the future.
Did lots of searching on here and found plenty of people with similar questions, but every 'solution' I have found fails to work in my case. I could be missing something simple, or it may have to do with our HTML. Basically, I want our text field to check it's corresponding radio button should someone enter a value there.
Here is a JSFiddle with what I want working, but when I put host it on a server for testing I don't get the same result.
JSFiddle
http://jsfiddle.net/p8kvQ/39/
HTML
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice1" value="47" checked="checked" />
<label for="UnitPrice1">$47</label>
</div>
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice2" value="Other" />
<label for="UnitPrice2">Other</label>
<input class="-input-width-auto" name="Other1" type="number" id="Other1" />
</div>
JS
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
I DO have "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defined in our HTML header and I've tried adding the code by defining its source file, but still no luck.
Any help would be great.
Your JS needs to be inside a document.ready. When the code is run, the dom element is not available, there for your click listener can not be attached it it.
$( document ).ready(function() {
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
});
(JSFiddle does this for you because you have the following setting: http://screencast.com/t/5WUC33diHpTb)
Ok I am a complete noob to html and programming. I am working on a project that will allow users to select different items on a screen. Once these are selected I have an "add to cart" button. When this is clicked I want all of the data passed to a seperate page so the use can see their selection and confirm before it is submitted. Here is the code I have so far and have done much research and can not figure out if html can pass this to another page using html code or javascript. Any help will be greatly appreciated. Thank you.
<input type="submit" value="Add to Cart" /></a></p>
<form action="demo_form.asp">
<p>
<input name="chaism" type="checkbox" value="3.50" /><strong>Small Chai Latte $3.50<br />
<input name="chaimed" type="checkbox" value="4.0" />Regular Chai Latte $4.00<br />
<input name="chailrg" type="checkbox" value="4.50" />Large Chai Latte $4.50</strong></p>
<p>
<select name="Favorite_Color" size="1"> <option selected="selected">Iced </option><option>Cold </option><option>Hot </option></select></p>
<p>
<input name="chai" type="checkbox" value="3.50" /><strong>Whipped Cream<br />
<input name="chai" type="checkbox" value="4.0" />Cinnamon<br />
<input name="chai" type="checkbox" value="4.50" />Soy Milk </strong> <strong>Quantity</strong>: <input max="100" min="1" name="quantity" size="7" style="width: 67px; height: 27px;" type="number" /></p>
You need to learn about server side programming, according to your form it looks like you are using asp.net. Here are a few places to start learning asp.net
http://www.w3schools.com/asp/
http://www.asp.net/mvc/tutorials
Good luck!
The method I would recommend is to have all your checkboxes have the same name, and have their value represent something unique about the product.
<input type="checkbox" name="product" value="1"> Chai tea<br />
<input type="checkbox" name="product" value="2"> Lemon tea<br />
If you select both products, product=1,2 will be passed in the POST data. It's then up to you to loop through the selected products, and output each one. (That process depends wholly on your server-side code).
Generally you need some sort of server that handles the parameters you pass, in your case chai or chaism. It seems you're working with ASP. I would start looking there on how to capture GET parameters and print them out onto a page.
If you want a pure Javascipt/JQuery of handing these parameters, here is a related question I found which lets you get the parameters by name, which then you can fill in values later.
This may be a little intense if you're just starting out, but Smashing Mag has a good article about creating a shopping cart using session storage. http://coding.smashingmagazine.com/2014/02/13/create-client-side-shopping-cart/
You could make use of HTML5 local storage here, it's really simple. And the page explains it really well: http://diveintohtml5.info/storage.html
Basically you can create variables on one page, and then get them on any other page using:
localStorage.setItem('bar',foo);
and
localStorage.getItem('bar'); // returns foo
Hope this helps.
I have been playing around with html lately and ran into a slight issue.
Let us say that there is a form with multiple elements on it. Some of those elements are checkboxes, and you want to hide the checkboxs and their corresponding text. How do you do this without hiding the entire form? The following is what I have tried so far:
<input type="checkbox" id=check1 status="display:none">Option 1<br>
But this hides the box and leaves the text "Option 1" still visible. How do I hide the text as well?
I would suggest using the <label>-tag around the whole thing:
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
This way you can hide the whole line and the user has the advantage that the checkbox toggles, if he clicks the text. You also gain in semantics.
Also note that status is not a valid attribute. For styling use style.
Wrap the input in a div and apply the "style" tag to the div.
<div style="display: none;">
<input type="checkbox" id="check1">Option 1<br>
</div>
you need to wrap it in a span/label and then hide it
<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br>
Place checkbox inside div and apply style to div
<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div>
<span style="display:none"><input ...>Option 1</span>
or better
<label for="check1" style="display:none"><input id="check1"...>Option 1</label><br/>
I'm sure you mean style="display:none and not status, but here goes:
Your option text isn't inside the input, nor can it be (for a checkbox), so you'll have to wrap them in a container, then hide the container. Something like:
<div id="checkboxcontainer" style="display: none">
<input type="checkbox" id="check1">
Option 1
<br>
</div>
<input type="checkbox" id="check1" style="display:none">
<label for="check1">Option 1</label><br>
JS:
$('label[for="check1"]').hide();
try something like this
<label style="display:none"><input type="checkbox" id=check1 >Option 1</label>
Use the below to get your desired need.
Wrap the entirety with a label which will then allow you to use style="display:none to hide the label.
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
You also used status instead of style but by using the code above you'll do fine.
Okay, since the other answers were not that describing i can go ahead and be a little more pedagogic.
First of all, the code you have written is perfectly fine, however you lose some control over your content if it's not wrapped inside a HTML tag.
As all the other answers here wrote, you obviously need a label with your input tag:
<input type="checkbox" id="check1"><label for="check1" >Option 1</label>
You have got some different ways of using labels (which is recommended since this gives you more control over your content). My example above uses the "for" attribute, which is a pointer to the input ID to tell the browser what input field the label is for (quite obvious, eh?). You can also wrap your input inside the label (like all the other answers to this thread), which is the way some people prefers (including me):
<label for="check1"><input type="checkbox" id="check1">Option 1</label>
I saw an answer where the person who wrote some (what he called) JS which is code that hides the label with a wrapped input (i.e. the label AND the input is hidden). However, this was JS that is also using jQuery, so you need to implement that framework before you can use that code snippet:
$('label[for="check1"]').hide(); //This hides the label and the input at the same time if you wrap your input!
I recommend you to use the wrapped version of the markup, and implementing jQuery on your page and thereafter apply the codesnippet that is provided in this answer. That can give you the power to show/hide the inputs + labels on, for example, a click on a button or so. Feel free to ask me anything if you want some guidance. :)
/J.
Don't dismiss this as a newbie question! It's not, I'm not, I've tried everything, and its a complex/convoluted environment that my code is in.
Okay - here goes. I'm adapting someone else's html/js/css code and trying to get it to work on my server (I've taken permission - please, no comments on that). The main html generates a overlaid form which has a checkbox which is unchecked that I need to mark as checked before presenting to the user.
The checkbox code is just:
<input type="checkbox" id="type" />
<label for="type" id="disable">Disable check</label>
I've tried changing the above to ALL of the following (AND doing Ctrl+F5 when trying it out on the browser):
<input type="checkbox" id="type" CHECKED/>
<input type="checkbox" id="type" checked>
<input type="checkbox" id="type" checked="checked"/>
<input type="checkbox" id="type" checked="checked" value="1"/>
<input type="checkbox" id="type" value="true" checked>
<input type="checkbox" id="type" name="tempname" checked="checked"/>
<input type="checkbox" id="type" checked=true/>
At the end of the page: <script type="text/javascript">document.getElementById("type").checked=true;</script>
The problem COULD be elsewhere - something somewhere COULD be setting it to a default value of unchecked, but (a) that's a bit unlikely, and (b) I did look at the accompanying js code but no luck on a preliminary search.
Thoughts? 'cause I'm all out... :(
It's a fairly simple question, if only because checkboxes are fairly simple things :)
If
<input type="checkbox" id="type" name="name" checked="checked"/>
doesn't work then I would strongly suggest taking a bigger dig through the javascript being loaded on the page.
Have you looked into the JavaScript to see if there is code that is marking the checkbox unchecked onclick?