Alert blocking "required field" pop-up - javascript

I am making a form that when filled out is creates an alert telling you that it was a success and where the user is about to be redirected to. The problem is that this alert seems to be "blocking" the chrome "please fill out this field" pop-up for input fields with the required attribute that were not filled in.
It is (to my knowledge) only an Chrome problem. IE still shows the pop-up after the alert, and I have not been able to try Firefox.
For example
<form method="post" action="sendemail.php">
<input type="text" name="name" required>
<input type="submit" name="submit" onclick="javascript:alert('All done')">
</form>
The best result would be to only show the alert if all the required fields are filled in.

Simply remove the onclick and add onsubmit to the form tag:
<form method="post" action="sendemail.php" onsubmit="javascript:alert('All done')">
<input type="text" name="name" required/>
<input type="submit" name="submit"/>
</form>
onsubmit only fires once the form is submitted, which won't happen if a required input isn't filled in. onclick always fires when clicking the submit button, even if all fields aren't correct.

Related

Javascript onfocus and enter key

I have a login form which contains a username field, password field, and a submit button like so:
<form id="myform" name="myform" method="post" action="servlet/url">
<label>Username:</label>
<input type="text" name="username" value="user_name" placeholder="Username">
<label>Password:</label>
<input type="text" name="user_pwd" value="" placeholder="Password" onfocus="javascript:this.value=''">
<input type="submit" value="Submit">
</form>
If I click the submit button, it works as expected. However, pressing the enter key clears the password value UNLESS I click out of the password field first. I know that this is because of my onfocus attribute, however I would still like the password field to clear away automatically if you click back into it. What could be the cause of the enter key clearing the field?
You could replace onfocus= with onclick=. The functionality is somewhat different however.
I should also note that I cannot reproduce your experience in Chrome, Firefox, IE, nor Edge.

HTML form submit POSTS input button/submit values; JavaScript form submit does not

So this has been bugging me for some time. I discovered a page that was intermittently submitting form contents twice. For simplification, the inputs are a text field and a button. Upon further inspection, I noticed one form submission included the text and button inputs and the other submission only sent the text input.
I set up a test page to troubleshoot. I put it up on jsfiddle, but I don't think it'll be much help, since I cannot see the values passed using an HTTP Proxy tool such as Fiddler.
https://jsfiddle.net/9xL5w9t2/
<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form1" name="form1name">
<input type="submit" value="submit form" id="submitbtn1" name="submitbtn1name" />
<input type="text" id="text1" value="123" name="text1name" />
</form>
<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form2" name="form2name">
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form2name.submit();" id="submitbtn2" name="submitbtn2name" />
<input type="text" id="text2" value="123" name="text2name" />
</form>
<form method="post" action="www.google.com" id="form3" name="form3name">
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form3name.submit();" id="submitbtn3" name="submitbtn3name" />
<input type="text" id="text3" value="123" name="text3name" />
</form>
<form method="post" action="www.google.com" onsubmit="alert('form submitted'); this.submit();" id="form4" name="form4name">
<input type="submit" value="submit form" id="submitbtn4" name="submitbtn4name" />
<input type="text" id="text4" value="123" name="text4name" />
</form>
Form 1: Submits text and button
Form 2: Submits text
Form 3: Submits text
Form 4: Submits twice. 1) Submits text 2) Submits text and button
From the looks of it, submitting using HTML Form submit sends over text and button inputs. But submitting the form using JavaScript sends over just the text input. No button.
What is the explanation for this behavior? Why does a JavaScript form submit send over text input only, yet HTML form submit sends over both text and button inputs?
Is this by design? If so, what would be the reason(s)? Seems inconsistent to have your HTML parser send the button value, yet your JS engine does not.
Thank you for any help.
Form 1: Submits text and button
.. default behavior, using a input type submit
Both input controls get submitted because you've clicked the submit button.
Add another submit-button. You will see that only the button dispatching the submit is included in the post data.
So.. what's the reason for that: This way you can add two buttongs, e.g. "cancel" and "save" to a form using the same name
Form 2: Submits text
Form 3: Submits text
.. both solutions look exactly the same to me, the input type button is not handled as an "submit input field" here.. you submit using js.
There is no action on the button and that's why it's not included. (Like described above).
Form 4: Submits twice. 1) Submits text 2) Submits text and button
You're using a input type submit like in the Form 1.. so this form gets submitted exactly the same way. But: there is also a onsubmit handler on the form that calls the submit again using js- that's the reason for the second submit.
The handler is called first, because a submit will trigger a page-reload and the script executing the event will not be "present" anymove after the submit.
The other behaviour is just like described for Fomr 2 & 3
.
Just let me know if you need some further explainations.

