So I have this pizza order form, and for the topping section, I want multiple selections to be able to be checked. For example, a user can check pepperoni, sausage, olives, etc. But if the user selects "No Toppings", I want it to clear the rest of the checkboxes. I tried writing some JavaScript to do it, but it was unstable and it only worked onClick. So basically, I don't want users to be able to select "No Toppings", I want nothing else to be selected, and when users select a different topping, I don't want "No Toppings" to be selected. I hope this makes sense! Any help is appreciated! Here is my code so far:
<script type="text/javascript">
function unCheck(el, n){
el.form.elements[n].checked = false;
}
</script>
<table>
<tr>
<td style="border: none;">
<input name="size" type="radio" value="8.00" id="small"
onclick="this.form.total.value=calculateTotal(this);" />
<label for="small">Small ($8.00)</label>
</td>
<td style="border: none;">
<input type="checkbox" name="topping" id="pepperoni" value="0.50"
onclick="this.form.total.value=calculateTotal(this);"/>
<label for="pepperoni">Pepperoni</label>
<input type="checkbox" name="topping" id="sausage" value="0.50"
onclick="this.form.total.value=calculateTotal(this);" />
<label for="sausage">Sausage</label>
</td>
</tr>
<tr>
<td style="border: none;">
<input name="size" type="radio" value="10.00" id="medium"
onclick="this.form.total.value=calculateTotal(this);" />
<label for="medium">Medium ($10.00)</label>
</td>
<td style="border: none;">
<input type="checkbox" name="topping" id="mushroom" value="0.50"
onclick="this.form.total.value=calculateTotal(this);" />
<label for="mushroom">Mushroom</label>
<input type="checkbox" name="topping" id="olive" value="0.50"
onclick="this.form.total.value=calculateTotal(this);" />
<label for="olive">Olive</label>
</td>
</tr>
<tr>
<td style="border: none;">
<input name="size" type="radio" value="12.00" id="large"
onclick="this.form.total.value=calculateTotal(this);"/>
<label for="large">Large ($12.00)</label>
</td>
<td style="border: none;">
<input type="checkbox" name="Un_CheckAll" value="0.00" id="none"
onclick="unCheck(this, 'pepperoni','sausage', 'mushroom', 'olive'); "/>
<label for="none">No Toppings (Cheese Pizza)</label>
</td>
</tr>
<table>
Utilizing jQuery, this becomes trivial. Check out this sample.
Related
How can I make a server request when the contect of a table cell is changed?
i.e. on a table like this:
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="USA" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
<tr>
<td><input type="text" name="country" value="England" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
<tr>
<td><input type="text" name="country" value="Sweden" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
I tried adding an onchange function
$('.formclass').change(function() {console.log("succes")});
but this only works when every row is it's own form.
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="USA" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="Englang" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="Sweden" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
However this makes the styling really bad.
I just want a table where if on cell is changed it makes a server request with the data of that row. So here the country and radio button value if someone changes the the radio button.
Attach it to inputs instead of form
$('input[type=radio]').change(function() {console.log("succes")});
I am trying to confirm a confirmation box in Javascript for a school project. The confirmation box comes up asking if you want to submit, and I would like to submit programmatically. Here is the HTML for the form:
<form action="https://weekend.lps.wels.net/lpswp/index.php" method="post" id="form_wp_entry" onsubmit="return lpswp_confirm_submission('3,4','Friday,Saturday','Sunday')" style="display: inline;">
<table class="em_table" width="100%" style="margin-bottom: 5px;">
<tbody><tr>
<th align="left" id="lpswp_night_label_title_3">
Friday
</th>
</tr>
<tr>
<td>
Location: <input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_dorm_3" value="dorm" checked="checked" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_dorm_3">Dorm</label> |
<input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_home_3" value="home" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_home_3">Home</label><br>
<input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_other_3" value="other" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_other_3" id="lpswp_night_label_text_3">Other</label>:
<input type="text" size="60" name="lpswp_nights[3][other]" id="lpswp_nights_other_3"><br>
Phone Number (if known): <input type="text" size="20" name="lpswp_nights[3][phone]" id="lpswp_nights_phone_3"> (999-999-9999)
</td>
</tr>
<tr>
<th align="left" id="lpswp_night_label_title_4">
Saturday
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="lpswp_nights[4][same]" id="lpswp_nights_same_4" value="1" checked="checked" onclick="lpswp_toggle_same(4)"> <label for="lpswp_nights_same_%temp_night%">Same as Friday night.</label><br>
Location: <input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_dorm_4" value="dorm" checked="checked" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_dorm_4">Dorm</label> |
<input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_home_4" value="home" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_home_4">Home</label><br>
<input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_other_4" value="other" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_other_4" id="lpswp_night_label_text_4">Other</label>:
<input disabled="disabled" type="text" size="60" name="lpswp_nights[4][other]" id="lpswp_nights_other_4"><br>
Phone Number (if known): <input disabled="disabled" type="text" size="20" name="lpswp_nights[4][phone]" id="lpswp_nights_phone_4"> (999-999-9999)
</td>
</tr>
<tr>
<th align="left" id="lpswp_final_dinner_label_title">
Sunday Dinner
</th>
</tr>
<tr>
<td id="lpswp_final_dinner_label_text" style="border: 0px;">
I WILL be eating in the cafeteria: <input type="radio" name="lpswp_final_dinner" id="lpswp_final_dinner_1" value="1"><br>
I will NOT be eating in the cafeteria: <input type="radio" name="lpswp_final_dinner" id="lpswp_final_dinner_0" value="0"><br>
<input type="hidden" name="lpswp_final_dinner_night" value="5">
</td>
</tr>
</tbody></table>
<input type="submit" value="Submit Weekend Plans">
<!--input type="reset" value="Cancel" /-->
</form>
Here is my current code that does not do anything to the confirmation box:
mWebView.loadUrl("javascript:(function(){" +
"document.getElementById('form_wp_entry').setAttribute('onsubmit','return true;');" +
";})()");
Please help me, I am new to javascript... and coding in general.
You're looking for .submit().Note that this won't trigger any functionality that's hooked up to the onsubmit of the form:
function output() {
console.log('Submitted');
return false;
}
// Forcibly submit the form
function customSubmit() {
document.getElementsByTagName('form')[0].submit();
}
<form name="a_form" onsubmit="return output()">
<button type="submit">Submit</button>
</form>
<br />
<button onclick="customSubmit()">Submit Programmatically</button>
Hope this helps!
I'm trying to use/adapt an existing script to show/hide a hierarchical series of radio buttons, based on selection. Please see the code below. The problem is that the 2nd-level radio button disappears when a selection is made for the 3rd-level radio button. It seems that the culprit is, $(".opthide").not(targetBox).hide(); but I'm unsure how to restrict hiding to related elements.
$(document).ready(function() {
$('input[name="insv_sts5"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts6"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts9"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>
welcome to SO,
Here are my 2 cents.
I made loop go through all radio buttons on click and act appropriately if the button is checked it shows target element, if it is not it clears checks on lower-level buttons and hide the element, this is needed to prevent elements showing even if a user changes mind and change some top-level checkbox.
Hope it helps, if you would have any questions or anyone would have different approach let me know.
Final would look like this.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('input[type="radio"]').each(function () {
//iterate through all radio buttons
var $target = $(this).val() //get target class from value
if ($(this).prop('checked')) { //check if radio box is checked
$('.' + $target).show() //show target tr
} else {
//hide target tr and uncheck all radio buttons in child element
$('.' + $target).hide().find('input[type="radio"]').prop('checked', false);
}
})
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>
I have six columns with six checkboxes (or radio).
My intention is, that only one checkbox can be selected in the same row and the same column.
For example:
When I select the checkbox in column4 and row3', every checkbox in row3 and column4 have to be unselected immediately.
I tried it with radio buttons, but I simply can´t do it, because every single radio always to be in two different groups.
Edit:
My HTML Code:
<div style="position:absolute; left: 20px; top: 20px" class="checkcolumn2" >
<input type="checkbox" ID="column1row1">column1row1<br>
<input type="checkbox" ID="column1row2">column1row2<br>
<input type="checkbox" ID="column1row3">column1row3<br>
<input type="checkbox" ID="column1row4">column1row4<br>
<input type="checkbox" ID="column1row5">column1row5<br>
<input type="checkbox" ID="column1row6">column1row6<br>
</div>
<div style="position:absolute; left: 200px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column2row1">column2row1<br>
<input type="checkbox" ID="column2row2">column2row2<br>
<input type="checkbox" ID="column2row3">column2row3<br>
<input type="checkbox" ID="column2row4">column2row4<br>
<input type="checkbox" ID="column2row5">column2row5<br>
<input type="checkbox" ID="column2row6">column2row6<br>
</div>
<div style="position:absolute; left: 380px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column3row1">column3row1<br>
<input type="checkbox" ID="column3row2">column3row2<br>
<input type="checkbox" ID="column3row3">column3row3<br>
<input type="checkbox" ID="column3row4">column3row4<br>
<input type="checkbox" ID="column3row5">column3row5<br>
<input type="checkbox" ID="column3row6">column3row6<br>
</div>
<div style="position:absolute; left: 560px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column4row1">column4row1<br>
<input type="checkbox" ID="column4row2">column4row2<br>
<input type="checkbox" ID="column4row3">column4row3<br>
<input type="checkbox" ID="column4row4">column4row4<br>
<input type="checkbox" ID="column4row5">column4row5<br>
<input type="checkbox" ID="column4row6">column4row6<br>
</div>
<div style="position:absolute; left: 740px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column5row1">column5row1<br>
<input type="checkbox" ID="column5row2">column5row2<br>
<input type="checkbox" ID="column5row3">column5row3<br>
<input type="checkbox" ID="column5row4">column5row4<br>
<input type="checkbox" ID="column5row5">column5row5<br>
<input type="checkbox" ID="column5row6">column5row6<br>
</div>
<div style="position:absolute; left: 920px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column6row1">column6row1<br>
<input type="checkbox" ID="column6row2">column6row2<br>
<input type="checkbox" ID="column6row3">column6row3<br>
<input type="checkbox" ID="column6row4">column6row4<br>
<input type="checkbox" ID="column6row5">column6row5<br>
<input type="checkbox" ID="column6row6">column6row6<br>
</div>
It depends on the markup. Here's a simple example:
html
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
jquery
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
Here's a fiddle
Here's another example using classes
I'm not sure if this is the best possible solution, but I think it does what you want.
$(":radio").change(function() {
// find column
var tdColumn = $(this).closest("td");
// find row
var trRow = tdColumn.closest("tr");
// uncheck all radios in current row, except the selected radio
trRow.find(":radio").not($(this)).prop("checked",false);
// index of current column
var i = tdColumn.index();
// uncheck all radios in current column, except the selected radio
trRow.siblings("tr").each(function(key, value) { $(value).find(":radio")[i].checked = false; } );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<table>
I created it by 3 columns and 5 rows BUT it works for N cols and M rows... just increase td and tr tags...
Try this...
Also you can test it live here ;)
Result
.....................................................................................................................................
jQuery:
$(document).ready(function(){
var $table = $('#MyTable');
var $rowCount = $table.find('tr').length;
var $colCount = $($table.find('tr')[0]).find('td').length;
console.log($rowCount);
console.log($colCount);
$table.find('tr').each(function(i, e){
$tr=$(e);
console.log($tr);
});
});
$(".chBox").click(function() {
console.log('clicked');
$this=$(this);
$row=$this.parent().parent();
$table=$this.closest('table');
$row.find('.chBox').each(function(i, e){
$checkbox=$(e);
$checkbox.prop('checked',false);
console.log($checkbox);
});
$this.prop('checked',true);
var col = $this.parent().parent().children().index($this.parent());
var row = $this.parent().parent().parent().children().index($this.parent().parent());
console.log(col);
console.log(row);
$table.find('tr').each(function(i, e){
$tr=$(e);
$tr.find('.chBox').each(function(k,ex){
$chBox=$(this);
if(k==col && i!=row)
$chBox.prop('checked',false);
});
});
});
HTML:
<table id="MyTable">
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
</table>
Select only one checkbox/radiobutton in the same row and column with Angular 7 and JavaScript
The Idea behind this is that with radio button we have name property which makes single select either by row or column but for both row and column. I placed the row in name and handled column with javascript whenever button will click.
This is HTML CODE
<section class="editor">
<strong>Editor</strong>
<div>
<label>Add option</label>
<button (click)="addOption()">+</button>
<div *ngFor="let option of options;let i = index">
<span>{{option.title +(i+1)}}</span><button (click)="deleteOption(i)"
*ngIf="options.length>2">X</button>
</div>
</div>
</section>
<hr>
<section>
<strong>Builder</strong>
<div class="builder">
<label>Question title goes here</label><br>
<div *ngFor="let option of options;let row_index = index">
<span>{{option.title +(row_index+1)}}</span>
<span *ngFor="let rank of options;let column_index=index">
<input type="radio" name="{{row_index}}" class="{{column_index}}"
(click)="check(column_index,$event)">
</span>
</div>
</div>
</section>
And this is my .ts file code where I Implemented with Javascript
export class AppComponent {
options = [{
title: "option",
rank: 0,
}, {
title: "option",
rank: 0
}]
constructor() {
}
ngOnInit(): void { }
addOption() {
this.options.push({
title: "option",
rank: 0
})
}
deleteOption(i) {
this.options.splice(i, 1);
}
check(column_index, event) {
Array.from(document.getElementsByClassName(column_index)).map(x=>x['checked']=false);
event.target.checked=true;
}
}
I have a multiple choice questionnaire with five questions on my html page. Each question uses radio buttons for user to select one of five answers. I want to check that the user has selected one of those five radio buttons before allowing them to go to another page. A PHP page sends the answer to my database. If the user misses checking one of the answers, none of the answers go into the database.
I think I'm looking for some java script that will loop through each of the possible five answers to check at the form submit whether the user has checked one radio button before allowing them to proceed to the next page. Thanks for your help.
My html code for just two of the questions looks like this:
<tr> <td> Question 1. </td>
<td align="center"> <input type="radio" name="q1" value="0" /></td>
<td align="center"> <input type="radio" name="q1" value="1" /> </td>
<td align="center"> <input type="radio" name="q1" value="2" /> </td>
<td align="center"> <input type="radio" name="q1" value="3" /> </td>
<td align="center"> <input type ="radio" name="q1" value="4" /> </td>
</tr>
<tr> <td> Question 2. </td>
<td align="center"><input type="radio" name="q2" value="0"/></td>
<td align="center"> <input type="radio" name="q2" value="1"/> </td>
<td align="center"> <input type="radio" name="q2" value="2"/> </td>
<td align="center"> <input type="radio" name="q2" value="3"/> </td>
<td align="center"> <input type ="radio" name="q2" value= "4"/> </td> </tr>
Consider the following example..And do the changes in your code.....
You can call a js function(using onsubmit()). Like this
<form id="ID" method="post" action="servletName" onSubmit="return validateOption()">
<input type=radio name=r1 value="1" >A</input>
<input type=radio name=r1 value="2">B</input>
<input type="submit" value="Submit"><span id="error" style="display:none;"></span>
</form>
Your script goes here to validate whether option selected or not,Submission of page is possible only if onsubmit=true ie if validateOption() returns true.
<script>
function validateOption()
{
var group=document.getElementsByName("r1");
for ( var i = 0; i < group.length; i++)
{
if (group[i].checked)
return true;
}
// else you can show error message like this
document.getElementById("error").innerHTML="Please enter your choice";
return false;
}
</script>