i'm trying to display a validation error message without using an alert box. But its not working. Previously I've used "innerHTML" successfully. But i don't understand why it doesn't work here. This is my code.
function validate()
{
if(document.regform.fname.value.length=="")
{
document.getElementById("error").innerHTML="error";
}
}
<header>
<h1>SIGN UP</h1>
</header>
<div class="div1"><img src="img.jpg" width="250px"></div>
<div class="div2" id="div2">
<form name="regform" onsubmit="return validate()">
<label><input type="text" name="fName" id="fna"></label>
<input type="submit" name="submit" value="Sign Up" >
<p id="error"></p>
</form>
</div>
<footer></footer>
There are some mistakes in your code. Firstly the name is fName but you are using fname and then you must compare length by an integer value not empty string.
Also you would like to stop the submission if an error occurred. Hence you return a false if there is an error.
Try this.
function validate() {
if (document.regform.fName.value.length == '0') {
document.getElementById("error").innerHTML = "error";
return false;
}
}
<body>
<header>
<h1>SIGN UP</h1>
</header>
<div class="div2" id="div2">
<form name="regform" onsubmit="return validate()">
<label><input type="text" name="fName" id="fna"></label>
<input type="submit" name="submit" value="Sign Up">
<p id="error"></p>
</form>
</div>
<footer></footer>
</body>
Hope it works.
Related
I would like to take the information stored in the form from my date input and send it to a variable in JavaScript.
<body>
<form action="" method="get" class="countdown">
<div class="countdown">
<label for="birthday">Enter your birthday: </label>
<input type="date" name="birthday" id="birthday" required>
</div>
<div class="countdown">
<input type="submit" value="Submit"
</div>
</form>
<script src="lab3.js"></script>
</body>
var bDay = document.getElementById("birthday").value
console.log(bDay)
You'll want to do something like this:
//Wait for page to finish loading
window.addEventListener("load",function(){
//Run function when you submit form
document.getElementById("form").addEventListener("submit",function(e){
//Stop the form from submitting:
e.preventDefault();
//Get your input value
var bDay = document.getElementById("birthday").value;
//Log it to your console
console.log(bDay)
});
});
<!DOCTYPE html>
<html>
<body>
<!-- Add an id to your form-->
<form id='form' action="" method="get" class="countdown">
<div class="countdown">
<label for="birthday">Enter your birthday: </label>
<input type="date" name="birthday" id="birthday" required>
</div>
<div class="countdown">
<input type="submit" value="Submit">
</div>
</form>
<!-- <script src="lab3.js"></script> -->
</body>
</html>
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
No matter what I try I cannot get this to submit my search form
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox">
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit">
</div>
</div>
<!-- End search bar-->
</div>
</div>
<!-- /search_bar-->
</form>
</div>
This seems to work fine, BUT your HTML looks invalid. The form is not nested correctly and you have an extra tag.
Apparently, you just need to tidy up your HTML and the form will submit when you click the button.
$("form").submit(function( event ) {
alert( "Form submitted" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox" />
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit" />
</div>
</div>
<!-- End search bar-->
</form>
</div>
<!-- /search_bar-->
</div>
I have formatted your HTML correctly and as you can se, the form submits on click of the button.
Fiddle
I have simple form:
<form id="loginform" name="loginform" action="" method="post">
<div data-role="fieldcontain">
<label for="login">Login:</label>
<input type="text" name="login" id="login" value="" />
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" />
</div>
<div class="ui-body">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="button" class="exitapp">Close</button></div>
<div class="ui-block-b"><button type="submit" id="elogin" onclick="return false;">Login</button></div>
</fieldset>
</div>
</form>
And some code in jQuery Mobile. In case press enter button in Firefox form is not submit - it's great, but in Android Emulator it's submit and it cannot using my JS code :( How can repair this?
$("form").submit(function(){
//do your js code
return false;
});
I have found this to work but I always test on my Android device rather than the emulator...:
<form action"..." method="..." onSubmit="return check_form();">
...
</form>
function ckeck_form() {
...
if (error === true) {
return false;
} else {
return true;
}
}
$('#loginform').submit(function(e) {
e.preventDefault();
});
See MDN for more info on preventDefault().
This was working but has suddenly stopped for some reason. I can't see what's wrong. Can someone tell me what I am doing wrong here? I'm using an onclick event in a span tag then calling this function.
Firefox reports: Error: document.forms[0].submit is not a function
function submitlogin() {
document.forms[0].submit()
}
<form method="post" id="submit" action="something.asp">
<span id="button" onclick="submitlogin()"></span>
</form>
This is what the form looks like
<form method="post" id="myform" action="">
<div>
<input type="text" id="name" name="name" />
</div>
<div id="btn-container">
<span id="button" onclick="submitlogin();"></span>
</div>
</form>
document.forms[0] is searching for a <form> in your code, which you don't have. A quick fix could be
<script type="text/javascript">
function submitlogin() {
document.forms["myform"].submit();
}
</script>
<form method="post" id="myform" action="something.asp">
<span id="button" onclick="submitlogin()">hello</span>
</form>