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.
Related
What I have built so far is that I have a form with a few radioButtons and a password field.
Now, I want to activate the password field as soon as the corresponding radioButton is clicked.
That would work so far, if id for all password fields would not be the same.
This is my code so far:
<form action="#" th:action="#{/passwordaenderung}" th:object="${UserCreationDto}" method="post" onsubmit="return checkPassword()">
<fieldset>
<table>
<thead>
<tr>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr th:each="user, itemStat : *{users}">
<td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" id="raidoButtonCheck" onclick="document.getElementById('pwd').removeAttribute('disabled')" /></td>
<td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
<td><input type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" id="pwd" disabled/></td>
</tr>
</tbody>
</table>
<input type="submit" id="submitButton" th:value="Speichern">
</fieldset>
</form>
So, does it look like in my browser:
And so does the interpreted / compiled code look like:
I hope someone can tell me please how do I get a different id for all password fields so that the correct one will be enabled via the
document.getElementById('pwd').removeAttribute('disabled')
You can dynamically set the ids of each input using th:id. You can use the iterator index so that it can be unique. The following code should work.
<tr th:each="user, itemStat : *{users}">
<td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" class="radioButton" th:onclick="${'document.getElementById('''+ itemStat.index +''').removeAttribute(''disabled'')'}" /></td>
<td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
<td><input type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" th:id="${itemStat.index}" disabled/></td>
</tr>
If you want to disable all other inputs, when you click on one of them, then I would recommend adding a class to all inputs and changing your on click for function.
JS
<script>
function inputClick(id) {
var passwordFields = document.getElementsByClassName("passwordField");
for(i = 0; i < passwordFields.length; i++) {
passwordFields[i].disabled = true;
}
document.getElementById(id).removeAttribute('disabled');
}
</script>
HTML
<tr th:each="user, itemStat : *{users}">
<td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" class="radioButton" th:onclick="${'inputClick('''+ itemStat.index +''')'}" /></td>
<td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
<td><input class="passwordField" type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" th:id="${itemStat.index}" disabled/></td>
</tr>
The js can be added somewhere in the head or body or in a external js file.
Adding a placeholder attribute to a text input element seems to negate my autocomplete="off" attribute.
I.e. It restores the annoying banana-yellow drop down that shows prior entries. (And worse still, the drop down seems to get some of it's suggested input from things input in windows the browser opened that are not related to my page. )
More specifically:
This element has NO annoying little banana-yellow drop down w/ prior entries.
<input class="textbox"
type="text"
name="firstname"
value="" autocomplete="off">
But if I add the placeholder attribute, the banana-yellow drop down returns.
<input class="textbox"
type="text"
name="firstname"
value="" autocomplete="off"
placeholder="Enter First Name">
Is it possible to use placeholder without getting that annoying drop down back?
I'm sure enough js code with onblur, onfocus, and maybe onkeypress, could mimic placeholder without the annoying drop down. But I was hoping for a simpler way.
Any suggestions?
Added 10/5/18 -- re: question below about browsers. Today it's gotten worse.
The IE browser consistently honors autocomplete="off" for all the text boxes.
But Chrome has become inconsistent as indicated in the comments added below. The first name, first and second last name, and email text box ignore autocomplete="off". But it honors it for both middle names. And I just can't see any differences in how any of the text boxes are coded.
Here is the complete code for my form. [I put the label/input pairs into a table to line things up. (as an aside that seems to have disconnected them, because clicking on the label doesn't shift focus to its input. But that's for another day)]
<form id="formNo1" onsubmit="sendMessage(); return false;">
<table id="formNo1Table">
<tr>
**<!—This is a <select> element -->**
</tr>
<tr> **<!-- Chrom autocompletes / IE doesn’t -->**
<td>
<label class="label" for="firstname">First Name:</label>
</td>
<td>
<input class="textbox" type="text"
name="firstname" value=""
autocomplete="off" >
</td>
</tr>
<tr> **<!-- Both OK. No autocomplete-->**
<td>
<label class="label" for="middle1st">Middle Name - First:</label>
</td>
<td>
<input class="textbox" type="text"
name="middle1st" value=""
autocomplete="off">
</td>
</tr>
<tr>
**<!—This is a <select> element-->**
</tr>
<tr>
<td> **<!-- Both OK. No autocomplete-->**
<label class="label" for="middle2nd">Second Middle Name - Second</label>
</td>
<td>
<input class="textbox" type="text"
name="middle2nd" value=""
autocomplete="off">
</td>
</tr>
<tr>
<td> **<!-- Chrome autocompletes / IE doesn’t -->**
<label class="label" for="lastname">Last Name:</label>
</td>
<td>
<input class="textbox" type="text"
name="lastname" value=""
autocomplete="off">
</td>
</tr>
<tr>
<!—This is a <select> element
</tr>
<tr>
<td> **<!-- Chrome autocompletes / IE doesn’t -->**
<label class="label" for="lastname2">Second Last Name:</label>
</td>
<td>
<input class="textbox" type="text"
name="lastname2" value=""
autocomplete="off">
</td>
</tr>
<tr>
<!—This is a <select> element
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<!—This is a <select> element
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td> **<!-- Chrome autocompletes / IE doesn’t -->**
<label class="label" for="email">Email:</label>
</td>
<td> <!-- Chrom autocompletes / IE doesn’t -->
<input id="emailId"
class="textboxdim" type="text"
name="email" value=name#dom.ext
autocomplete="off">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<!—This is a text area element
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<input class="label" name="submit button"
type="submit" value="Submit">
</td>
</tr>
</table>
</form>
just place
placeholder=" "
the data onload will not override the label
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."
});
<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.
I have a table of selected products and I would like to use javascript to dynamically calculate certain values for the user without refreshing.
The user sees a number of fields: quantity input box (var t0), unit amount (var amt0), total amount (var ta0), unit weight (var weight0) and total weight (var tw0).
The following code works as I would like. The quantity input by the user is multiplied by the unit amount and set to total amount. The same is done for weight. The zeros refer to the FIRST appearance of a product. The issue is that we don't know how many products the user will select.
We can determine the number of products using arguments.length. My question is, how can I construct a loop to replace the 0 with perhaps the iteration variable i. We need to create the below script to correspond to the number of products selected.
//QTY FIELD
var qtyVal0 = t0.value;
//AMT FIELD
var amtVal0 = amt0.innerHTML;
ta0.value = qtyVal0 * amtVal0;
//WEIGHT FIELD
var weightVal0 = weight0.innerHTML;
tw0.value = qtyVal0 * weightVal0;
I tried using a 'for loop' and var ('qtyVal' + i) as well as var qtyVal + i. Plus every combination in between.
I also tried just duplicating the above working script a dozen times, but it unfortunately doesn't work when the number of duplications is different than the number of products.
Javascript is not my forte by any means, so any help (or a more efficient way to calculate) would be greatly appreciated. Thank you!
PS For all of my love and respect, I will also need to tackle the issue of adding all quantities, amounts, and weights in each of the three vertical columns. I'm not sure if this would affect the way that the calculations are designed. Once again, thank you!
UPDATE
Here is the HTML code for the form displayed to the user. I generate it in another php script and insert it into the page once the user selects from a list of products. It displays 3 products currently, but as mentioned, this can change to any number. Hopefully this is clearer. Do let me know. Cheers.
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td><!--PRODUCTS SELECTED WILL BE DISPLAYED HERE -->
<div id="txtHint">
<table id="products" width="1050" cellpadding="5" border="1">
<tbody>
<tr>
<th>QTY</th>
<th>Product</th>
<th>Unit Cost</th>
<th>Unit Measure</th>
<th>Amount</th>
<th>Total Amount</th>
<th>Weight</th>
<th>Total Weight</th>
<th>LBS / KGS</th>
<th>Rec D</th>
<th>Rec Q</th>
<th>Status</th>
</tr>
<tr>
<td><input name="t0" id="t0" type="text" onkeyup="return autocalc(this,t1,t2)" size="5" maxlength="5" tabindex="$i"></td>
<td>Catalogue</td>
<td>$150</td>
<td>Each</td>
<td><span id="amt0">10</span></td>
<td><input name="ta0" id="ta0" type="text" readonly="readonly" value="10" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight0">101</span></td>
<td><input name="tw0" id="tw0" type="text" readonly="readonly" value="101" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="t1" id="t1" type="text" onkeyup="return autocalc(this,t0,t2)" size="5" maxlength="5" tabindex="$i"></td>
<td>Product2</td>
<td>$18</td>
<td>Each</td>
<td><span id="amt1">15</span></td>
<td><input name="ta1" id="ta1" type="text" readonly="readonly" value="15" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight1">50</span></td>
<td><input name="tw1" id="tw1" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="t2" id="t2" type="text" onkeyup="return autocalc(this,t0,t1)" size="5" maxlength="5" tabindex="$i"></td>
<td>Product3</td>
<td>$236</td>
<td>Each</td>
<td><span id="amt2">1</span></td>
<td><input name="ta2" id="ta2" type="text" readonly="readonly" value="1" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight2">50</span></td>
<td><input name="tw2" id="tw2" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="total" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input name="totalAmount" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td><input name="totalWeight" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div></td>
</tr>
<tr>
<td><input type="submit" id="submitbtn" name="submit" value="Save Changes">
<input type="hidden" name="action" value="create_po"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
If you're dead-set on calculating this from the HTML/DOM itself, you'll need to iterate over the appropriate table rows (consider using jQuery, you'll be glad), pull out the data in question from (what, table cells?), convert it to numbers, and do the math as normal.
There are a number of ways to do this, but it depends a lot on the HTML you're pulling the data from.