In the HTML page, I have a form that will return false when submit, like:
<form id="form1" action="${formURL}" onsubmit="return false;" method="post" class="formdemotarget">
<input id="text_name" name="text_name" value="text_name" type="text" />
<input type="submit" value="submit">
</form>
Now is it possible to have javascript function to change the form onsubmit function to let the form submit?
You can overwrite the onsubmit property with a new function.
document.querySelector("form").onsubmit = function (event) {
alert("Replaced submit handler");
return true;
};
<form id="form1" action="${formURL}" onsubmit="return false;" method="post" class="formdemotarget">
<input id="text_name" name="text_name" value="text_name" type="text" />
<input type="submit" value="submit">
</form>
It is better not to get into this situation in the first place though. Design your event handlers to handle different situations in the first place.
Related
formValidation() function return false but not preventing form submission
<body>
<script>
function formValidation(){
return false;
}
</script>
<form onsubmit="formValidation()" method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<label for="email">Email:</label><br>
<input type="email" name="email" id="email"><br><br>
<input type="submit" name="submit" value="submit">
</form>
</body>
When i have used return front of formValidation() function it is working
<body>
<script>
function formValidation(){
return false;
}
</script>
<form onsubmit="return formValidation()" method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<label for="email">Email:</label><br>
<input type="email" name="email" id="email"><br><br>
<input type="submit" name="submit" value="submit">
</form>
</body>
Inline handlers like these essentially turn into a function body. Said function is executed when the event is fired.
function theHandler() {
// Attribute string goes here
}
If the function returns false, the event's default action (such as submitting the form) is prevented.
<form onsubmit="formValidation()"
doesn't work because then the constructed function that gets executed doesn't return anything:
function theHandler() {
formValidation()
}
But
<form onsubmit="return formValidation()"
works because then the constructed function is like
function theHandler() {
return formValidation()
}
It's somewhat confusing - and is one of the (many) reasons why you should never use inline handlers. Attach the event listener properly using JavaScript instead.
document.querySelector('form').addEventListener('submit', formValidation);
I'm new in java script.
i want to validate input with type of check box.
i used below code for validation.
<form onsubmit="return checkForm(this);">
<input type="checkbox" name="terms" value="accept" id="accept" />
</form>
function checkForm(form) {
alert('hello');
if (form.terms!=check) {
alert("Please indicate that you accept the Terms and Conditions");
form.terms.focus();
return false;
}
return true;
}
<form name="form1" id="form1" runat="server" onsubmit="return checkForm(this);">
<input class="farsi-font" type="checkbox" name="terms" value="accept" id="accept" style="color: #000" runat="server" />
</form>
however i get alert("Please indicate that you accept the Terms and Conditions");" the form will post to database.and validation just alert to user and didn't prevent form post.any body can help me ?
thank
Not sure where that code came from, but here's how I'd do it:
<input type="checkbox" name="terms" value="accept" id="accept" required />
Note the addition of the required attribute.
document.querySelector('#accept').setCustomValidity('Please accept the terms and conditions');
Now when the user submits the form it will display your message if the box is not checked, the form will not submit. You can test this by placing a console.log or debugger statement in your submit handler:
// Note that as I said in the comments, attaching the handler
// this way is preferable to using the onsubmit HTML attribute.
document.querySelector('#form1').addEventListener('submit', function(evt) {
console.log('stop the presses!');
});
Try this:
HTML
<form onsubmit="return checkForm(event, this);">
<input type="checkbox" name="terms" id="accept" />
</form>
JS
function checkForm(event, form) {
event.preventDefault();
if (!form.terms.checked) {
alert("Please indicate that you accept the Terms and Conditions");
return false;
}
return true;
}
EDIT:
To submit the form using only html, you can have the following approaches.
With an input inside the form
<form onsubmit="return checkForm(event, this);">
<input type="checkbox" name="terms" id="accept" />
<input type="submit" value="Submit the form" />
</form>
With a button outside it. (Now the form must have an id)
<form id="myForm" onsubmit="return checkForm(event, this);">
<input type="checkbox" name="terms" id="accept" />
</form>
<button type="submit" form="myForm">Submit the form</button>
Html:
<form class="allforms" method="POST" action="/auth/myaccount/personal">
<input type="hidden" name="_method" value="PATCH">
...
</form>
<button id="allsubmit" class="btn btn-info">Continue</button>
jquery:
$(document).ready(function(){
$("#allsubmit").click(function(){
$('.allforms').submit();
});
});
I have 3 forms in my html code like above.
My button is out of any my forms.
How to have one submit button for all my forms. I tried the click function but it doesn't work. Why?
Form submission is a synchronous action, so when you submit a form and then immediately submit a different form in your page, the first form's submission is canceled.
What you can do instead is make sure the forms are submitted asynchronous (using ajax):
$(function() {
$("#allsubmit").click(function(){
$('.allforms').each(function(){
valuesToSend = $(this).serialize();
$.ajax($(this).attr('action'),
{
method: $(this).attr('method'),
data: valuesToSend
}
)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH1">
<input type="submit" />
</form>
<br />
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH2">
<input type="submit" />
</form>
<br />
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH3">
<input type="submit" />
</form>
<br />
<button id="allsubmit" class="btn btn-info">Continue</button>
A few notes
This will not work with forms that have file-uploading (enctype="multipart/form-data")
You need to decide what to do after the submission is done (because nothing in the page will change).
You can't submit forms in stackoverflow-snippets, so don't try to run this here :)
I didn't test it but try this one:
$("#allsubmit").on("click", function(){
$('.allforms').each(function(){
$(this).submit();
});
});
Note that all of your forms have to have class="allforms" attribute
I created HTML form which has two buttons, one for calling java script for form validations and the other one back to the previous page, the two buttons act as submit and validate the inputs.
Here is the code for the form and the button:
<form id = "myform" method="post" action="SearchForCustomer" onsubmit="return validateForm()">
<input type="submit" value="Search" style="width: 100%;" onclick="toggleTable();" />
<input type="button" value="back" style="width: 100%;" onclick="document.forms[0].action = 'homePage.jsp'; return true;" />
</form>
I want the back button to only back whatever the validations was, any suggestions?
Thanks in Advance.
Actually i didnt get your question but why to use input[type=submit] to goto any page (or back)?
It should be:
<input type="button"...
type="submit" will submit form in either case.
You have two buttons of type submit. Have only 1.
<form id = "myform" method="post" action="SearchForCustomer" onsubmit="return validateForm()">
<input type="submit" name = "searchButton" id = "searchButton" value="Search" style="width: 100%;" onclick="toggleTable();" />
<input type="button" value="back" style="width: 100%;" onclick="document.forms[0].action = 'homePage.jsp'; return true;" />
</form>
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>