Enter Key not working in button

i'm using button key for my project but this is not work when i push Enter Key.
why 'enter key' not working in this form?
<form action="" method="post">
<input type="text" >
<input type="button" >
</form>
how this is work with javascript, plz help me
i will not sue type="submit"
It seems you want implicit submission:
A form element's default button is the first submit
button in tree order whose form owner is that
form element.
If the user agent supports letting the user submit a form implicitly
(for example, on some platforms hitting the "enter" key while a text
field is focused implicitly submits the form), then doing so for a
form whose default button has a defined activation behavior
must cause the user agent to run synthetic click activation steps
on that default button.
Therefore, the button must be a submit button, not a button in button state:
<input type="submit">
I think an <input type="submit"> is what you want :)
$(form).on('submit', function{
//do whatever you want...
})
<form action="raftel">
<input name="name" type="text"/>
<input name="password" type="password"/>
<input type="submit"/>
</form>

form is submit but values are not passing

When I submit form by using below function it is submitting but values are not passed through this function. I use all functions but nothing found:
document.getElementById("postad").submit();
Form is given below.
<form action="register.php" id="postad" method="post">
<input class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
<input class="button" type="button" name="save" value="Publish" onclick="send();" />
</form>
Your form contains two form controls. Neither will be a successful control (i.e. one that appears in the submitted data), but for different reasons.
Only form controls with name attributes can be successful. Your text input doesn't have a name. (It also doesn't have a default value, so you need to type in it first).
Buttons can only be successful if they are the submit button used to submit the form. Your button isn't a submit button and you use JavaScript to submit the form.
There is no name attribute in your input text fields
<input name="post_title" class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
.........^

Submitting form using button on enter

I have an html form that I want to only submit from a button located outside my form. I am using javascript to perform some verification and do not want the form to submit unless my javascript functions succeed. I found that if I have the button inside the form it will always submit regardless of the javascript, but if I have it outside the form when a user presses enter it simply submits the form. How can I force enter to perform the button javascript instead of submitting?
<form name="form1" action=<?$_SERVER["PHP_SELF"].'?'.$_SERVER["QUERY_STRING"]?> method="post">
<input type="text" maxlength="5" size="5" name="frmZip" value="">
<input type="hidden" name="frmLat" value="200">
<input type="hidden" name="frmLng" value="200">
<input type="submit" disabled="disabled" style="display:none" />
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
EDIT:
Found my solution.
I changed from
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
to
<input type="button" name="frmSubmit" onclick="doClick();" value="Submit">
</form>
This prevented the button from submitting the form so I submitted it in my doClick() via javascript.
EDIT 2:
While this seemed to work for a time, it has stopped catching the enter keystroke. I updated my button to:
<input type="submit" name="frmSubmit" onclick="return doClick();" value="Find Stores">
And always returned false in doClick(). This allowed me to submit the form via javascript once everything had executed.
While this doesn't answer your direct question, you can actually keep the button and simply use your validation on the form submit:
<form onsubmit="return validateForm()">
Then, in your validateForm method, return true or false indicating whether or not the validation has passed.
However to answer your direct question, you can also use the same approach on the submit button which will prevent the form from being submitted.
Update
As pointed out in the comments, an unontrusive solution is often desirable so here's that:
document.getElementById('theForm').onsubmit = function() { return validateForm(); };
Your button inside the form will not submit the form on enter if you add preventDefault...
$("form").submit(function(e) {e.preventDefault();});

Categories

Resources