Im working with formvalidation.io and have created a form and want to submit the form with a button that is not contained within the form element. Quick example below:
<form id="form1">
<input name="test" type="text" required />
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
Pressing the button will validate the form, but will not continue to submit the form. Including the same button inside the form element will work perfectly fine. I'm assuming this is a bug in the formvalidation.io library, but I want to post here to make sure I'm not doing something stupid first.
Any thoughts?
whoops, thought i already answered this. i had it confirmed on the formvalidation.io forums that this is a work in progress with their library so this is the workaround i came up with.
// select all buttons which have the form attribute
$('[form=' + $(this).attr('id') + ']').click(function (e) {
// prevent default functionality
e.preventDefault();
// execute form validation if necessary
if (form.data('formValidation') != null) {
$('#' + $(this).attr('form')).data('formValidation').resetForm();
$('#' + $(this).attr('form')).data('formValidation').validate();
}
// submit your form however you normally submit it
form.ajaxSubmit(options);
});
Related
In Bootstrap v5, how do I submit a form via Post method first, and then after the form is submitted, show the form is being processed? I've found lots of examples for Bootstrap v4 and jQuery but Bootstrap v5 does not have jQuery and the documentation says there could be issues with jQuery.
Here is a striped down version of my form:
<form action="" method="post" id="reqform">
<div class="input-group">
<div class="form-floating mb-3">
<input class="form-control " id="nameInputId" placeholder="name" name="name" aria-describedby="basic-addon1" type="text">
<label for="nameInputId">Name</label>
</div>
</div>
<button type="submit" id="submitBtnId" class="btn btn-primary">Submit</button>
</form>
I tried this in a script block at the bottom of the file:
//when click submit button, show loading
submitBtnElm = document.getElementById("submitBtnId")
submitBtnElm.addEventListener("click", function () {
// disable button
submitBtnElm.disabled = true;
//disable rest of form
document.getElementById("nameInputId").disabled = true;
//add spinner to button and change text to "loading'''"
submitBtnElm.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...'
});
In Chrome on CentOS 7, the form never gets submitted to the backend; I just get the loading button. On Firefox, the form gets submitted but the name field does not have a value on the backend. If I strip out this JavaScript, everything works fine.
I tried the form field onsubmit but I get the same results:
<form action="" method="post" id="reqform" onsubmit="return disableForm(this);">
I'd like to first post to the backend server and then after the post, show the loading button and disable the other fields. I want a way that the JS does not interfere with what is sent to the backend server. In other words, I'd like to be able to submit to the backend server when JS is disabled. I've found people asking the same with jQuery but none of them work for me.
Update:
I also tried:
submitBtnElm.addEventListener("submit", function ()
I setup a breakpoint on the backend server. The JS does not execute while the server is processing the information. As soon as the form gets submitted to the server, I want to change the button and form so the user can not do anything.
Update 2
I found this article that wraps the code that disables the form in a setTimeout:
https://chasingcode.dev/blog/javascript-disable-submit-button-form/
For me, it works in both Chrome and Firefox on CentOS 7. I don't have a mac to test. Here is my updated code that worked:
submitBtnElm = document.getElementById("submitBtnId")
submitBtnElm.addEventListener('click', function(event) {
setTimeout(function () {
event.target.disabled = true;
}, 0);
});
Do any Javascript gurus know if this is a good cross browser solution? If not, what is? The next best solution I found was where the functional button is swapped out with a non-function one that said something like 'loading'.
you can use Javascript, create a function that triggers when the form is summited. you can add a disabled class to the form. with a simple, if statement.
I am confused about some behaviour on my webpage where I use both submit action and onclick event on the Save-button in a form. It works fine for me, but it seems that some users have trouble to save the information in the form.
I have simplified the form here:
<div class="container">
<form id="myform" action="action.php">
<input "nameinput" type="text" name="name">
<button id="savebutton" type="submit" >Save</button>
</form>
</div>
Now... I have also added an jQuery section that shall hide the form when the save button is pressed:
$(".container").on("click", "#savebutton", function(){
$("#myform").slideUp("slow", function() {
$(this).remove();
});
});
So: When the user presses the Save-button it shall both send the name to action.php and trigger the click-event to close the form.
This works perfectly fine for me, but I wonder if this design can cause troubles on some browsers, especially older ones? I have got bug reports from users where the form is closed, but no data is saved (i.e. action.php isn't called). Is it possible that the form "dissapears" before the form can submit the data?
Here the default behavior of the submit button is to send the data to action.php. Definitely, it is going to load the page again when users click the submit button in that case your javascript code will not run.
I will recommend you to use JQUERY AJAX Documentation
I have a web-form written in ASp.Net MVC5 which is used to gather some details from the user. However, before I get them to submit the form, I want them to have the option to look at another web-page (in a new window or tab) which gives them more information if they need it prior to submitting the page. To that end, on the web-form, I have a form with the following buttons:
<form action="/Application/MyAction" method="post" id="myForm">
// various fields ...
<button onclick="getMoreInfo()">More Information</button>
<button type="button">Submit Form</button>
</form>
Then, at the bottom of the page I have the following javascript defined:
<script>
function getMoreInfo()
{
var urlToUse = 'http://some-other-page.html';
window.open(urlToUse);
return false; // trying to stop the form submission from occurring
}
</script>
My problem is that when this "More Information" button is clicked, it has the effect of submitting the form [which I don't want to do yet] - since there is a separate submit button for doing that task. Is there a way to use a button to jump to another page without actually submitting the current form?
thanks heaps,
David.
I found that answer #3 at this question helped me:
How do I cancel form submission in submit button onclick event?
My solution was to change the code thus:
I changed the button code to look like this:
<form action="/Application/MyAction" method="post" id="myForm">
// various fields ...
<button id="moreInformationButton" >More Information</button>
<button type="button">Submit Form</button>
</form>
And then I changed the javascript to look like this:
$("#moreInformationButton").click(function (event) {
event.preventDefault(); // This stops the submit form being triggered
var urlToUse = 'http://some-other-page.html';
window.open(urlToUse); // open the help page
});
This allowed me to open up another window or tab with more information without actually submitting the form.
I have a simple form, where I have a form element with one input type and button.
When I am click button, I am trying to get form data using
var fData = $("#test").serializeArray();
However for some reason, I am not able to get any values of form.
What could be the reason for this?
JSFiddle Demo
There are several issues. Firstly, the input has no name attribute, so it cannot be serialized. Secondly, you create the variable called fData, but log fdata - JS is case sensitive. Finally the form is being submit in the usual method when the button is clicked which means processing will be prevented after the first alert. To prevent this you can change the button to be a standard type, instead of a submit button:
<form id="test" method="POST">
<p>
<input id="val" name="foo" />
</p>
<button class="k-button" id="rset" type="button">submit</button>
</form>
Example fiddle
Or alternatively you can set the code to run under the submit event of the form, and use preventDefault to stop the standard form submission:
$("#test").submit(function (e) {
e.preventDefault();
alert('ok');
var fData = $(this).serializeArray();
alert('rData ' + fData);
});
Example fiddle
Interesting bug here that seems to be limited to IE and Webkit.
I have a basic form setup:
<div id="output">Form output is displayed here</div>
<form id="myForm" action="#" method="post">
<input type="text" name="username" id="usernameInput" />
<input type="submit" value="Submit" />
</form>
Now if I just submit the form through a normal page refresh, the next time I go to type text into the input field, I will get the browser's default auto-suggest dropdown (this is the intended behavior). However, if I highjack the form submission behavior in order to do an AJAX submit:
$('#myForm').submit(function () {
$('#output').text($('usernameInput').val());
return false;
});
Now when I submit the form, the output div updates, but the previous values that I input into the form aren't stored and no suggestions will be made when you type.
Does anyone have any creative solutions to this problem? Maybe an (gulp) iframe?
IE and WebKit only remember values that were submitted normally, and since you are submitting it through AJAX, those engines do not remember the values. Instead of an iframe, I would use a jQuery plugin for the autocomplete, like this one. Of course, with that solution, you will need to maintain a listing of what a user has typed in the past, which shouldn't be too hard.
test with these modifications in controlling submit:
$('#myForm').submit(function (e) {
e.stopPropagation();
$('#output').html($("#usernameInput").val() + "<br />");
});