Getting input values from text box - javascript

I'm trying to get the text from a text box.
I have 2 input text boxes that are not in a form, and I'm trying to retrieve the value and store it in a variable.
This code returns undefined in the alert box that pops up.
<script>
var userPass = document.getElementById('pass');
var userName = document.getElementById('fName');
function submit(){
alert(userPass.value);
}
</script>
When I run it with userName.value as a parameter in the alert function, it will work and display what ever you type in the box.
Here is the html:
<table id="login">
<tr>
<td><label>User Name</label></td>
</tr>
<tr>
<td colspan="2"><input class="textBox" id="fName" type="text" maxlength="30" required/></td>
</tr>
<tr>
<td id="pass"><label>Password</label></td>
<tr>
<td colspan="2"><input class="textBox" id="pass" type="text" maxlength="30" required/></td>
</tr>
<tr>
<td><input type="button" class="loginButtons" value="Login" onclick="submit();"/>&nbsp&nbsp&nbsp
<input type="button" class="loginButtons" value="Cancel"/></td>
</table>

You will notice you have no value attr in the input tags.
Also, although not shown, make sure the Javascript is run after the html is in place.

<script>
function submit(){
var userPass = document.getElementById('pass');
var userName = document.getElementById('user');
alert(user.value);
alert(pass.value);
}
</script>
<input type="text" id="user" />
<input type="text" id="pass" />
<button onclick="submit();" href="javascript:;">Submit</button>

// NOTE: Using "this.pass" and "this.name" will create a global variable even though it is inside the function, so be weary of your naming convention
function submit()
{
var userPass = document.getElementById("pass").value;
var userName = document.getElementById("user").value;
this.pass = userPass;
this.name = userName;
alert("whatever you want to display");
}

you have multiple elements with the same id. That is a big no-no. Make sure your inputs have unique ids.
<td id="pass"><label>Password</label></td>
<tr>
<td colspan="2"><input class="textBox" id="pass" type="text" maxlength="30" required/></td>
</tr>
see, both the td and the input share the id value pass.

Remove the id="pass" off the td element. Right now the js will get the td element instead of the input hence the value is undefined.

Javascript document.getElementById("<%=contrilid.ClientID%>").value; or using jquery
$("#<%= txt_iplength.ClientID %>").val();

This is the sample code for the email and javascript.
params = getParams();
subject = "ULM Query of: ";
subject += unescape(params["FormsEditField3"]);
content = "Email: ";
content += unescape(params["FormsMultiLine2"]);
content += " Query: ";
content += unescape(params["FormsMultiLine4"]);
var email = "ni#gmail.com";
document.write('SUBMIT QUERY');

Related

.value not working in for forms javascript

When I use the form element I get an error saying that it can't set the properties to undefined.
html:
<form name="regForm">
<table>
<tr> <!-- First Name -->
<td>
<input id="firstName" type="text" placeholder="First Name">
</td>
</tr>
<tr> <!-- Error Box -->
<td>
<p id="returnOutput"></p>
</td>
</tr>
<tr> <!-- Submit button -->
<td>
<button type="button" onclick="validateForm()">Sign Up</button>
</td>
</tr>
</table>
</form>
Javascript:
function validateForm() {
var firstName = regForm.firstName.value;
regForm.returnOutput.value = firstName;
}
This is for an assessment so it needs to be done this way otherwise I would be using document.getElementById().value
Welcome to StackOverflow!
regForm is undefined; you need to define it first.
Just a tip: use const for values that won't change, it's good practise!
function validateForm() {
// SELECT regForm by it's name. It doesn't have an ID, so we have to select it by name. However, if it did have an ID, we can use it. 0 is just to select the first element it finds since getElementsByName returns a node list
const regForm = document.getElementsByName("regForm")[0]
// Declare firstName as the firstname.value
const firstName = regForm.firstName.value;
// Finally, append it to body :)
document.getElementById("returnOutput").innerHTML = firstName;
}
Hope this helped :)

JavaScript "Live" form validation

