My form submits to another page when I do not want it to. The current page is known as create_session.php
I want the form to submit if all of the validation and the postback is met and even after that the user needs to click "Ok" when the confirmation box appears. Except this never happens. When the user clicks on the submit button, it takes the user straight to another page "QandATable.php", it doesn't care about about validation(), the postback() and the confirmation box doesn't appear.
So what I want to know is that when the user clicks on the submit button, how can I get it so that it checks for the validation(), postback() and confirmation box (showConfirm()) before even going onto the next page.
I believe the problem is the submit button and the form action. Below is the form:
<form action="QandATable.php" method="post" id="sessionForm">
<p><input type="text" id="txtMarks" name="textMarks" onkeypress="return isNumberKey(event)" maxlength="5" /><br/><span id="marksAlert"></span></p>
<p><strong>Room:</strong> <input type="text" id="room" name="roomChosen" value="<?php echo $roomChosen; ?>" />
<br/><span id="roomAlert"></span></p> <!-- Enter Room here-->
<p><input class="questionBtn" type="submit" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/></p>
</form>
Below is the javascript click handler where it checks for the validation(), postback() and then if both of those met then it will showConfirm().
function myClickHandler(){
if(validation()){
postback(function(message) {
if (message == "")
showConfirm();
});
}
}
You need to return false from your onClick handler to prevent the form from being submitted.
You need to make sure the default action isn't applied when the submit button is clicked. In this case, the default action is to submit the form.
Try adding a return false; such as
<input class="questionBtn" type="submit" value="Prepare Questions" name="prequestion" onClick="myClickHandler(); return false;"/>
Two changes; you need to pass the function, not the function's return value, and you need to return false:
<input class="questionBtn" type="submit" value="Prepare Questions" name="prequestion" onClick="myClickHandler" />
------------------------------------------------------------------------------------------------------------^ here
and
function myClickHandler(){
if(validation()) {
postback(function(message) {
if (message == "")
showConfirm();
});
}
return false;
}
Related
Why my page reloads even I used ajax to it and it also disappears my input text after clicking the submit button. I already used show to solve it but it doesn't work.
<form method="POST" action="<?php $_SERVER['PHP_SELF'];?>">
<input type="text" name="name" id="name">
<span id="namenotif" style="color:red;"> <span>
<br>
<input type="text" name="price" id="price">
<span id="pricenotif" style="color:red;"> <span>
<br>
<input type="submit" name="submit" id="save"><br>
</form>
<script>
$(document).ready(function() {
$(document).on("click","#save",function(){
var name = $("#name").val();
var price = $("#price").val();
if(name==""){
$("#namenotif").html("Enter a name");
$("#name").show("fast");
$("#save").show("fast");
}
else if(price==""){
$("#pricenotif").html("Enter a price");
$("#price").show("fast");
$("#save").show("fast");
}else{
$.ajax({
url:"addproduct.php",
type:"POST",
data:{name:name,price:price},
success:function(data){
alert("Successful");
}
});
}
});
});
</script>
add return false to end of function, that handle click event
Two solutions:
Change the button type='submit' to type='button'
or ( and preferably )
Change the event listener to listen for the form's onSumbit event then call event.preventDefault or in jQuery, I think you just do return false in the callback.
The form is being submitted I think, because it is the default behavior of submit button to submit the form, no matter if you used ajax or not. so you can prevent the default behavior by simple adding a code in jquery. Modify the code like this:
$(document).on("click","#save",function(e){
e.preventDefault();
...............
Rest of the codes can remain same. so only prevent the default action, it should work.
Its because of type="submit"
Use
<input type="button" name="submit" id="save"><br>
Or
<a href="javascript:void(0) id="save">
or
jquery's preventDefault();
I have a button submit inside a form and just a normal button outside of it. I want to validate a form:
function myButtonHandler(evt) {
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
}
This doesn't show the standard error tips inside of input elements when they're invalid when I click on a button -- ones shown by a browser when I click the submit button. How can I get these validation message to pop up when I click on my normal button when the form is invalid?
<form id="my_form">
<input type="text" placeholder="Name" required="true"/>
<input type="submit" id="submit" value="go" />
</form>
No jquery.
You'll need to add the code you've shown to a function that is set up as the click event callback for the normal button:
var myForm = document.querySelector("form"); // reference to form
var btn = document.querySelector("[type='button']"); // reference to normal button
// Set up click event handling function for normal button
btn.addEventListener("click", function(){
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
});
<form>
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="button">Check Validity</button>
If you just want to show the normal browser's validation errors, you can make the second button also a submit button. It's OK for the button to be outside of the form as long as you tie it back to the form with the form attribute.
<form id="theForm">
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="submit" form="theForm">Check Validity</button>
<form id="loginForm">
<p id="usernameLabel">Username:</p>
<input type="text" name="username" id="username" placeholder="username"/><br>
<p id="passwordLabel">Password: </p>
<input type="password" name="password" id="password" placeholder="password"/><br>
<input id="loginButton" type="submit" value="Login!" onsubmit="validateForm()">
</form>
<p id="loginMessage">Please Login!</p>
<script type="text/javascript">
function validateForm() {
var un = document.loginForm.username.value;
var pw = document.loginForm.password.value;
var username = "MitchWardle";
var password = "123abc456";
if ((un == username) && (pw == password)) {
window.location = "content.html";
return false;
}
else {
alert ("Login was unsuccessful, please check your username and password");
}
}
</script>
I have created a little login form on Javascript and I want it to navigate to Content.html when username and password are correct but when I click my Login button it just removes the text from the text box's, can anybody see whats wrong?
you need to return false to prevent default action of submitting the form , page gets refresh andyou loss your data, you can set type of submit button to
type="button"
or can change onsubmit to
onclick="validateForm(); return false; "
Just a couple things are off, but it's almost there:
The onsubmit handler is used at the form level. Either move the onsubmit to the <form> element or change it to an onclick event for the <input> element.
In order to reference the text fields the way you are, the <form> element also needs a name attribute. i.e. name="loginForm"
Do this:
Remove onsubmit from button add it to form.
Change id of form to name.
In the onsubmit of form append return false;.
Remove return false; from the if statements.
Change document.loginForm line to this:
document.forms['loginForm'].elements['username'].value //username/password depends.
Hope it works.
I have had the same problem as you before, and I solved it by changing the submit button to <input type="button" onclick="login();" />, and everything worked. However, the user then cannot submit the form with enter key (because there's no submit button in the form).
I'm working on a submission form that includes a few required fields, and I have a segment of code that allows a popup menu to appear once you hit the "submit" button, and from there once you hit "ok" on the alert you're redirected to the home page. Here's the code I have for the popup alert.
<div id="popup">
<button onclick="myFunction()">Submit</button>
<script>
function myFunction(){
alert("Thank you! \nYour sumbission has been
accepted and you will receive a conformation email shortly! \n
You will now be taken to the Home page.");}
</script> <input type="reset" value="Reset" />
</div>
And this is the beginning of the code for redirecting you to the homepage.
<div id="all">
<div id="text">
<h1>Your Information</h1>
<form id="contact_form" action="home.html" method="post">
<input type="hidden" name="redirect" value="home.html" />
(Note: I clipped the above segment of code because the following information is only the form input boxes)
And this works like you would imagine, the alert popping up once you hit the submit button. However my question is that I have a few required fields on my form, and if the fields are not filled out and you hit "submit", the popup alert appears, and once you hit "ok" on the alert, because you have yet to fill out these fields it takes you back to the form and a little box saying "this field is required" appears.
This is in the wrong order. I want the alert box for the required fields to show before the popup alert for the confirmation of form submission, so that if you have required fields and you hit submit it will tell you to fill out the required fields before the message appears thanking you for submitting.
This may be a simple fix of placement or adding a little code but I'm having a hard time figuring out how to do it or finding an example that could help me.
If you know what to do I'd really appreciate it, thanks!
Edit: This is the javascript file for the validation code.
window.onload = setForm;
function setForm() {
document.forms[0].onsubmit = function() {
if (this.checkValidity()) alert("No invalid data detected. Will
retain data for further testing.");
return false;
}
}
function Validation()
{
vak k = true;
k = function 1 validates field 1 AND returns true or False based On Validation
k = function 2 validates field 2 AND returns true or False based On Validation
k = function 3 validates field 3 AND returns true or False based On Validation
return k;
//At The End Of This Function You Need To Get "TRUE" To Truly Submit.
}
On Submit :
If(Validation() == true)
{
then Only Submit
}
Write Back If It Dosen't Works...
<html>
<body>
<div id="popup">
<textarea cols="30" rows="2" name="required" id="required"></textarea>
<input type="submit" id="click" value="Submit">
<input type="reset" value="Reset" />
</div>
<script>
var click = document.getElementById("click");
click.addEventListener("click", function() {
var required = document.getElementById("required").value;
if (required===null || required==="") {
alert("Please make sure all required field are completed");
}
else {
alert("Thank you! \nYour sumbission has been accepted and you will receive a conformation email shortly! \nYou will now be taken to the Home page.");
window.location.replace("http://stackoverflow.com", 5000);
}
});
</script>
</body>
</html>
http://jsbin.com/wuxahape/1/
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/