Develop Reference

Submit form then disable in Bootstrap 5

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.

Can I use both onclick events and submit functionality on a form's submit button?

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

Use form data to update web page

Before I provide a bunch of code I'd like to first find out if what I'm trying to do is even possible.
I've created a web based version of the dice game called PIG using HTML & JavaScript. The user can change some of the game's settings by clicking on a "Settings" button on the main page. This button brings up a modal window containing an HTML form (). I'd like to use the data that the users enters and submits on this form to update various settings on the game's main page.
I chose to use an HTML5 form because was hoping to use the native HTML5 form validation capabilities rather than try and replicate that validation checking logic myself using JavaScript.
So my approach was to use javascript to get the data off the form on submit. I tried two different approaches to get this to work:
1) Using an "onsubmit=function getSettings()" on the tag
2) Using a submit button for the form with an onclick="getSettings()".
With both of these approaches I was able to successfully get all the values from the form on submit and use those values to successfully populate the main game page using the gettSettings() function however when I exit the getSettings() function the webpage values that I updated don't stick...they revert back to the original values regardless of which of these two approaches I use.
I know the values were successfully updated because when I set a break point on the last statement of the getSettings() method I can see that all of the values on the main page have been updated to reflect what was filled in on the form...so I know I'm grabbing all of the data successfully and updating the main page with those values.
I'm puzzled as to why the values that I successfully change on the web page simply revert back to their original value upon exit of the getSettings() function.
Maybe it's just not possible to do what I'm trying to do? And if not does anyone know why given I can see the values are successfully changed before they revert back to their original value. What am I missing?
Again I'm using a Form and collecting the data on submit so that I can leverage the "native" HTML5 form validation capabilities.
Regards.
***** EDIT TO ADD KEY SEGMENTS OF CODE *******
Here is the code HTML Code for the modal form:
<form name="config-settings" onsubmit="getSettings()">
<!-- <form name="config-settings">-->
<span class="errMsg"></span>
<div class="row clearfix">
<div>
<label>Player 1:</label>
</div>
<div>
<input type="text" name="input-name-0" id="input-name-0" maxlength="10" placeholder="Enter name" pattern="^\S+$">
</div>
</div>
<div class="row clearfix">
<div>
<label>Player 2:</label>
</div>
<div>
<input type="text" name="input-name-1" id="input-name-1" maxlength="6" placeholder="Enter name" pattern="^\S+$">
</div>
</div>
<div class="row clearfix">
<div>
<label>Winning Score:</label>
</div>
<div>
<input type="number" name="winning-score" id="winning-score" default="100" placeholder="Enter winning score">
</div>
</div>
<div class="row clearfix">
<div>
<label>Number of Dice:</label>
</div>
<div>
<select name="diceValues" id="dice-value">
<option value=""> - Select - </option>
<option value="dice-1">One Dice</option>
<option value="dice-2">Two Dice</option>
</select>
</div>
</div>
<!-- Below is alt method I used to submit form..yields same results -->
<!-- <input type="submit" value="Submit" onclick="getSettings()">-->
<input type="submit" value="Submit">
</form>
Here are the global variables defined and used in getSettings() method:
// Global variables
var scores, roundScore, activePlayer, gamePlaying, gamesWonCount, playerNames, winningScore, numOfDice, matchScore, msgs;
var player0, player1, score;
var player0Field = document.getElementById('name-0');
var player1Field = document.getElementById('name-1');
var scoreField = document.getElementById('winScore');
Here is the listener for the Settings button on the main web page that brings up the setting modal window containing the settings form:
//*********************************************************
// Open Settings Modal Windows
//*********************************************************
document.querySelector('.btn-settings').addEventListener('click', function () {
// Settings can't be changed if game is actively underway
if (!gamePlaying || roundScore === 0) {
document.querySelector('#modal-settings').style.display = 'block';
} else {
// Make error message visible
msgs.style = 'block';
// Create message to indicate settings successfully updated
msgs.textContent = "Settings can't be updated during game";
msgs.style.backgroundColor = 'pink';
fadeOut(msgs);
}
});
Here is the getSettings() javaScript function (note: there are no local variables defined in this function...they are all defined as global values (first few lines of javaScript app).
function getSettings() {
// Alternative call if I want this function to be called via eventListner
//document.querySelector('.btn-save').addEventListener('click', function () {
console.log("getSettings method called");
player0 = document.forms["config-settings"]["input-name-0"].value;
player1 = document.forms["config-settings"]["input-name-1"].value;
score = document.forms["config-settings"]["winning-score"].value;
// Reset msgs so they will be displayed each time
msgs.style = 'block';
playerNames[0] = player0;
player0Field.innerHTML = playerNames[0];
playerNames[1] = player1;
player1Field.textContent = playerNames[1];
// Set Winning score on UI to value on form
scoreField.textContent = score;
// numOfDice = document.getElementById('dice-value').value;
// Create message to indicate settings successfully updated
msgs.textContent = "Successfully updated settings";
msgs.style.backgroundColor = 'lightgreen';
fadeOut(msgs);
document.querySelector('#modal-settings').style.display = 'none';
}

I don't know exactly what this getSettings() function of yours is supposed to do, but I can try to give you a piece of advice:
Some of the form validation capabilities of HTML5 are not entirely supported on all of the used browsers(some users don't fancy to update their browser). Therefore relying on the "native" validation of HTML5 isn't exactly best practice.
If you want to manipulate the form values in any way before submitting the form I would rather add a listener to the submit button for click events, prevent any other action, make the checks/ manipulation of the form data and then manually submit the form. Anyways, front-end validation isn't entirely safe, so if you're peddling sensitive data it's mandatory that you'll make checks on serverside(if your app uses a server).
To exemplify what I've explained earlier:
document.getElementById("myBtn").addEventListener("click", function(event){
//Stops the form submitting.
event.stopImmediatePropagation();
//Do the checks here.
//Sends the form.
document.getelementById("myForm").sumbit();
);
If you change local variables inside this getSettings() function, the variables will be changed only within the function scope. You might want to read about scope in javascript. (this was just an educated guess).
I hope you find this useful, good luck!

Okay...I finally figured it out! The problem was not a scoping problem but instead and issue with how "onSubmit" works.
The solution involved making two changes:
1) Adding a return statement to the "onsubmit" attribute when calling the "getSettings()" function;
<form name="config-settings" onsubmit="return getSettings()">
2) Returning false at the end of the gettSettings();
return false;
Note: I had previously tried returning true but not false. I was errantly under the impression that returning false value from getSettings() function would disable HTML5 "native" validation and force me to implement all of the error checking myself...which was not what I wanted. It is now my understanding that returning false merely prevents the form from being submitted..but it doesn't disable the HTML5 native validations.
This solution worked perfectly for me because my goal was not to submit the form to the server (as there is no server component here) but merely to use the "native" HTML5 form checking and then update the values on the local web page.
With all of that said I'm still not entirely sure why when I didn't provide the return statement or when I returned true why all of my changes reverted back to their originally value. If anyone can shed some light on why I'd appreciate it.
Cheers

Updating DOM elements using jQuery

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).

