<progress value="0" max="100" id="p1"></progress>
<div class="allQuestion"><?php for($i=1; $i<=10; $i++){?><input type="radio" name="Dq[1]" value="<?=$i?>" onClick='incr();'> <?=$i?> <?php } ?></div>
js
<script type="text/javascript">
function incr() {
var v1=document.getElementById('p1').value;
document.getElementById("p1").value= v1 + 1;
}
</script>
my intention is make the question between 1-10 point can only be clicked once , but the input was generate by php so if i put the onclick inside input , each radio i clicked will be increasing the progress bar , i only need the radio only be clicked once and the progress bar remain the same % it have , lets each question is 1% once clicked it only increasing 1% , when reclick it still 1%.
or and i also dont wanted use jquery.
I'm not 100% sure what it is you're asking here (judging by the down votes it would appear others are too).
Some general tips for asking questions on StackOverflow:
Your question should be clear (it's difficult to actually judge what you're asking here)
Your code should ideally be presented in a readable manner (the PHP/HTML code you've provided is all on one line, and considering the question is regarding JavaScript functionality, and we don't have access to the rest of your PHP code, the PHP code is useless in terms of the question, and makes answering your question more effort)
JSFiddles are usually helpful when asking a frontend question like this (it means less wasted time replicating the issue)
Try and follow the above suggestions when asking a question, the list is by no means all inclusive though, you should also really read through the guidelines on asking questions here.
Now onto your actual question.
I'm guessing you want your code to function as follows:
A user can only select an option once
Once an option has been selected it should be added to the numerical contents of a paragraph
Assuming I've got the above correct (let me know if not) the following code should work for you:
HTML:
<p id="answerResult">1</p>
<div class="allQuestion" id="allQuestion">
<input type="radio" name="questionAnswer" value="1" /> 1<br />
<input type="radio" name="questionAnswer" value="2" /> 2<br />
<input type="radio" name="questionAnswer" value="3" /> 3<br />
<input type="radio" name="questionAnswer" value="4" /> 4<br />
<input type="radio" name="questionAnswer" value="5" /> 5<br />
<input type="radio" name="questionAnswer" value="6" /> 6<br />
<input type="radio" name="questionAnswer" value="7" /> 7<br />
<input type="radio" name="questionAnswer" value="8" /> 8<br />
<input type="radio" name="questionAnswer" value="9" /> 9<br />
<input type="radio" name="questionAnswer" value="10" /> 10<br />
</div>
JavaScript:
// the paragraph that contains information about your currently selected answer
var answerSummary = document.getElementById('answerResult');
// the container of the radio buttons
var answersContainer = document.getElementById("allQuestion");
// the radio buttons
var answerOptions = answersContainer.getElementsByTagName("input");
for(var i = 0; i < answerOptions.length; i++) {
answerOptions[i].addEventListener("click", function(event) {
// change the paragraph to show the currently selected value
answerSummary.innerHTML = answerSummary.innerHTML + " " + this.value;
// disable all radio buttons once an options has been selected
for(var i = 0; i < answerOptions.length; i++) {
answerOptions[i].disabled = true;
}
});
}
And a link to this code in action:
http://jsfiddle.net/44mvrftu/4/
I've quite significantly refactored your code to try and make it more readable, maintainable and easy to understand, somethings I've changed:
Better variable names (v1 should never be a variable name)
No 'onclick' in the HTML, you should never really do this as it means you're mingling HTML and JavaScript (presentation and functionality) which makes maintainability more difficult, and is arguably less performant in some ways. Let me know if you find the way I've added the onclick event handler confusing and I'll try and help you understand, alternatively you could modify the above code to use 'onclick' in the HTML.
I removed the PHP (this was necessary for me to create a working demo)
I've used pure JavaScript, this would be easier and cleaner to implement in jQuery, and would also ensure it worked in older browsers (the above code will only reliably work in modern browsers) but you've not said anything about jQuery so I've assumed you've not used it.
I hope I've got that right? Let me know if you have any questions.
Question is not clear, if you are saying you want onclick only once use jQuery .one(),see details here
Well I don't know what you want? You can use both PHP and Javascript but it depends on what you want to do.
The jQuery solution:
$("input").one("click", function () {
alert($("input[type=checkbox]").val());
});
Related
I am setting up a multipage survey/study that has 2 multiple choice radio button questions per page (with the exception of the first page, which requires no answer). I have a next function that checks to make sure an answer has been given. It works, but when passed two values so that it will check two questions, it only checks one of them. I used console.log to display the name passing through the function, and only one name gets passed. I can go to the next page by answering only one of the questions, even if it's not the one passing through the function according to the name in the console log. How can I get it to check all of the questions that I specify in onclick?
Here is the code for the Continue button with the next() function for onclick. When I pass both names, it will only check 1 of the 2.
<input type="button" value="Continue" onclick="next('Q1Answer','Q1Rating');"/>
These are the radio buttons:
Question 1
<input name="Q1Answer" type="radio" value="Right" /> Right
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong
Question 2
Less confident
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" />
More confident
This is the current version of my next function. I added a for loop to try to get it to iterate through all of the items passed to it, but that isn't solving the issue (it worked the same way without the loop). This code is in a javascript file that I call in the HTML code.
function next(name) {
for (i in name) {
if (name.startsWith('Q')) {
if (!document.querySelectorAll('input[name]:checked').length) {
alert("Please answer the question.");
return;
}
}
}
current++;
swap(effectivePage(current - 1), effectivePage(current));
}
(swap and effectivePage are other functions for progressing to the next page, I can add those if needed to test)
I've used name as the identifier, but could easily replace with ID if that would somehow make this easier. I used the startsWith if condition so that only actual questions would get checked.
I have basic HTML knowledge and don't know Javascript at all beyond what I've taught myself to try to figure this out, so I'm hoping the solution is a simple one.
So I managed to find 2 problems which were keeping your code from performing the way you wanted. When you created your next call in the HTML, you tried to pass in multiple name strings, but your next function only takes in one parameter. This means that your calls were only ever getting the first string to check against which in this case was Q1Answer. If you change the value being passed in to an array of strings, then you can perform the checking against all the names you need. Also, be sure to pass the exact name of the inputs you want to check against in that next call. If those names are incorrect your code will make it so the user can never reach the next page as it will think that that input was never selected (because it won't find that input at all on the page).
Second, when you were performing the checking by using the query selector, you weren't checking against any specific names so it was always finding the selected first value even if it should have been checking for the second input tag. I have modified that check to now specifically look for the name passed in so it will only match against the input in question (ie, the first pass will check for Q1Answer and the second pass will check for Qrating).
function next(name) {
for (i in name) {
if (name[i].startsWith('Q')) {
if (!document.querySelectorAll('input[name=' + name[i] + ']:checked').length) {
alert("Please answer the question.");
return;
}
}
}
current++;
swap(effectivePage(current - 1), effectivePage(current));
}
<input type="button" value="Continue" onclick="next(['Q1Answer','Qrating']);" />
<input name="Q1Answer" type="radio" value="Right" /> Right
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong
<br/> Less confident
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" /> More confident
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.
So I've tried looking, and I haven't found anything so hopefully this isn't a repeat question. I have several sets of radio buttons, and I need to have the values associated with the latter radio buttons change dynamically based on the users selection within the first set of radio buttons.
<input type="radio" name="length" id="6feet" value=" " > 6'0"
<input type="radio" name="length" id="6.5feet" value=" " > 6'6"
<input type="radio" name="length" id="7feet" value=" " > 7'0"
<input type="radio" name="weight" ID="weight3" value="5" /> 3
<input type="radio" name="weight" ID="weight4" value="10" /> 4
<input type="radio" name="weight" ID="weight5" value="15" /> 5
<input type="radio" name="pieces" ID="PieceA" value="10"> 2
<input type="radio" name="pieces" ID="PieceB" value="20"> 3
So what I'm trying to figure out is if there is a way to use onClick or something similar to set it so that when the user selects one of the three "length" radio buttons, they will each assign different values to both the weight and pieces radio buttons as well. Sorry if the question is unclear at all.
I didnt understand totally your question.. is this what you need?
$(document).ready(function(){
$('input[name=length]').click(function () {
$('input[name=weight]').val(newValue);
$('input[name=pieces]').val(newValue);
});
});
Do you need something like this and reassign a real "value" for radiobuttons?
A pure javascript solution would look similar to this:
document.getElementById("6feet").onclick = (function() {
document.getElementById("weight3").click();
});
You attach the onclick event to an element (in this case the element with id of 6feet) and once that is clicked it calls the defined function.
Read more about .click()
EXAMPLE
There are also simpler solutions using jQuery, but I wasn't sure if you were able to incorporate it into your code.
I have four radio buttons. If I select the last radio button then one textbox is appearing. I handled this scenario by jquery. Now I want to validate in such a way that if user gets this textbox means if user checked the last radio button, then he should provide some text.But in my case, if I check any one of the radio button, its telling to provide some text. The code is like:
<input type="radio" name="bus_plan" id="smallBtn" value="1" />1
<input type="radio" name="bus_plan" id="smallBtn" value="2" />2
<input type="radio" name="bus_plan" id="smallBtn" value="3" />3
<input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
<span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
<div class="reg-line" id="pr_code_id" style="display:none">
<div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
<input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
<br />
<div>
<div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:radio[name=bus_plan]").click(function(){
var values = $(this).val();
if(values == 'Promotional'){
$('#pr_code_id').show();
}else{
$('#pr_code_id').hide();
}
});
});
</script>
and in js if I alert the value of document.getElementById('bus_prcode').value then always it is showing Promotional code, which is only for last radio button value.
Your code is a bit of a mess which is the root of this problem. Remember, one element per ID.
You may also find it helpful to look at jQuery .is(), for example:
$('input[value="Promotional"]').is(':checked')
n.b. I do not suggest the above, you should use identifiers in the appropriate way first.
Also worth noting that your code works fine for me using Chrome. See an example (which I have expanded for you) here: http://jsbin.com/ofujal/3/
You should not have an element with the same ID (your radio buttons). Also, you're getting the textbox by running document.getElementById('bus_prcode') and not the radio button. You should give a unique ID to your last radio button, e.g. btnPromotional, then bind click to it:
$("#btnPromotional").click(...)
Is it possible with Javascript to hide the checked-status of a radio button so that on a form submit the submit-request fails b/c of missing information?
For example: I have a group of radio buttons
<form action="?modul=daDaaaah&subModul=someCoolThingy" method="post">
<input type="radio" name="mygroup" id="nod_1" value="great" />
<input type="radio" name="mygroup" id="nod_2" value="greater" />
<input type="radio" name="mygroup" id="nod_3" value="awesome" />
<input type="radio" name="mygroup" id="nod_4" value="junk" />
<input type="radio" name="mygroup" id="nod_5" value="foo" />
<input type="submit" name="edit" value="Edit" />
</form>
Now I am checking the radio button with the id=1 and by submitting it (dunno whether I got the button correct, but I sorta guess it is correct) the server should get a request where it says mygroup=great (right?).
Now is there a way to have that radio button checked and hidden it at the same time?
I am asking b/c somehow a javascript I am using is supposedly hiding this status (everywhere but in IE) by somehow altering the DOM or what do I know and I can't seem to get the right request nor find the reason why or how it does it.
If I am being unclear, please say so.
EDIT: One javascript that has this effect can be found here http://www.frequency-decoder.com/demo/table-sort-revisited/js/paginate.js but others do so as well :(
EDIT: Changed ID-names. Still doesn't work.
One thing is you can not have ids that begin with a number. So your radio buttons should be something like rad1, rad2, etc.
If the radio has disabled="true" then the value will not be present in the request so you could check for that.