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>
Related
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.
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.
Working on a really simple form for a district site. I have a really simple form in PHP.
<form method="post">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="submit" name="action" value="enter">Enter</button>
</div>
</fieldset>
</form>
What I am trying to do is when the user presses the enter button, I want to alert the user of what they have entered.
This is what I have so far in my HTML.
<body onload="document.forms[0].submit()">
<form action="/index.php" onsubmit="" method="POST">
<script>
alert(document.getElementsByName("age").value);
</script>
</form>
</body>
However, I keep seeing "undefined". I am assuming that is happening because on page load my script is being run instead of when the user presses the submit button. Kind of confused how to just do a simple alert. Appreciate any help.
You must insert your code in a function that you must attach to a event handler like onsubmit, something like this:
HTML:
<form method="post" onsubmit="showData();">
JAVASCRIPT:
function showData() {
alert(document.getElementsByName("age")[0].value);
}
I've inserted [0] in your Javascript code because document.getElementsByName returns you an Array of elements, in your case, this Array, obviously contains only one value that is retrievable on the index 0 (first index of any array).
<form method="post" id="myform">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>" id="age">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="button" name="action" value="enter" onclick="alert(document.getElementById('age').value);document.getElementById('myform').submit()">Enter</button>
</div>
</fieldset>
</form>
Is this what you want?
I am working on an internal webpage to help automate some email tasks. I currently have 1 form that has some generic info that will be the same in all of the following forms, and several other forms that have some customized information. My issue is I cannot get the data from the Info Form to copy to the other forms on the page. My code is below:
<html>
</body>
<script language="JavaScript">
function updateInput(ish){
document.getElementById("emailsubj").value = ish;
}
</script>
<body>
Info Form
<form id="info" name="info">
Email Subjects:<input name="emailsubj" value="Enter Subject Here">
</form>
<br><br>
Form 1
<form id="form1" name="form1">
Email<input name=emadd value="email#address.com">
Subject<input name="subj" onblur="updateInput(this.value)">
</form>
<br><br>
Form 2
<form id="form2" name="form2">
Email<input name=emadd value="email#address.com">
Subject<input name="subj" onblur="updateInput(this.value)">
</form>
</body>
</html>
All of the non-information forms will have a submit button on them to do the appropriate function. I'm not opposed to using onchange rather than onblur, however testing that didn't help me any in my tests. Thanks in advance!
jQuery Answer
http://codepen.io/anon/pen/aKIgc
HTML
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>
Info Form
<form id="info" name="info">
Email Subjects:<input name="emailsubj" placeholder="Enter Subject Here">
</form>
Form 1
<form id="form1" name="form1">
Email<input name="emadd" placeholder="email#address.com">
Subject<input name="subj">
</form>
Form 2
<form id="form2" name="form2">
Email<input name="emadd" placeholder="email#address.com">
Subject<input name="subj">
</form>
</body>
</html>
SCRIPT
$('input[name=emailsubj]').on("keyup",function(e){
$('[name=subj]').val($(this).val())
});
No jQuery Answer
http://codepen.io/anon/pen/BzKxG
<html><body>
Info Form
<form id="info" name="info">
Email Subjects:<input name="emailsubj" value="Enter Subject Here" onblur="updateInput(this.value)">
</form>
<br/><br/>
Form 1
<form id="form1" name="form1">
Email<input name="emadd" value="email#address.com">
Subject<input name="subj">
</form>
<br/><br/>
Form 2
<form id="form2" name="form2">
Email<input name="emadd" value="email#address.com">
Subject<input name="subj">
</form>
</body></html>
JS
function updateInput(ish){
var a = document.getElementsByName("subj");
for(var i in a){
a[i].value = ish;
}
}
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().