I am trying to get an alert whenever a user clicks on the username or password input field and exits it without entering. However, I am able to get this to work after using "onblur" instead of "onfocus" (Thanks to Gurvinder's answer below). Now, the alert seems to work for both the fields when I click outside of the form using "onfocus". However, when I use tab key to get to password field from username field to password field, the "passwordCheck" function keeps running. Please help.
<!DOCTYPE html>
<html>
<head>
<title>Javascript exercises</title>
<meta charset="UTF-8">
</head>
<body>
<form name="myForm" >
<table>
<tr>
<td>Username:</td>
<td><input name="username" id="userName" type="text" onfocus="userNameCheck();"></input></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" id ="password" type="password" onfocus="passwordCheck();"></input></td>
</tr>
<tr>
<td></td>
<td><input type="Button" value="Submit"></input></td>
</tr>
</table>
</form>
<script>
//User name field validator - Alert a message for empty input fields
var userNameCheck = function() {
if(document.myForm.username.value == ""){
alert("User Name cannot be blank");
}
else{
return false;
}
}
//password field validator - Alert a message for empty input fields
var passwordCheck = function() {
if(document.myForm.password.value == ""){
alert("Password cannot be blank");
}
else{
return false;
}
}
</script>
</body>
</html>
I want the username input to show an alert if the user clicks on it
and tabs to the next field without entering any data.
If you are using focus event to check for the input validity, then unless value is pre-populated, alert will keep coming.
Use blur event, onblur instead of onfocus.
<td><input name="username" id="userName" type="text" onblur="userNameCheck();"></input></td>
Demo
<body>
<form name="myForm">
<table>
<tr>
<td>Username:</td>
<td><input name="username" id="userName" type="text" onblur="userNameCheck();"></input>
</td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" id="password" type="password"></input>
</td>
</tr>
<tr>
<td></td>
<td><input type="Button" value="Submit"></input>
</td>
</tr>
</table>
</form>
<script>
//User name field validator - Alert a message for empty input fields
var userNameCheck = function() {
if (document.myForm.username.length >= 1) {
//Nothing happens
} else {
alert("User Name cannot be blank");
return false;
}
}
</script>
</body>
Why not create your own 'alert' div for more control (and better user experience).
$("input").focus(function(){
var x = document.forms["myForm"]["password"].value;
if (x == "") {
/*alert("Password cannot be blank");*/
$('.alert').show();
return false;
}
});
And to specify tab key scenario, try:
function checkTabPress(key_val) {
if (event.keyCode == 9) {
$('.alert').hide();
}
}

Clone a Textarea Field with its Value using Javascript

I have the code below, ready without errors. My problem is that, when you type a value in the TEXTAREA field the value does not copy itself along the clones in spite of what happens with the INPUT field. Try it your self below.
Thanks
//JAVASCRIPT PART
function insRow(row)
{
i=row.parentNode.parentNode.rowIndex;
var x=document.getElementById('myTable');
var new_row = x.rows[i].cloneNode(true);
x.rows[i].parentNode.insertBefore(new_row, x.rows[i].nextSibling);
}
<table id="myTable">
<tr>
<td><input size=10 type="text" name="myInput[]" value = ""/></td>
<td><textarea name="myTextArea[]" type="text" cols="10" rows="5" type="text" ></textarea></td>
<td><input type="button" id="addInv" value="Add" onclick="insRow(this)"/></td>
</tr>
<table>
wellll did you try adding it..
var x=document.getElementById('myTable');
var val = x.getElementsByTagName('textarea')[0].value;
var new_row = x.rows[i].cloneNode(true);
new_row.getElementsByTagName('textarea')[0].value = val;
x.rows[i].parentNode.insertBefore(new_row, x.rows[i].nextSibling);

Checking that at least one textarea is filled

I need help with adding a controll that checks that atleast one on the textareas is filled so that people wouldnt save blank forms. so it should controll that at least on element is checked and filled, otherwise it should give an error and wouldnt save. If anyone would have an idea how to do so, I would greatly appreciate it. The code that Im working with is down below (actually have more textareas but they are the same only with another names).
<tr>
<td valign="top" style='width: 300px;'>Family members help</td>
<%
elemText = xml.getElementFromXPath("//nursing_care/family_help/tekst");
%>
<td valign="top"><input <%=(elemText==null?"checked=\"checked\"":"") %> value="0" onclick="javascript:showText(this);" name="//nursing_care/family_help" type="radio" checked="checked">Valimata
<input <%=(elemText!=null?"checked=\"checked\"":"") %> value="1" onclick="javascript:showText(this);" name="//nursing_care/family_help" type="radio">Määratud</td>
<td>
<textarea style='width: 350px' style="display:<%=(elemText==null?"none":"block") %>" id="//nursing_care/family_help/tekst" name="//nursing_care/family_help/tekst"><%=(elemText!=null?elemText.getText():"") %></textarea>
</td>
<td><input style="display:<%=(elemText==null?"none":"block") %>" type="text" class="txt_left" id="//nursing_care/family_help/date" name="//nursing_care/family_help/date" value="<%=xml.getText("//nursing_care/family_help/date")%>" maxlength="10" size="10"
onchange="gnlDateValid(this,event); if(event.returnValue != false);" onfocus="gnlGotFocus(getCurrentDate(),this); inputChanged(this);" onkeydown="gnlKeyDown('00.00.0000',this,event);" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><input type="submit" class="button_save button" value="Salvesta" />
<input type="button" class="button" value="Sulge" onclick="window.close()" /></td>
</tr>
</tfoot>
And here is the function that shows/hides the textareas (just in case)
function showText(obj){
var elements = document.getElementsByName(obj.name);
var element = getNode(obj.name + "/tekst");
if (elements[0].checked)
element.style.display="none";
else
element.style.display="block";
var element = getNode(obj.name + "/date");
if (elements[0].checked)
element.style.display="none";
else
element.style.display="block";
}
Something like this should work.
Extend the submit button like this.
<input type="submit" class="button_save button" value="Salvesta" onclick="return submitCheck()"/>
and implement this function in your javascript file.
function submitCheck(){
var form = document.forms[0];
var textareas = form.getElementsByTagName("textarea");
for(var textarea in textareas){
if(textarea.value !== ""){
return true;
}
}
return false;
}
BTW i would recommend you to use jQuery when working with the HTML DOM ;-)

