i have designed page
that contains 60 questions and each question have 5 radio button.
i want to validate all of question; in other mean all of them had to answer.
and if one of them is not answered tell the number of it yo the user.
how i can validate it with javascript
here is some example of code
<div >
<tr id="trr1" onmouseover="changecolor('tr1','trr1')" onmouseout="backcolor('tr1','trr1')" >
<td colspan="5">1. question 1</td>
</tr>
<tr id="tr1" onmouseover="changecolor('tr1','trr1')" onmouseout="backcolor('tr1','trr1')">
<td>totaly agree <input id="s1" name="s1" type="radio" value="2" /></td>
<td>agree <input id="s1" name="s1" type="radio" value="1" /></td>
<td>none <input id="s1" name="s1" type="radio" value="0" /></td>
<td>dis-agree <input id="s1" name="s1" type="radio" value="-1" /></td>
<td>totaly dis-agree <input id="s1" name="s1" type="radio" value="-2" /></td>
</tr>
<tr id="trr2" onmouseover="changecolor('tr2','trr2')" onmouseout="backcolor('tr2','trr2')" >
<td colspan="5">2. question 2</td>
</tr>
<tr id="tr2" onmouseover="changecolor('tr2','trr2')" onmouseout="backcolor('tr2','trr2')">
<td>totaly agree <input id="s2" name="s2" type="radio" value="2" /></td>
<td>agree <input id="s2" name="s2" type="radio" value="1" /></td>
<td>none <input id="s2" name="s2" type="radio" value="0" /></td>
<td>dis-agree<input id="s2" name="s2" type="radio" value="-1" /></td>
<td>totaly dis-agree <input id="s2" name="s2" type="radio" value="-2" /></td>
</tr>
</div>
Consider adding jQuery and using the jQuery validation plugin. It's a much more convenient way to deal with this type of tasks. Forcing to choose one option will be as simple as:
radioGroup: {required :true}
Overriding message with error to inform user about not picking anything:
jQuery.extend(jQuery.validator.messages, {
required: "This field is required."
});
Related
I am new to angularjs. I want to update set of roles for one user I have add my code and schema, below this code i cannot able to get object what i like please review the below code.
HTML :
<section class="surround" style="overflow-y:scroll;min-height: 600px;">
<form name="userrole" ng-submit="addRoles();" novalidate>
<div class="row">
<div class="col-xs-4">
<div class="row form-group">
<div class="col-xs-offset-5">
<h4>Create User</h4>
</div>
</div>
<div class="row form-group" ng-class="{ 'has-error': submitted && branchForm.name.$error.required }">
<div class="col-xs-5 form-label">
<label>Roles name</label>
</div>
<div class="col-xs-6 control">
<input type="text" class="form-control" ng-model="roles.rolename" name="rolename" required="" />
</div>
</div>
<div class="row form-group">
<div class="col-xs-5 form-label">
<label>Status</label>
</div>
<div class="col-xs-6 control">
<select class="form-control" ng-model="roles.status" name="status">
<option value="1">Active</option>
<option value="0">Deleted</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10">
<div class="branch-table">
<table class="table table-bordered">
<colgroup>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr>
<th>Transaction</th>
<th>No Access</th>
<th>Read Only</th>
<th>Read/Write</th>
<th>Full</th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction.name">Accounting</label></td>
<td><input type="radio" name="group1" ng-model="roles.transaction.access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction.access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction.access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction.access.full" data-ng-value="true" /></td>
</tr>
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction.name">Property</label></td>
<td><input type="radio" name="group2" ng-model="roles.transaction.access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction.access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction.access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction.access.full" data-ng-value="true" /></td>
</tr>
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction.name">Contact</label></td>
<td><input type="radio" name="group3" ng-model="roles.transaction.access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction.access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction.access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction.access.full" data-ng-value="true" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 form-group">
<div class="pull-left">
<button type="submit" class="btn btn-sm btn-primary">Save</button>
<button ng-click="cancel()" class="btn btn-sm btn-default">Cancel</button>
</div>
</div>
</div>
</form>
</section>
When click on save I am getting object like this,
{
"rolesname": "superadmin",
"status": 1,
"transaction": [
{
"name": "property",
"access": {
"noaccess": "true",
}
}
]
}
I am getting only one object at a time.
i want to get object like this,
Object Data:
{
"_id": "ROLE01",
"description": "superadmin",
"status": "active",
"transaction": [
{
"name": "property",
"access": {
"read_permit": "true"
}
},
{
"name": "property",
"access": {
"read_permit": "true"
}
}
{
"name": "property",
"access": {
"read_permit": "true"
}
}
]
}
I am not getting that transaction as three object. How to achive this in angular, I don't know where i am doing worng. Thanks in advances.
You bind the same properties on the same object. In your example, transaction is an object, not an array. Group1 values are overridden by group2 values then by group3 values.
This solves your issue:
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction[0].name">Accounting</label></td>
<td><input type="radio" name="group1" ng-model="roles.transaction[0].access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction[0].access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction[0].access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction[0].access.full" data-ng-value="true" /></td>
</tr>
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction[1].name">Property</label></td>
<td><input type="radio" name="group2" ng-model="roles.transaction[1].access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction[1].access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction[1].access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction[1].access.full" data-ng-value="true" /></td>
</tr>
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction[2].name">Contact</label></td>
<td><input type="radio" name="group3" ng-model="roles.transaction[2].access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction[2].access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction[2].access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction[2].access.full" data-ng-value="true" /></td>
</tr>
I have an assignment where I should be validating forms both when the value of the form changes, as well as on submit. The functions themselves I have been allowed to obtain from the internet, provided I cite the source. My issue is that it's not working? I've tested it in a browser and am not getting corrected for anything, regardless of the amount of gibberish I provide. I thought I understood the concept, but it's just not working? Here is my code:
<form name="usercomments" method="post" action="cgi-bin/form-mail2.pl"
onsubmit="return validateForm();"strong text>
<table class="usercomments">
<tbody>
<tr>
<td><label for="realname">Name:</label></td>
<td><input id="realname" align="left" size="50" name="realname"
onchange="validateRealname(this, 'realnameguide');"></input></td>
<td id="realnameguide">Please use proper case when entering your name.</td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input id="email" size="50" name="email" onchange="validateEmail(this, 'emailguide');"></input></td>
<td id="emailguide">Please use the format: ernest#craft.com</td>
</tr>
<tr>
<td><label for="message">Comments:</label></td>
<td><textarea id="message" name="message" rows="15" cols="50"
onchange="return validateForm(this, 'commentsguide');"></textarea></td>
<td id="commentsguide">Please provide your comments regarding the website
in the space provided below.</td>
</tr>
<tr>
<td><label for="rating">How would you rate this website?</label></td>
<td>
<p> 1=Fantastic!
2=It's Good!
3=It's Average.
4=It's Bad.
5=It's Terrible! </p>
<p style="word-spacing: 2.5em">
<input type="radio" value="1" name="rating"></input> 1
<input type="radio" value="2" name="rating"></input> 2
<input type="radio" value="3" name="rating"></input> 3
<input type="radio" value="4" name="rating"></input> 4
<input type="radio" value="5" name="rating"></input> 5
</p>
</td>
</tr>
<tr>
<td><label for="phone"> Phone Number:</label></td>
<td><input type="tel" name="phonenumber" id="phonenumber" onchange="return validatePhone(this, 'phoneinfo');">
</input></td>
<td id="phoneinfo">999-999-9999</td>
</tr>
<tr>
<td><label for="bday">Birthday:</label> </td>
<td><input id="bday" name="bday" onchange="return validateBday(this, 'bdayguide');"></input></td>
<td id="bdayguide">07/17/2014</td></tr>
<tr>
<td><input type="submit" value="Submit"></input></td>
</tr>
</tbody>
</table>
</form>
It looks as though you only have half of the assignment done at the moment. You will need to write the javascript functions you have reference, for example validateRealname.
You should do this in a separate javascript file and import it using <script> tags.
You also need to change the radio buttons from:
<input type="radio" value="1" name="rating"></input> 1
to:
<input type="radio" value="1" name="rating">1</input>
Once you've written those functions and imported them, you should be good to go.
I have following code in HTML tag
<table>
<tr>
<td>
<input type="radio" name="s1" value="1" checked/>
<input type="radio" name="s1" value="0"/>
</td>
</tr>
<tr>
<td>
<input type="radio" name="s2" value="1"/>
<input type="radio" name="s2" value="0" checked/>
</td>
</tr>
</table>
How to get each checked value from every row in a table using JQuery/Javascript and store it into an array.
For Example: In above case I should get 1,0
Use this way
var array = [];
$('input:checked').each(function(){
array.push($(this).val());
});
<form name="quest" onsubmit="return validate();">
<table width="100%" border="1">
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td width="98">Response Type<font color="#CC0000">*</font></td>
<td>
<input type="radio" value="1" name="R1" onClick="showresponse(1)">
True/False
<input type="radio" value="2" name="R1" onclick="showresponse(2)">Single
Best Answer
<input type="radio" value="3" name="R1" onclick="showresponse(3)">Multiple
Answers</td>
</tr>
<tr>
<td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
<td>
<table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
<tr>
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="1" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb2" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="2" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="3" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb4" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="4" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb5" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="5" name="R3">
Answer</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
I want to validate to that a person can enter min 3 responses(Add response) and max 5 responses. once enter the response only allow to select the answer(radio button). pls anbody help me . thanks in advance
You can try this solution below.
Note that a full working example can be found at the end of this post.
Set the method method attribute of your <form> to GET or POST, and define its method attribute (= which specifies where to send the form's data)
Add an ID to each of your "Answer" checkboxes. You can provide them the following IDs, respectively: R1, R2, R3, R4, and R5. Provide different names to each input.
Disable your "Answer" checkboxes by adding the attribute disabled. Since you only want the responses to check / uncheck the checkboxes, we want to prevent the users from doing it.
Eg:
<input type="radio" value="1" name="R1" id="R1" disabled>
Add an the following events to each of your "Answer" text inputs:
onkeyup="toggle_checkbox(this, i);", where i should be the index related to the ID of the checkbox concerned (check the example below). The toggle_checkbox function is called every time we type something inside an "Answer" textbox, and checks, or unchecks, the checkbox associated to the text input we're typing in, depending on the latter's content:
if the content of the texbox is empty, the function unchecks the checkbox,
else, it checks it.
ondragstart="return false" which prevents to copy the content from a given textbox to another.
Eg:
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
<td>
<input type="radio" value="1" name="R1" id="R1" disabled>
Answer
</td>
In the example above, i is equal to 1, which is related to the concerned checkbox's ID R1.
In your <head>, add the following JS functions:
function toggle_checkbox(el, index) {
var val = el.value;
if(val!="") {
document.getElementById("R"+index).checked = "checked";
}
else {
document.getElementById("R"+index).checked = "";
}
}
function validate() {
var isok = false;
var nb_checked = 0;
for(var i =1; i<6; i++) {
var el = document.getElementById("R"+i);
if(el.checked) {
nb_checked++;
}
}
if(nb_checked < 3) {
alert("Enter at least 3 responses!");
}
else {
isok = true;
}
return isok;
}
As you can see, there are two functions: one is toggle_checkbox and the other is validate.
As explained a little bit previously, the function toggle_checkbox is called every time we type something inside an "Answer" textbox. This checks / unchecks the associated checkbox according to whether the content of the corresponding textbox is empty or not.
The function validate is called when we submit the form. It counts the number of "Answer" checkboxes which are checked with the variable nb_checked. If this number is lower than 3, then we alert the message Enter at least 3 responses!. Otherwise, we set the output variable isok to true, which will allow the form to be processed and sent to the link provided in the action attribute of the <form>
Full working example:
<!DOCTYPE html>
<html>
<head>
<script>
function toggle_checkbox(el, index) {
var val = el.value;
if(val!="")
document.getElementById("R"+index).checked = "checked";
else document.getElementById("R"+index).checked = "";
}
function validate() {
var isok = false;
var nb_checked = 0;
for(var i =1; i<6; i++) {
var el = document.getElementById("R"+i);
if(el.checked)
nb_checked++;
}
if(nb_checked < 3) alert("Enter at least 3 responses!");
else
isok = true;
return isok;
}
</script>
<head>
<body>
<form onsubmit="return validate();" method="post" action="http://www.google.com">
<table width="100%" border="1">
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td width="98">Response Type<font color="#CC0000">*</font></td>
<td>
<input type="radio" value="1" name="Ra" onClick="showresponse(1)">
True/False
<input type="radio" value="2" name="Rb" onclick="showresponse(2)">Single
Best Answer
<input type="radio" value="3" name="Rc" onclick="showresponse(3)">Multiple
Answers</td>
</tr>
<td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
<td>
<table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
<tr>
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
<td>
<input type="radio" value="1" name="R1" id="R1" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb2" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 2);" ondragstart="return false"></td>
<td>
<input type="radio" value="2" name="R2" id="R2" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 3);" ondragstart="return false"></td>
<td>
<input type="radio" value="3" name="R3" id="R3" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb4" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 4);" ondragstart="return false"></td>
<td>
<input type="radio" value="4" name="R4" id="R4" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb5" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 5);" ondragstart="return false"></td>
<td>
<input type="radio" value="5" name="R5" id="R5" disabled>
Answer</td>
</tr>
</table>
</td>
</tr>
</table>
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>
PS: Change the action attribute of the form. I set google's url just to let you see the redirection when the form is valid.
Hope this helps. Let me know if you have any questions.
So I am having an issue on my entrepreneur business opportunity rating matrix :
I would like the radio buttons to stay on the same line.
The problem is that I don't know how I should process because if I give a fixed minimum width for the cell, i'm not sure it will display properly on other browsers, and if the cell is to big I loose the alignment of the radio buttons.
Do you guys have a CSS/Javascript (jQuery) trick that would fix this ?
Thank you
That's easy: Just add white-space: nowrap; to your td.
I would redesign the table layout (note this is a quick and dirt solution) to place the buttons below the labels (you save space in smaller window sizes).
<tr class="even">
<td rowspan="2">Customer atlernatives</td>
<td class="col_g left-aligned">A lot</td>
<td class="col_d right-aligned">Few</td>
</tr>
<tr class="even">
<td class="col_m centered">
<form method="post" action="action" class="bz_op_val">
<input type="radio" value="4" name="38">
<input type="radio" value="3" name="38">
<input type="radio" value="2" name="38">
<input type="radio" value="1" name="38">
<input type="radio" value="0" name="38">
</form>
</td>
</tr>
a better solution should be, to me:
<tr class="even">
<td>Customer atlernatives</td>
<td>
<div class="col_g left-aligned">A lot</div>
<div class="col_d right-aligned">Few</div>
<form method="post" action="action" class="bz_op_val cleared-both-centered">
<input type="radio" value="4" name="38">
<input type="radio" value="3" name="38">
<input type="radio" value="2" name="38">
<input type="radio" value="1" name="38">
<input type="radio" value="0" name="38">
</form>
</td>
</tr>