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.

Is there a way I can prevent a function to be restored on page refresh?

I know how to send a form without page refresh with jQuery. That is not what I'm about here. I just wanted to point that out. I have a button when onclick() will display a form and a hidden link. The problem I'm facing is when the form is being submitted the page refresh so the hidden link returns to initial state which is hidden.
Is there a way I can prevent a function to be restored on page refresh? That's what I'm interested to know. But if the best way to do this is by preventing the form to refresh I will do it. I just wanted to know if I could do it another way for knowledge sake. I'm trying to learn new ways instead of always doing same old jQuery stuff.
html
<button id="showOwn" type="button" onclick="showHiddenForm();" >
I'm a returning client</button>
<div id="hiddenForm" style="display:none;">
<form method="POST" action="form.php">
<input type="submit" name="validate_customer" value="Confirm Identity">
</form>
<a id="hiddenLink" href='other_page.php>Continue as Roger Rabbit</a>
</div>
script
function showHiddenForm(){
//show hidden form
document.getElementById("hiddenForm").style.display='block';
}

Use localStorage:
window.onload = () => {
if( localStorage.getItem("show") )
showHiddenForm();
};
function showHiddenForm(){
localStorage.setItem("show",true);
//show hidden form
document.getElementById("hiddenForm").style.display='block';
}

I just wanted to know if I could do it another way for knowledge sake.
Store a flag in local storage (or session storage) (spec | MDN) and on page load, use the presence/absense of that flag to determine whether to hook up the function (or generally, to do whatever it is you want to do differently, differently).

HTML input "disabled" attribute not working in Bootstrap modals

I have a webpage with an "edit" form that appears in a modal dialog using Bootstrap.
When the form appears, I would like one of the input fields to be disabled at first, and to be enabled if the user clicks a checkbox.
The problem is, my browser (Chrome) is not reflecting the disabled attribute for any form element within the modal dialog. Any form element outside the modal works fine.
This also works fine on another webpage I have with the exact same logic. It is only misbehaving on this page.
I have run the entire page source through the W3 Validator for HTML5 and get no errors back.
Code for the input element:
<form role="form" id="frmEdit" action="group_edit.php" method="post">
<!-- ... -->
<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled />
<!-- ... -->
</form>
I even tried to brute force disable it with jQuery on document ready; this does not work:
$(document).ready(function() {
$("#txtEditAlternate").attr("disabled", true);
// ...
});
The only thing that does work when it comes to disabling the text field is when the checkbox is checked and then unchecked:
$("#chkbox").click(function() {
$("#txtEditAlternate").attr("disabled", !$(this).prop("checked"));
});
Although that kind of defeats the purpose, since the text field is supposed to be disabled until the checkbox is checked.
I have read that simply including disabled with no value is valid HTML5 (the validator did not even warn about this), and it works elsewhere.
I have tried everything I can think of, and can only speculate that it has something to do with the Bootstrap modal functionality. But like I said, the same logic works perfectly on another webpage I have.
And yes, I know Chrome likes to cache things. I have "hard-refreshed" many times, does not change anything.
Any suggestions?

try to use disabled="disabled":
<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled="disabled" />

Use readonly attribute instead of disabled.

use prop instead of attr
$("#txtEditAlternate").prop("disabled", true);

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

Copying a search button from one site to another: How does this search button work, and how can I reproduce its action?

I have a main site, mainwebsite.org, and a sub-site that uses a different domain, mainwebsite.giftgiving.org that is styled to look the same as the main site so that users do not feel as though they've left the original site.
The main site has a search button, and I need that search button to work on the secondary site. However, I don't entirely understand how the submit function of the search button works, so I'm not sure how to get it working right on the secondary site. Simply copying the html didn't work, which I assume is because I'm either missing some javascript function or because the submit button is trying to post to a page that doesn't actually exist on the secondary site (I had a similar issue with a different website, where a submit button submitted to "../searchpage.aspx" but that page only existed on www.mainsite.org, so secondarysite.org/searchpage.aspx resulted in 'page not found'). As it is now though, I'm not getting any error, the search button simply doesn't do anything.
Here's the HTML from the main site:
<div id="ctl00_pnlSearch002" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_btnSearch002')">
<div class="utilities floatRight">
<ul>
<li class="searchButton"><input type="image" name="ctl00$btnSearch002" id="ctl00_btnSearch002" src="/images/design002/btn_search.jpg" style="width: 30px; height: 22px; border: none;"></li>
<li class="search"><input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" value="Search" onblur="if (value == '') {value = 'Search'}" onfocus="if (value == 'Search') {value =''}"></li>
<li class="paddingL">A+A-</li>
<li class="textsize paddingL">Text Size</li>
</ul>
</div>
</div>
I don't understand how this line works:
onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ct100_btnSearch002')
If I could figure out where the search button is making a call to, I could modify the secondary site by putting the search button inside a form with action="http://mainwebsite.org/?????"

That one line that you don't understand triggers a JavaScript function that in this case likely ends up performing a postback: WebForm_FireDefaultButton() performs a virtual "click" on the named element, in this case, "ct100_btnSearch002".
(There's a copy of the source code to that JS function here, although you can easily disassemble MS's helper JS yourself to see it: http://www.sentia.com.au/blog/fixing-the-enter-key-in-aspnet-with-jquery)
That button very likely performs a postback on the original page, triggering some "OnClick" event of the "btnSearch002" control. Since you've only shown the resulting HTML and not the original .aspx file it came from, or the .aspx.cs file that contains the server-side code that responds to that postback, it's going to be very hard to tell you much more.
But odds are pretty good that you can't simply copy that "search" button from site to site: Copying that markup is copying just the tip of the iceberg, and leaves out the rest of the berg that's holding up that tip.