I'm working on a basic landing page with a one-field form. It's my first foray into forms so forgive me if this is basic or obvious.
Here's the code for the form:
<form action="#" method="post" onsubmit="alert('Thank you - we'll send an invite soon.')">
<p><label for="email">ENTER YOUR EMAIL: </label><input type="email" id="email" name="email"/>
<input name="Submit" type="button" value="Submit"/></p>
</form>
As you can see, it's pretty basic. However, the submit button doesn't work; you have to press enter to submit the form. On top of that, I can't get the onsubmit alert to work either. I've tried a thousand different configurations with minimal success, and I'm at the end of my rope.
Change the button type to submit
<input name="Submit" type="submit" value="Submit"/>
Change the Button type to submit and also fix your Javascript, you have an extra apostrophe:
<form action="#" method="post" onsubmit="alert('Thank you - we will send an invite soon.');">
<p><label for="email">ENTER YOUR EMAIL: </label><input type="email" id="email" name="email"/>
<input name="Submit" type="submit" value="Submit"/></p>
</form>
type="button" isn't a submit button. It's a "does nothing" button that you can hang JavaScript from.
You are looking for type="submit".
Since You want to submit a form you mast use input type = submit . For example:
<input type="submit" value="Submit"/>
You can also use
<button type="submit"> Submit </button>
Related
I'm trying to make a HTML form that on submit does a google search with JS.
This is the HTML:
<form name="form">
<input type="text" name="search" id="searchBox" onkeyup="changeLogo()" autofocus>
<input type="submit" id="button" value="Submit" onclick="googleSearch()">
</form>
And the JS function:
function googleSearch() {
var searchText = document.getElementById("searchBox").value;
window.location.href = "http://google.com/";
}
The Google URL isn't right but it isn't redirecting at all.. I put alert(searchText) in the function and the alert showed so not really sure what's going on.
If you use button type as 'submit', it will submit your form.
So you can change your button from
<input type="submit" id="button" value="Submit" onclick="googleSearch()">`
to
<input type="button" id="button" value="Submit" onclick="googleSearch()">
It will work.
because the page refreshed when you click submit button before excuting localtion.href line
try change with your code like below
<form name="form" onsubmit="return false">
....
</form>
Your form is submitted which might be the issue. Change the type="submit" to type="button" this will make sure the form is not submitted on click of this button
I have a very simple form:
<form>
<fieldset>
<input id="in1" type="text" data-validate="required">
</fieldset>
<fieldset>
<input id="in2" type="text" data-validate="required">
</fieldset>
<input id="btn" type="button" value="Insert your datas" onclick="insert()">
</form>
If third input (id:"btn") had type="submit", notify/verify would work well.
I don't need to submit this form (because I have to launch an insert() function on button onclick),
so I deleted the submit type of my button and unfortunately no notifications appear on my page now.
I may add an handler (like this: $(".elem-demo").notify("Hello Box")) as notify docs suggest, but that is a custom notification, good, but I want to take advantage of verify.js data-validate..no extra-code required for a simple validation like "required" or "number".
How can I fix that?
I wish I was clear of my issue and thanks to answer me.
You can keep the button type submit and can override the default form submission behavior on submit button click via event.preventDefault()
<form id="my-form" onSubmit="myFunction(event)">
<fieldset>
<input id="in1" type="text" data-validate="required">
</fieldset>
<fieldset>
<input id="in2" type="text" data-validate="required">
</fieldset>
<input id="btn" type="submit" value="Insert your datas" onclick="insert()">
</form>
This your function which will be called on form submission.Access the form via its id and call validate to check form for errors.
Calling validate will trigger validation on every element in the form. It accepts a callback function callback(success) which will be called after validation.
function myFunction(e){
e.preventDefault();
$("#my-form").validate(callbackFunction);
// call your other function
}
I've got a problem regarding my contact form page. I did callback after clicking the submit button. I tried not to fill name textbox but form still submits.
My code:
function sendFeedback() {
alert("Thank you for the feedback :)");
}
<form>
<p class="font3">Name:</p>
<input name="name" type="text" maxlength="50" size="30" required/>
<br />
<p class="font3">Email:</p>
<input name="email" type="email" placeholder="" required/>
<br />
<p class="font3">Subject:</p>
<input name="subject" type="text" required/>
<br />
<p class="font3">Message:</p>
<textarea name="comment" row="80" cols="30" required></textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="sendFeedback()">
<input type="reset" value="Reset">
</form>
You should change <form> to <form onsubmit="test()",where test() would go something like this:
test(e){
e.preventDefault();
/* do some validations here */
document.querySelector("form").submit();
}
Hope it helps
The form submitting and your alert triggering are two completely different things. The required attributes you have on the inputs are working correctly. If you leave any of the required inputs blank, the form will not submit to the server, instead you'll trigger standard error messaging in whatever browser you're using (usually a red outline and a popover).
The bit of JavaScript you have (i.e. your alert) will trigger regardless of whether the form submits successfully or not since it's executed BEFORE the submit goes through. You need to either do something like e.preventDefault() or return false at the end of your function, but that will prevent the form from being submitted altogether.
As #dvenkatsagar said, your best option is to change your onclick to onsubmit.
I have two XHTML forms (below). I am looking for a way to submit the two forms with one submit button.
First Form Below
<form method= "post" action= "forum_add_111438076.xhtml" >
<input type= "hidden" name="d_token" value="2ab5b36d7d0e5f9fee88cc9a67553db6" />First
Name:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Last Name:<br/><input type="text" name="text" maxlength="20000"/>
<br/><input type="submit" name="submit" value="Submit" /></form>
Second Form
<form method="post" action="forum_add_111438075.xhtml" >
<input type="hidden" name="d_token" value="d0cb19bc6b0d162a11431213976206b8" />
Phone Number:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Address:<br/><input type="text" name="text" maxlength="20000"/>
<br/><input type="submit" name="submit" value="Submit" /></form>
Each form above has its own submit button, but I want to use only one submit button.
You cannot simultaneously submit two forms at once. (like one webpage cannot go to two)
One way around this would be to use Ajax and submit the forms one after another.
Some Example Code. (using jQuery)
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form id="form1">
<input type= "hidden" name="d_token" value="2ab5b36d7d0e5f9fee88cc9a67553db6" />First Name:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Last Name:<br/><input type="text" name="text" maxlength="20000"/>
<br/></form>
<form id="form2">
<input type="hidden" name="d_token" value="d0cb19bc6b0d162a11431213976206b8" />
Phone Number:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Address:<br/><input type="text" name="text" maxlength="20000"/>
<br/></form>
<input type="submit" name="submit" onclick="submitAction()" />
Javascript
submitAction() {
$.post('forum_add_111438076.xhtml', $('#form1').serialize())
$.post('forum_add_111438075.xhtml', $('#form2').serialize())
}
It's not exaclty possible to submit two forms at once to two different places.
The best thing you can do, if you require seperate processing, is to use your receiving page to gather the secondary form post, and send that along to the secondary processing page. PHP using CURL is perfect for something like that.
If you use the get or an ajax function it will allow you to know when the first or second form is completed. Using the get you would use .done if you use ajax you will use the .success Once your first form has completed the submission, you can then submit your other form as shown below.
//Submit your First form
$.get("postOne").done(function(){
//When your first form is completed you can then submit your second form.
$.get("postTwo").done(function(){
});
});
I have two files. One is login.html which is a simple html5 file with a form.
HTML
<form method="post" action="" name="form1">entre the pasword:
<input type="password" name="code" placeholder="code" maxlength="6">
<p class="submit">
<input type="submit" name="commit" value="send" onclick="verif(document.form1.code)">
</p>
</form>
Second is my javascript file with the below code:
function verif(inputtxt) {
var pwd = "123456";
if (inputtxt.value.match(pwd)) {
window.location.href = 'Test.html';
} else {
alert('Code erron\351 ! ')
return false;
}
}
Now my problem is that when I enter my password, if it is wrong the alert message indicating an error should appear (it appears and I don't have a problem with that) and if it is correct, I should get redirected to the next page. The second part doesn't work for me.
Please help, I'm stuck with that for two days now..
Since your button is a submit button, I think it is submitting the form after the JS is done and this could be the reason why you don't get redirected to Test.html (as form action attribute doesn't have any value.) Try the below code for the HTML form and check if this solves the issue.
<form method="post" action="" name="form1" onsubmit="verif(document.form1.code);return false;">entre the pasword:
<input type="password" name="code" placeholder="code" maxlength="6">
<p class="submit">
<input type="submit" name="commit" value="send">
</p>
</form>
The return false; in the onsubmit attribute prevents the form's default submit action. The verif(document.form1.code) will be executed whenever the form is submitted (that is the submit button is clicked).