How do I validate radiobuttons using a javascript function?

I have a computing assignment to do.
I've done most I'm just stuck on this task:
"Add a set of radio buttons to the form to accept a level of entry such as
GCSE, AS or A2. Write a function that displays the level of entry to the user
in an alert box so that the level can be confirmed or rejected."
I have done the Radio Buttons I just don't know how to do the second part with the Alertbox and function.
So far my code looks like this:
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
result = false;
}
if (document.ExamEntry.examno.value == "") {
msg += "You must enter your Examination Number \n";
document.ExamEntry.examno.focus();
document.getElementById('examinationno').style.color = "red";
result = false;
}
if (msg=="") {
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<! Main HTML content begins >
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr></tr>
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examinationno">Examination Number</td>
<td><input type="text" name="examno" maxlength="4" /></td>
</tr>
<tr>
<td><input type="radio" name="Level" value="GCSE">GCSE</td>
</tr>
<tr>
<td><input type="radio" name="Level" value="AS">AS</td>
</tr>
<tr>
<td><input type="radio" name="Level" value="A2">A2</td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onClick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
All you have to do is add the value of the radio button to the message like this:
msg += "Level of Entry: "+document.ExamEntry.Level.value;
Here is a fiddle demo you can try
EDIT #1: Though it has been said to use an alert box, that wouldn't actually allow the user to confirm or reject, for that, you could use confirm instead:
if (confirm("Click OK to confirm your Level of Entry or Cancel if you would like to correct it"))
return true;
else
return false;
In my example, I added it only in case the rest of the form validation was successful: http://jsfiddle.net/Qd8sk/2/
EDIT #2: Following our conversation, I updated the jsfiddle you created. It is much more simple than what you provided.
Here is yours: http://jsfiddle.net/Kjxmn/
Here is mine: http://jsfiddle.net/Kjxmn/2/
Several things I changed:
-1. Added return in front of the function name in onchange - looks like otherwise it would still submit even on return false.
-2. Corrected the form name that you called radioform this time, not Exam Entry.
-3. Got rid of the slightly cumbersome check of the selected value using if (document.radioform.level.value == '') instead.
-4. Added the confirm check.
EDIT #3: Looks like firefox doesn't like the usage of document.ExamEntry.Level.value for radio buttons, so instead I created a quick workaround that would loop through the elements of document.ExamEntry.Level and find the one that is 'selected' ('checked' actually - even though it's a radio button, the js code is still called 'checked').
Have a look at the updated fiddle: http://jsfiddle.net/Qd8sk/3/
function confirm () {
var alerttxt = "Are you sure you want to choose",
value = document.ExamEntry.name.value;
alerttxt += value;
alert(alerttxt);
}
The value variable holds the value the user chose in the radio button, you just want to append that to a message you make up and display that whole txt in an alert

Categories

Resources