Ajax form submit with input type file

I am using ajax to submit a form that browses, uploads and then processes a file using PHP. I hate the standard html input type="file" button (as most people do) so used a trick to click the standard "browse" button from another button (id="fileSelect") that I can eventually customize. Works great in safari and others, but with IE the ajax code line that submits the form does not fire. Other elements of the ajax code are executed (I get the alert("Ajax complete"); at the end), but the "$("#imageform").ajaxForm({target: '#preview'}).submit();" line does not work in IE.
Ajax code:
$(document).ready(function()
{
$('#xfile').live('change', function() // when there is an even on the 'file' element (like file selected)
{
$("#preview").html(''); // clears the preview area
$("#preview").html('<img src="general_images/loading.gif" alt="Uploading...."/>'); // displays the loading
$("#imageform").ajaxForm({target: '#preview'}).submit();
alert ("Ajax complete");
});
});
And HTML Code:
<div>
<button id="fileSelect" onclick="document.getElementById('xfile').click();">Insert Picture</button>
<form style="display: inline" id="imageform" name="imageform" action="upload_file_journal.php" method="post" target="_blank" enctype="multipart/form-data">
<input style="visibility: hidden" type='file' name='xfile' id='xfile' /
</form>

This will not work in IE 9 and older(I think it works in IE 10,11).
The only real option is to use absolute positions to place your upload control on top of your button, then set the opacity to 0.1, then they look like they are clicking a button, but are actually clicking the input, you have to super size the file input to ensure they always click the button part.
Even doing that is a hassle though.
Hope this helps