I am a beginner at javascript and i am stuck with this piece of code. Syntactically the code seems to have no error but when it is executed there is no output, both in the webpage and the console. Hence I am confused and am unable to understand where the error lies.
function SubMit() {
var userName = document.getElementById("user").value;
document.getElementById("out").innerHTML = userName;
var fName = document.getElementById("firstName").value;
var lName = document.getElementById("lastName").value;
var eMail = document.getElementById("email").value;
var p1 = document.getElementById("pass1").value;
var p2 = document.getElementById("pass2").value;
console.log(userName);
console.log(fName);
console.log(lName);
console.log(eMail);
console.log(p1);
console.log(p2);
}
function click() {
document.getElementById("c").innerHTML = "HELLO WORLD";
console.log("hello world");
}
<form>
<input type="text" placeholder="Username" id="user" required>
<input type="text" placeholder="First Name" id="firstName" required>
<input type="text" placeholder="Last Name" id="lastName">
<input type="email" placeholder="Email" id="email" required>
<input type="password" placeholder="Password" id="pass1" required>
<input type="password" placeholder="Confirm Password" id="pass2" required>
<button type="submit" onclick="SubMit()">SUBMIT</button>
</form>
<output id="out"></output>
<button type="button" onclick="click()">click me</button>
<p id="c"></p>
click() is already defined as a javascript method
function SubMit() {
var userName = document.getElementById("user").value;
document.getElementById("out").innerHTML = userName;
var fName = document.getElementById("firstName").value;
var lName = document.getElementById("lastName").value;
var eMail = document.getElementById("email").value;
var p1 = document.getElementById("pass1").value;
var p2 = document.getElementById("pass2").value;
console.log(userName);
console.log(fName);
console.log(lName);
console.log(eMail);
console.log(p1);
console.log(p2);
}
function myClick() {
document.getElementById("c").innerHTML = "HELLO WORLD";
console.log("hello world");
}
<form>
<input type="text" placeholder="Username" id="user" required>
<input type="text" placeholder="First Name" id="firstName" required>
<input type="text" placeholder="Last Name" id="lastName">
<input type="email" placeholder="Email" id="email" required>
<input type="password" placeholder="Password" id="pass1" required>
<input type="password" placeholder="Confirm Password" id="pass2" required>
<button type="submit" onclick="SubMit()">SUBMIT</button>
</form>
<output id="out"></output>
<button type="button" onclick="myClick()">click me</button>
<p id="c"></p>
Change output tag with div tag as.
<div id="out"></div>
rename click() to any other name. click() is predefined js function and you have to override the function before using it preventing the click event.
Related
I have a problem to process the data from my html form with jQuery. I have this simple form:
<form id="singup">
<input type="text" placeholder="Full Name" id="signup-name">
<input type="email" placeholder="Email Address" id="signup-email">
<input type="password" placeholder="Password" id="signup-pass">
<input type="password" placeholder="Retype Password" id="signup-retype-pass">
<button class="button-hover" type="submit" id="signup-submit">Create account now</button>
</form>
Now I want to get the value of the inputs with jQuery.
$("#singup").submit(function (e) {
var email = $('#singup-email').val();
console.log(email);
e.preventDefault(e);
});
But the browser console tells me the var email is undefined. Why?
Thanks for help!
Typo mistake. use signup-email not singup-email
$("#singup").submit(function (e) {
var email = $('#signup-email').val();
console.log(email);
e.preventDefault(e);
});
$("#signup-submit").on('click', function (e) {
var email = $('#signup-email').val();
console.log(email);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="singup">
<input type="text" placeholder="Full Name" id="signup-name">
<input type="email" placeholder="Email Address" id="signup-email">
<input type="password" placeholder="Password" id="signup-pass">
<input type="password" placeholder="Retype Password" id="signup-retype-pass">
<button class="button-hover" type="button" id="signup-submit">Create account now</button>
</form>
I'm trying to create a simple sign in/sign up form that sends an alert to the user once they've hit the submit button. The alert will show the user all the info they have put in (name, email, password). When I run the app the alert comes up as "undefined".
Here's my code:
HTML:
<form>
<h2>Sign In</h2>
<label>User Name:</label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password:</label>
<input type="password" placeholder="Enter Password" name="password" required>
<input type="submit" class="submit-button si-submit" value="Sign In">
<div id="remember"><input type="checkbox" checked="checked"><span>Remember me</span></div>
</form>
</div>
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
JS:
var userInfo = document.getElementById("name");
document.getElementById("myButton").addEventListener("click", function() {
alert(userInfo.value);
});
Your code seems to work...
var userName = document.getElementById("name"),
userEmail = document.getElementById("email"),
userPassword = document.getElementById("password");
document.getElementById("myButton").addEventListener("click", function() {
alert(userName.value);
alert(userEmail.value);
alert(userPassword.value);
});
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
</div>
I want to pass in different element IDs with the same function
function validate(idname, spnname) {
var getId = document.getElementById(idname);
if(getId === null || getId === undefined || getId === "") {
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
validate('firstname', 'spnfirstname');
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get" >
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br />
<input type="text" name="lname" placeholder="Last Name" s="textbox" id="lastname"/><span id="spnlastname"></span><br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br />
//is there another way to do this onClick event in javascript that may help?
<input id ="btn" type="button" value="Submit" onClick = "return validate()"/>
</form>
</div>
I am receiving an error for my second var and my html onClick. My question is different because there is no answer here responding to this issue correctly. I have tried everything. I have no idea why I am getting this error message.
Two things:
1.- Use the 'value' property to get the actual value from the input:
var getId = document.getElementById(idname).value;
2.-Set the function to the 'click' event, addEventListener can be useful if you want to use plain javaScript, just right after the form:
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
This is how i get it work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validate(idname, spnname){
var getId = document.getElementById(idname).value;
console.log(getId);
if(getId === null || getId === undefined || getId === ""){
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
</script>
</head>
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br/>
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname"/><span id="spnlastname"></span><br/>
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br/>
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br/>
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br/>
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br/>
//is there another way to do this onClick event in javascript that may help
<input id ="btn" type="button" value="Submit"/>
</form>
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
</body
</html>
If you are trying to validate all your elements on submit click.
You can select all using querySelector and and then check each element for its value. If value is "" then change the innerHTML of sibling span element.
var submit = document.querySelector("#btn")
submit.addEventListener("click", function() {
var elements = document.querySelectorAll("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].value === "") {
elements[i].nextElementSibling.innerHTML = "Required Field";
}
}
});
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname" /><span id="spnfirstname"></span>
<br />
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname" /><span id="spnlastname"></span>
<br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday" />
<span id="spnbirthday"></span>
<br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email" /><span id="spnemail"></span>
<br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep" /><span id="spnhomep"></span>
<br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp" /><span id="spncellp"></span>
<br />
<input id="btn" type="button" value="Submit" />
</form>
</div>
i have tried the Jquery and Javascript as well nothing wrk. Please tell me what need to be done, If I Click on submit Button then the password of the two input fields must be compared and checked.
<div class="registration-details">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" />
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" />
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" />
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required />
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" />
<input type="password" name="Password" required placeholder="Enter Password" />
<input type="password" name="ConfirmPassword" required placeholder="Confirm Password" />
<input type="submit" value="Submit" name="Submit" />
</div>
$('#form').submit(function() {
var id1 = $(#Password).text();
var id2 = $(#ConfirmPassword).text();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
Try below code:
1.add Ids to input fields:
<input type="password" id="Password" name="Password" required placeholder="Enter Password" />
<input type="password" id="ConfirmPassword" name="ConfirmPassword" required placeholder="Confirm Password" />
2. check in jquery
$('#form').submit(function() {
var id1 = $("#Password").val(); // use .val()
var id2 = $("#ConfirmPassword").val();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
Incorrect syntax in your code:
$('#form').submit(function() {
var id1 = $("#Password").val); //this is the right syntax
var id2 = $("#ConfirmPassword").val();//this too
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
As other users have rightly mentioned:
.text() is for elements containing text, it won't work on input elements.
.val() is to obtain input element texts.
missing form tag and
missing id in password
try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert("hi");
$('form').submit(function() {
var id1 = $('#Password').val();
var id2 = $('#ConfirmPassword').val();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
});
<div class="registration-details">
<form action="#" id="form">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" />
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" />
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" />
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required />
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" />
<input type="password" id="Password" name="Password" required placeholder="Enter Password" />
<input type="password" id="ConfirmPassword" name="ConfirmPassword" required placeholder="Confirm Password" />
<input type="submit" value="Submit" name="Submit" />
</form>
</div>
$(document).ready(function(){
$("#btnsubmit").on('click', function(){
var password=$('#password').val();
var confirmpassword=$('#confirmpassword').val();
if(password == confirmpassword)
{
alert('Password and confirm password are Equal');
}
else
{
alert('Password and confirm password are not Equal');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="registration-details">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" /><br/>
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" /><br/>
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" /><br/>
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required /><br/>
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" /><br/>
<input type="password" id="password" name="Password" required placeholder="Enter Password" /><br/>
<input type="password" id="confirmpassword" name="ConfirmPassword" required placeholder="Confirm Password" /><br/>
<input type="submit" value="Submit" id="btnsubmit" name="Submit" />
</div>
On this code, while i try to submit the form, am doing some validation on the input boxes, if the user-name input box value less than 6 and if there is no value, then, i am alerting alert("dshddhhdhdhh");. While I press the submit button, this alert is not working. Where is the mistake? Please.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
</head>
<body>
<form name="loginForm" method="post">
<input type="text" name="user-name" placeholder="Firstname Lastname"/>
<span class="user-name">Name should not be empty</span>
<input type="password" name="password" placeholder="Password"/>
<input type="password" name="password1" placeholder="Confirm password"/>
<span class="password1">Password does not be match</span><span class="password">Password does not be match</span>
<input type="email" name="email" placeholder="Email" required/>
<input type="url" name="url" placeholder="Website"/>
<span class="url">Invalid Website URL</span>
<input name="submit" type="submit" value="Submit"/>
</form>
<script type="text/javascript">
window.onload = function(){
document.getElementsByName("user-name")[0].value="";
document.getElementsByName("password")[0].value="";
document.getElementsByName("password1")[0].value="";
document.getElementsByName("email")[0].value="";
document.getElementsByName("url")[0].value="";
document.getElementById("FormSubmit").style.display="none";
document.querySelector('span[class="user-name"]').style.display="none";
document.querySelector('span[class="password"]').style.display="none";
document.querySelector('span[class="password1"]').style.display="none";
document.querySelector('span[class="url"]').style.display="none";
document.getElementsByName("user-name")[0].focus();
}
var formElem = document.getElementsByName("loginForm")[0];
formElem.onsubmit = function(){
var returnValue=true;
if (loginForm.user-name.value.length < 6 ){
returnValue = false;
alert("dshddhhdhdhh");
return returnValue;
}
}</script>
</body>
</html>
Your form element is named user-name, but you're checking username. Change
if (loginForm.username.value.length < 6 ){
to
if (loginForm['user-name'].value.length < 6 ){
window.onload = function(){
document.getElementsByName("user-name")[0].value="";
document.getElementsByName("password")[0].value="";
document.getElementsByName("password1")[0].value="";
document.getElementsByName("email")[0].value="";
document.getElementsByName("url")[0].value="";
document.getElementById("FormSubmit").style.display="none";
document.querySelector('span[class="user-name"]').style.display="none";
document.querySelector('span[class="password"]').style.display="none";
document.querySelector('span[class="password1"]').style.display="none";
document.querySelector('span[class="url"]').style.display="none";
document.getElementsByName("user-name")[0].focus();
}
var formElem = document.getElementsByName("loginForm")[0];
formElem.onsubmit = function(){
var returnValue=true;
if (loginForm['user-name'].value.length < 6 ){
returnValue = false;
alert("dshddhhdhdhh");
return returnValue;
}
}
<form name="loginForm" method="post">
<input type="text" name="user-name" placeholder="Firstname Lastname"/>
<span class="user-name">Name should not be empty</span>
<input type="password" name="password" placeholder="Password"/>
<input type="password" name="password1" placeholder="Confirm password"/>
<span class="password1">Password does not be match</span><span class="password">Password does not be match</span>
<input type="email" name="email" placeholder="Email" required/>
<input type="url" name="url" placeholder="Website"/>
<span class="url">Invalid Website URL</span>
<input name="submit" type="submit" value="Submit"/>
</form>