I am confused here, I have html form from which I want to send information to javascript. (which will call offisde for login). Everytime I enter var username = document.getElementById("user").value; inside the function, nothing appears on my console log. But if I take that out, it behaves as normal.
Here my html
<form class="form-login">
<h2 class="form-login-heading">sign in now</h2>
<div class="login-wrap">
<input type="text" class="form-control" placeholder="User ID" name="user" autofocus>
<br>
<input type="password" class="form-control" placeholder="Password" name="passwd" >
<button class="btn btn-theme btn-block" Value="Submit" type="submit" onclick="Calculate()"><i class="fa fa-lock"></i> SIGN IN</button>
Here my javascript
<Script>
function Calculate(){
console.log("In function, test 1");
var username = document.getElementById("user").value; <-- if remove this, console/alert apper, but add this and no consoles.log appear. Not even the one above
alert ("Login successfully");
window.location.replace("index.html");
//window.location = "index.html"; // Redirecting to other page.
return false;
</script>
So I am confused on why I cannot used getElementById inside my javascript function.
`
There is no element with id user, you have an input with name user, add attribute id="name" to it and tthen you should be fine.
Related
I am trying to handle some JavaScript work, which I don't have much experience with. I have a 2 part form where a user enters their personal info, and then company info. I am trying to set some of the company fields to what they already entered in their personal info.
I don't want the user to have to retype address, email, etc.
for example, I have...
<div class="form-group">
<label for="email">Email<span>*</span></label>
<input name="email" type="text" class="form-control required" id="email"placeholder="Email" value=".
{{email}}">
<span id="span_email" class="error-msg"></span>
And...
<div class="form-group">
<label for="comp_email">Company Email<span>*</span></label>
<input name="comp_email" type="text" class="form-control required" id="comp_email"placeholder="Email"
value="{{comp_email}}">
<span id="span_email" class="error-msg"></span>
How would I be able to set that second comp_email field to initially have the email info, so the user doesn't have to retype, unless they actually wanted to change the comp_email to another email address?
EDIT
It is all in one form, just separated by divs. Initially, when the page is loaded, the account section div is displayed, when the user hits next, it triggers the display of the business info.
<input type="button" onclick="nextFormPage(); window.scrollTo(0, 100)"
class="btn btn-danger btn-block" value="Next">
The nextFormPage() function just hides the first div and displays the second div.
You have tagged both javascript and jQuery so I'm not sure which you are using. But you can do this with a single line either way:
Javascript::
document.getElementById("comp_email").value = document.getElementById("email").value;
document.getElementById("email").value gets the value from the email input and we set the value of the document.getElementById("comp_email") by setting its value attribute:
jQuery:
$("#comp_email").val( $("#email").val() );
$("#email").val() get the value from the email input and $("#comp_email").val( ... ); sets the text passed in as the input value.
Javascript Working Example
function nextFormPage(){
document.getElementById("comp_email").value = document.getElementById("email").value;
}
<div class="form-group">
<label for="email">Email<span>*</span></label>
<input name="email" type="text" class="form-control required" id="email" placeholder="Email" value="">
<span id="span_email" class="error-msg"></span>
<div class="form-group">
<label for="comp_email">Company Email<span>*</span></label>
<input name="comp_email" type="text" class="form-control required" id="comp_email" placeholder="Email"
value="">
<span id="span_email" class="error-msg"></span>
<input type="button" onclick="nextFormPage(); window.scrollTo(0, 100)"
class="btn btn-danger btn-block" value="Next">
If your user is logged in, you should pass all of their information to the form, including their email. For example:
const logIn = () => {
... some code to get the user ...
... pass the user to the form, probably through an event listener...
let button = document.createElement("button")
button.textContent = "Edit"
button.addEventListener('click', () => {editYourStuff(user)}
}
const editYourStuff = user => {
... grab whatever your form is called ...
editForm.email.value = user.email
}
This should pre populate your form with the email
This question already has answers here:
Using JQuery - preventing form from submitting
(15 answers)
Closed 5 years ago.
I am trying to get my form to stop refreshing on submit and instead I would like to make an ajax call, I haven't done the ajax part yet but its still refreshing?
What have you tried?
I have took suggestions on the forum and added 'return false;' after the function is called onSubmit?
$('#message_form').submit(function() {
postMessage();
return false;
});
function postMessage() {
var isValid = true;
var username = document.forms["post_message_form"]["username"].value;
var message = document.forms["post_message_form"]["message"].value;
var errorMessage = "Something went wrong, try again!";
if (isEmpty(username) || isEmpty(message)) {
errorMessage = "You can't post with an empty name or message.";
isValid = false;
}
if (!isValid) {
alert(errorMessage);
}
else {
alert("Your message has been posted.");
}
return false;
}
function isEmpty(field) {
return field == null || field == "";
}
Form:
<form id="message_form" name="post_message_form" method="post">
<input type="text" class="form-control" placeholder="Whats your name?" name="username">
<textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
<input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
</form>
Try this:
<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage();">
<input type="text" class="form-control" placeholder="Whats your name?" name="username">
<textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
<input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
</form>
Try this code added onsubmit="return postMessage()
<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage()">
<input type="text" class="form-control" placeholder="Whats your name?" name="username">
<textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
<input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
</form>
EDIT: Updated
There can be certain reasons regarding this kind of issue
postMessage is not accessible
There may be chances that this message is not globally declared
There may be other error in javascript code
Some some piece of code does not work due to error in other parts of javascript code
There may be chances that you have not loaded jquery core library file
If have not include jquery.min.js file your above code will not work (your case - See comments)
Since return false and event.preventDefault(); do the same work in this example you can use one of them
$('#message_form').submit(function(event) {
event.preventDefault();
postMessage();
// return false;
});
To debug the code and find the error you can open developer tools in browser by pressing f12 or select option inspect element by clicking right click on the page
use preventDefault instead return false;
$('#message_form').submit(function(event) {
console.log(123);
event.preventDefault();
});
https://codepen.io/animhotep/pen/bRBmxm?editors=1011
like in official maual ;) https://api.jquery.com/submit/
Good day,
I am working on a form where all my text fields have a required attribute; I noticed that when i clicked on submit required attribute does not show a pop up to validate if a field is empty.
I have two submit buttons on my page both using an onclick submitform function; One opens up a new tab and the other submits the form and goes to a new page.
For debugging purposes i remove the button that opens up a new tab and remove the onclick attribute on my second button and it work; I have been googling all day but i cannot seem to find the same scenario i have at the moment.
I believe it has to do with my JS but i am not sure what to add or remove on my code; Please see my code below.
JavaScript
function submitForm(action,newtab)
{
document.getElementById('add2').target = newtab ? '_blank' : '_self';
document.getElementById('add2').action = action;
document.getElementById('add2').submit();
}
HTML
<form id="add2" action="add5.php" method="post">
<input placeholder="First Name" tabindex="1"
name="fname" maxlength="128" size="30" required>
<input placeholder="Last Name" tabindex="12"
name="lname" maxlength="128" size="30" required>
<button tabindex="3" value="Save"
name="save" onclick="submitForm('add3.php',1);"
type="submit">Child Information</button>
<button tabindex="4" value="Save"
name="save" onclick="submitForm('add5.php',0);"
type="submit">Save Details</button>
</form>
I have a button attribute but i have set it to type="submit" and i am pretty much sure that works as i have already tested it when i removed the onclick functions; My question is can i required attribute worked without removing the onclick function of JavaScript?
Any help is much appreciated.
I found the answer to my question, The problem is that i was binding onClick method to the submit. The onClick will trigger first which results in it getting past the validator.
Solution is i change the onClick to onSubmit on my HTML code.
<button tabindex="3" value="Save"
name="save" onsubmit="submitForm('add3.php',1);"
type="submit">Child Information</button>
<button tabindex="4" value="Save"
name="save" onsubmit="submitForm('add5.php',0);"
type="submit">Save Details</button>
You just need to use the "checkValidity()" method on the form before submitting in your onclick function like this:
if($("#add2").checkValidity()) {
document.getElementById('add2').submit();
}
See this fiddle: http://jsfiddle.net/36uv2e52/33/
Rather than using required you can simply check the values before you submit.
function submitForm(action,newtab) {
fname = document.getElementById('fname').value;
lname = document.getElementById('lname').value;
if (fname == "" || lname == "") {
alert("First and last name are required");
exit;
} else {
document.getElementById('add2').target = newtab ? '_blank' : '_self';
document.getElementById('add2').action = action;
document.getElementById('add2').submit();
}
}
I am new to javascript, and i only know c++ so far, but i know the logic but i just don't know the syntax on javascript
so i have this form :
<span>Please type your name here: </span>
<input id="inputname" type="text" value=""></input>
when the user types his/her name how do i save the value to some variable and display it with javascript?
i have already tried using
function displayName(){
var username = getElementById("inputname").value;
document.write(username);
}
and i put
<script>displayName();</script>
below the form. it doesn't seem to work, how do i do it?
and how do i use:
<input type="submit"></input>
in relation to it?
Try this,
Javascript
function displayName(){
var username = document.getElementById("inputname").value;
document.getElementById("msg").innerHTML = username;
}
HTML
<span>Please type your name here: </span>
<input id="inputname" type="text" value=""></input>
<input type="button" onclick="displayName();"></input>
<span id="msg"></span>
By changing onclick="return displayName()" to onkeypress="displayName()" you will be able to see the changes on the spot.
change your html and js like this. onblur function call when user leaves the input from focus. get the enter value onblur
<span>Please type your name here: </span>
<input id="inputname" type="text" onblur="displayName();" value=""></input>
js
function displayName(){
var username = document.getElementById("inputname").value;
document.write(username);
}
you need to change your fucntion little bit..
getElementById() is not a direct function in javascript..use it with document object
function displayName(){
var username = document.getElementById("inputname").value;
document.getElementById("msg").innerHTML = username;
return false;
}
on submit click
<input type="submit" id="btnSave" onclick="return displayName();" value="Save" />
<div id="msg" > </div>
I have been trying to log in to a offline HTML/CSS page using the enter key but unable to start with JavaScript which needs I'm sure.
But can log in using the mouse when I click the log in button which i have created ..
How do i use the enter key stroke to log in?
This is the javascript which I have hard coded for credential test which works using the mouse click.. I want it for the enter key.. Thank you.
<!DOCTYPE HTML>
<html>
<head>
<title>
Login page
</title>
</head>
<body>
<div align="center">
<div id="bor">
<h1>
Login Page
</h1>
<div>
<form name="login">
 <input type="text" placeholder="Enter the Username" name="user"/> <br />
<input type="password" placeholder="Enter the Password" name="pwd"/><br /><br />
<input type="checkbox" name="en" value="en" />Remember Me<br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
</div>
<script language="javascript">
function check(form)
{
if(form.user.value == "user" && form.pwd.value == "pwd")
{
window.open('inbox.html','_self')
}
else
{
alert("Error Password or Username")
}
}
</script>
Use the submit event handler. The click handler on an element will only fire if you click on it. What you are trying to do is submitting a form, but handling the form with javascript instead of on the server. I would recommend binding that dynamically, but as you have all javascript here inline, I'll give an example inline too.
You'll need to attach a submit event handler to the form element. If you do it inline, this will work with onsubmit="..." instead. The return is there to prevent/allow the form to be submitted to the server. If the function returns 'true', the form will be submitted to the server. If the function returns 'false', the form will not be submitted. You'll also need to change the type of your submit button to submit. This will tell the browser to submit the form if that button is clicked. Alternatively, if you press enter in an input field, the browser will see this as submitting the form too.
<form name="login" onsubmit="return check(this)">
 <input type="text" placeholder="Enter the Username" name="user"/> <br />
<input type="password" placeholder="Enter the Password" name="pwd"/><br/><br/>
<input type="checkbox" name="en" value="en" />Remember Me<br>
<input type="submit" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
The javascript behind it will remain mostly the same. You'll notice that we passed this to the function. This will pass the element itself (in this case the form element) to the function. As said before, you'll need to return false. I've changed form to frm as form is a globally defined variable in some browsers.
function check(frm)
{
if(frm.user.value == "user" && frm.pwd.value == "pwd")
{
window.open('inbox.html','_self')
}
else
{
alert("Error Password or Username")
}
return false;
}
An example jsfiddle: http://jsfiddle.net/AS5t5/