whenever i click on submit button it fires alert("empty username") but goes a head and directs me to checklogin.php...how can i avoid that and let it remain on the page unless the field is not empty?
</body>
</html>
<script type="text/javascript"></script>
function RequiredFields(){
var username=document.forms["login"]["username"].value;
if (username==""||username==null){
alert("empty username")
document.login.username.focus();
if(document.all||document.getElementById){
return false;
}
}
}
</script>
<form action="checklogin.php" method="POST" onSubmit="RequiredFields()">
Username<input type="text" name="username"/>
Password<input type="password" name="password"/>
<input type="submit" value="Login" />
</form>
</body>
</html>
in the submit input you can add the event handler of onsubmit like this:
<input type="submit" value="submit form" onsubmit="return RequiredFields();"/>
the RequiredFields will return false if not all the required fields are full and the submit process will stop.
When you change your submit to this it won't submit if RequiredFields returns false.
<input type="submit" value="Login" onsubmit="return RequiredFields();"/>
Use this code
<input type="submit" value="Login" onclick="return RequiredFields()" />
I think this might work.
function xyz(event)
{
event.preventDefault(); // while the function returns false
}
also you may use HTML5 attribute required to avoid javascript overburden.
<*input type="" required>*
Related
I have a submit event that use native POST (non-ajax).
<form method="post">
<button type="submit" value="submit"></button>
</form>
How can I prompt the user when the user clicked on the submit button? if the user clicked confirm, then only it will continue.. I know I can do this with ajax, but is it possible to do it with the native post too?
You can add a confirm() to the submit event of the form, and return its value to the anonymous function as follows (using jQuery):
$('form').on('submit', function() {
return confirm('Are you sure?');
});
jsFiddle Demo
Just do it
<form onsubmit="return confirm('Are you sure?')" />
Although this is not the recommended way but it will do what you want
<form method="post" onsubmit="return confirm('Do you really want to submit');">
<button type="submit" value="submit">Submit</button>
</form>
function submitForm() {
var r = confirm("Do you want to submit the form?");
if (r == true) {
document.getElementById("mainForm").submit();
} else {
return false;
}
}
<html>
<body>
<form id="mainForm" method="post" onsubmit="submitForm()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Yes, it's possible.
<form id="f" action="demo_form.asp" onsubmit="return false">
Enter name: <input type="text" name="fname">
<input type="submit" onclick="t()" value="Submit">
</form>
<script>
function t() {
if(confirm("Yo")){
var form = document.getElementById("f")
form.submit()
}
}
</script>
I run into absolutely wierd Chrome's behavoir. Below is the code
<form method="post" id="form" accept-charset="UTF-8" action="/lalala">
<input type="submit" />
<input type="text" name="submit" value="Post this" />
</form>
<script>
setTimeout(function(){
var forma = document.getElementById("form");
console.log(forma.submit);
forma.submit();
},30000);
</script>
it prints to Chrome debug window
<input type="text" name="submit" value="Post this">
Uncaught TypeError: object is not a function
i.e. document.getElementById("form").submit is an input, but not submit callback!!
Is it possible to submit this form keeping input name=submit?
Is it possible to submit this form keeping input name=submit?
I believe, the answer is NO.
I run into absolutely wierd Chrome's behavoir.
I could find the problem in Firefox too.
The moment you use the key word submit as either the name or id of an element within a form, the form.submit turns in to an object referring the corresponding node instead of the function to submit the form.
Please refer the JSFiddle
<form method="post" id="form" accept-charset="UTF-8" action="/lalala">
<input type="submit" />
<input type="text" name="submit" value="Post this" />
</form>
var form = document.getElementById("form");
console.log(typeof form.submit);
OK I've found the solution:
<input id="submit" type="submit" />
<script>
var button = document.getElementById("submit");
button.click();
</script>
I have many forms like the following on the page. Now I want change the form action based on which submit button the user clicked (and of course submit the form)
<form action="/shop/products.php" data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
I tried with
$(".obtn").click(function() {
$(this).parent().parent().attr("action", "/shop/products.php");
});
$(".oEbtn").click(function() {
$(this).parent().parent().attr("action", "/shop/extras.php");
});
but the form is always submited to products.php. Can you tell me what's wrong?
Instead of setting the action attribute on the form itself, consider setting formaction attribute on each individual input element.
Docs: http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input formaction="/shop/products.php"
name="submit" class="obutn" type="submit" value="Order" />
<input formaction="/shop/extras.php"
name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
There are two typos:
obtn instead of obutn
oEbtn instead of oEbutn
Another suggestion is to use closest("form") to get the form that contains the clicked button.
$(".obutn").click(function() {
$(this).closest("form").attr("action", "/shop/products.php");
});
$(".oEbutn").click(function() {
$(this).closest("form").attr("action", "/shop/extras.php");
});
$("form").on("submit", function () {
alert($(this).attr("action"));
});
JSFIDDLE
Capture the submit event and determine which button was clicked. From that, you can change the action of the form.
Here's a link on how to do that.
How can I get the button that caused the submit from the form submit event?
Also, don't give the form the action until the click happens at all, it is superfluous.
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
What if you try it out with a switch instead? Something like:
<input name="submit" id = "1" class="obutn" type="submit" value="Order" />
<input name="submit" id = "2" class="oEbutn" type="submit" value="Extras" />
And then in JavaScript we have:
//param: The Id attr of the button that was clicked
function postTo(id){
switch(id){
case 1: postProducts();
break;
case 2: postExtras();
break;
default: //Do something else
}
}
Just an idea. Haven´t tested that yet, but maybe it could be helpful. I hope so.
This is my Html code:
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
function logiin()
{
name_sent = document.getElementById('username').value;
pass_sent = document.getElementById('pass').value;
$.post(
'login.php',
{
name: name_sent
},
function show(data) {alert (data); }
);
}
</script>
</head>
<body>
<!--<form>-->
Username: <input type="username" name="username" id="username"> <br>
Pass: <input type="password" name ="pass" id="pass"> <br>
<input type="submit" onclick="logiin();">
<!--</form>-->
</body>
It works with ajax and JQuery and works very well, too! :) But if i add form tag it doesn't work! why.?
It's not working because, when contained in a form, the submit button will try to submit the form.
The easiest way to prevent that from happening is to add return false; to the onclick handler:
<input type="submit" onclick="logiin(); return false;" />
The better way, though, would be to add the handler to the form itself (in case the user submits the form another way):
<form onsubmit="logiin(); return false;">
<!-- Form elements here -->
</form>
Just disable submit. If there is no button with type as submit, the form won't be submitted, unless you do it in your JavaScript code explicitly.
<body>
<form>
Username: <input type="username" name="username" id="username"> <br>
Pass: <input type="password" name ="pass" id="pass"> <br>
<input type="button" onclick="logiin();">
</form>
</body>
Probably because you are using an input button of type submit. Try using input of type button.
<input type="button" onclick="logiin();">
A button of type submit will automatically try to submit the form using post. See w3c Schools for more information.
I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}
You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.
document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">
Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};
No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.
You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}
My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.
I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />
You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>