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.
Related
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've get stuck with such issue. I have a form. When user submits his data, I'm sending some data via post ajax request. On success I set some data to hidden form, which has action pointing to current url subdomain, but in fact to partner site url that is set over CNAME. Then I trigger jQuery submit event on this hidden form, so after response user is on partner site (hidden form has no target attribute). It works fine in any browser except Safari 7 on mac. It just load for infinite time.
Any help is appreciated.
Well, there's not much code. Onsuccess of I run this:
if (response.result === true) {
this.targets.login.$email.val(response.data.data.email);
this.targets.login.$password.val(response.data.data.password);
this.targets.login.$form.submit();
}
My hidden form looks like this:
<form action="http://someurlunderCNAME" method="POST">
<input type="hidden" name="_method" value="POST">
<input type="text" name="data[User][email]">
<input type="password" name="data[User][password]">
</form>
Ok, I've got it myself. The reason was triggering submit on form. And the 'correct' behaiviour is to trigger click on submit input (which, btw, should be added too)
I'm looking for a way to update the webpage I'm working on to act as a report for several different people to pass back and forth. I'm using forms to take in several pieces of data and am wondering how I can make it so that it just immediately adds the content to the divs under the right heading. I'm currently using jquery and append and it looks like it adds the desired input and then immediately removes it. I tried using .live as well and it did not show up at all. Is there a way to make form inputs post to the page without submitting to another page?
Here is my code so far, testing just the element that will be the heading for the issue:
<div class="IssueDiv">
</div>
<form id="newIssue">
<fieldset>
<legend>Add a new important issue:</legend>
<input type="text" id="issue" placeholder="Issue Summary...">
<input type="text" id="issue-client" placeholder="Client...">
<input class="ticket" type="text" id="issueParent" placeholder="Parent ticket..."><br>
<textarea placeholder="Issue details..."></textarea><br>
<button id="addIssue">Add Issue</button>
</fieldset>
</form>
And the jquery:
<script>
$(function(){
$("#addIssue").click(function() {
var $issue = $("#issue").val();
var $issueSum = $("<h3></h3>").text($issue);
$(".IssueDiv").append($issueSum);
});
});
</script>
edit: I'm looking into using AJAX but I'm not sure how to make it so that all of the input data will persist. I am basically looking to make a webpage-style-report that will allow myself and my team to update the entries on the report and they will stay on the report until we are able to take them off by removing a div that encapsulates the individual issue.
I would also like to be able to format the individual pieces here separately, so, for instance, I could add a check-box that says the issue is urgent and format the heading of those to be red. What is the easiest way to have data that persists, can be added into new (div/h/p) elements, and is shown on the main webpage, while also allowing me to update formatting?
Your code appears to add the text and then immediately remove it because your form gets posted and the page reloads, effectively resetting the page to its initial state.
If you just want to add the text to the page without posting the form or executing any server-side processing, you can prevent the form from posting using jQuery's preventDefault(). Note that I have created a submit listener on the form itself, rather than a click listener on the submit button.
$("#newIssue").on('submit', function(e) {
e.preventDefault();
...
});
$(function () {
$("#newIssue").on('submit',function (e) {
e.preventDefault();
var $issue = $("#issue").val();
var $issueSum = $("<h3></h3>").text($issue);
$(".IssueDiv").append($issueSum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="IssueDiv"></div>
<form id="newIssue">
<fieldset>
<legend>Add a new important issue:</legend>
<input type="text" id="issue" placeholder="Issue Summary...">
<input type="text" id="issue-client" placeholder="Client...">
<input class="ticket" type="text" id="issueParent" placeholder="Parent ticket...">
<br>
<textarea placeholder="Issue details..."></textarea>
<br>
<button id="addIssue">Add Issue</button>
</fieldset>
</form>
However, keep in mind that if you're using this to share reports between computers, this will not work. This is only updating the DOM in the current browser and is not doing any data storage or retrieval. If you need the reports to update online, consider using AJAX to post your data to a server-side script without refreshing the page. Then include some sort of timer that refreshes the content (also using AJAX) on a schedule (e.g. every 10 seconds).
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 />");
});