Develop Reference

Prevent Double Submission

i have a project on PHP, MySQL and using the CodeIgniter Framework, i have a page where the user submits an order, but the problem is that it takes a while for the system to process it and in the meantime if the user presses the submit button it will be submitted again.
What i am trying to do is to disable the button once it is pressed.
Here is the button code
<div class="row">
<div class="col-md-7">
<!-- begin panel -->
<input type="hidden" name="order_status" value="0" />
<button type="submit" class="btn btn-success saveit saveorderf_"><?php echo "Save";?></button>
<!-- end panel -->
</div>
</div>
What i have tried so far is using the
onClick="this.disabled=true;
but it only disables the button with out the form being submitted.
Any ideas what i might be missing here .
Thanks in advance.

You can replace your code with this:
onclick="this.disabled = true; form.submit();"
the form.submit(); will do the job for you

You can disable the button after form is submitted.
reference: Simplest way to disable button on submission of a form?
$(document).ready(function(){
$('.once-only').submit(function(){
$(this).children('button').prop('disabled', true);
});
});
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<form method="POST" class="once-only">
<input type="text" name="q"/>
<button >Send</button>
</form>
working jsfiddle: http://jsfiddle.net/gKFLG/1/

Submit form after search button is pressed using bootstrap

<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>electronics</li>
<li>movies</li>
<li class="divider"></li>
<li>All</li>
</ul>
</div>
<form method="POST" name="form" action="#">
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" id="query" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</form>
</div>
</div>
</div>
</div>
ISSUE
Everytime I press Go button; I redirect to same page; which I want however by drop down acts funky; like it doesn't replace the 'filter' button with appropriate choosen filter inside dropdown-menu when after the form gets submitted. Here's the code for that. However before I press go button it works as expected. What could be happening?
<script>
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
</script>
JS FIDDLE: https://jsfiddle.net/0e37tvyx/

There is nothing wrong in this. Your fiddle code works fine for all UI change operations. But because your form supports POST method, all your form parameters are submitted as POST request. You have three possible options (may be more than that too) to preserve the state of last chosen filters:
Use ajax request instead of form submit with entire page refresh. In this way you will have to add content from server response in your page; that is search results.
If your content is generating dynamically. I mean to say you are using PHP / JSP / ASP / Any Other Templating Library, you can use that, to update the HTML code based upon the search request, i.e. search_param request param.
The other way is use cookies. When user changes the option in front end preserve the filter option search_param in cookies. And on ready state of document; read those saved cookies if exists or fallback to default option all if not already stored in cookies.
Check out the fiddle for cookie based implementation. Not that I have added cookies plugin of jQuery.
https://jsfiddle.net/ksbora/3w6k171f/2
Note: Cookies has size limitations too and cross site origination restrictions. So, be careful which option you choose.

Javascript: Repeatedly Auto Refresh Webpage with an ON-OFF Buttons

I would like to use Javascript to auto-refresh my webpage while users can choose to turn on/turn off the auto-refresh function with two different buttons (Please be aware that the buttons are using <label> and <input> tag). I have tried my best to write the code but I still do not know how to link up these two codes so that it can function correctly.
Also, if user choose the buttons of auto-refresh ON, I want to keep auto refresh continuously after its first load instead of just auto refreshing only once.
Would you please help me to correct my codes, please? Thank you.
The code for ON and OFF buttons (two individual buttons):
<div class="page-header-actions" data-toggle="buttons" role="group">
<label class="btn btn-outline btn-primary active">
<input type="radio" name="options" autocomplete="off" value="autorefreshoff" checked />
<i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh OFF
</label>
<label onClick="startrefreshon" class="btn btn-outline btn-primary">
<input type="radio" autocomplete="off" value="autorefreshon" />
<i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh ON
</label>
</div>
The code for auto-refresh function:
<script type='text/javascript'>
setTimeout(function(){
window.location.reload(1);
}, 5000);
</script>

Here are a few things you need to do:
Both the input type="radio" should have same name.
Give the 'auto refresh on' button an ID, so that you can reference it easily in JavaScript code (say auto-refresh-checkbox).
Write a reload function that checks if the checkbox is checked
code:
function reloadPage(){
var refreshEnabled = document.getElementById('auto-refresh-checkbox');
if(refreshEnabled.checked) {
window.location.reload(1);
}
}
Then call this function via setInterval
setInterval(reloadPage, 5000);
PS: The checked "auto refresh" radio will lose it's value on page reload, so you might have to save the value using localStorage or something else.

Button 404 on click with Jquery

I'm working to change a button on specific pages. Not just the text that's inside it, but also where it goes. Currently, it's part of a form that is meant to add a product to cart. I need that to change though and simple take the user to the contact form.
The closest I've come is getting it to take users to the contact page, but it appears as a 404. Could this be because of the form's method? The URL matches the contact page exactly and I've tried both the full path and relative path. Here's the code I have so far:
$( document ).ready(function() {
$(".grid-link__meta:contains('$0.00')").html('<strong>Contact Us for Quote</strong>');
$(".product-single__price:contains('$0.00')").text('');
if ( $('.product-single__price').text() == "") {
$("#AddToCartText:contains('Add to Cart')").html('<strong>Get Quote</strong>');
$('#AddToCartForm').click(function(){
$('#AddToCartForm').attr('action', '/pages/contact-us');
});
}
})
The code that's causing trouble is:
$('#AddToCartForm').click(function(){
$('#AddToCartForm').attr('action', '/pages/contact-us');
});
edit: Here's the code that I'm trying to update. :
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<select name="id" id="productSelect" class="product-single__variants">
<option selected="selected" data-sku="" value="20267761543">Default Title - $0.00 USD</option>
</select>
<div class="product-single__quantity is-hidden">
<label for="Quantity">Quantity</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
</div>
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">Add to Cart</span>
</button>
</form>
edit: SOLVED. Thanks to #Barmar for the idea of changing the button's form from POST to GET. There are still some things that get passed in the URL, but the form works fine.

Bootstrap remove modal content issue

I know that this question is a duplicate, but i can't find a matching answer for my problem. I am using boostrap 3.2.0 and I have this modal:
<div class="modal fade popup" id="popupSelect">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">Select meal</h4>
</div>
<div class="modal-body-select">
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select name="selectCategory" class="form-control selectCategory"
id="selectCategory">
<option value="0">Select category</option>
<c:forEach items="${categories}" var="category">
<option value="${category.text}">${category.value}</option>
</c:forEach>
</select>
</div>
</div>
<br>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Meal</label>
<div class="col-lg-10">
<select name="selectMeal" class="form-control idMeal" id="selectMeal">
<option value="0">Select meal</option>
</select>
</div>
</div>
<input type="hidden" value="-1" id="hSelectIndex"/>
</div>
<div class="modal-footer">
Close
<input type="button" class="btn btn-warning buttons btnSaveChanges"
value="Save Changes" />
</div>
</div>
First time when the modal is loaded the content is correct. After closing the modal, every time the loaded content is the one selected first time.
I tried to remove the data content using:
function removeModalContent(){
$('#popupSelect').on('hidden', function () {
$(this).removeData();
});
}
But it is not working! What i am doing wrong?
Every time the select button is pressed the modal is loaded. And i need to clear the content every time the modal is "hidden".

When I work with modals I always prefer to clear any user interaction before poping it up. This is how I do it:
1) Subscribe to button click event in order to show the modal window:
$("#btnSearchCustomer").click(function () {
searchCustomers($(this));
});
2) The function searchCustomers shows the pop-up window.
function searchCustomers(btn) {
btn.attr("disabled", "disabled"); // disables the button to avoid loading data more than once
clearSearchForm(); // clears any user input
// checks if the modal has all the data loaded (to avoid loading on start)
if (!searchForIsLoaded) {
loadSearchForm(); // loads any necessary data from the DB using AJAX
searchForIsLoaded = true;
}
$('#mdlSearchForm').modal('show'); // shows the modal window
btn.removeAttr("disabled"); // enables the button again
}
You need to implement the function clearSearchForm for cleaning any field the user has modified.
3) Subscribe to OK button on modal window and do something with user input
4) Hide modal form
I hope it helps

I'm not entirely clear on what your problem is, but first things first, in Bootstrap 3 the event that is fired when a modal is hidden is not hidden, it is hidden.bs.modal (See Bootstrap Docs, under heading 'Events'). So this...
$('#popupSelect').on('hidden', function () {...
will not fire. Change it to...
$('#popupSelect').on('hidden.bs.modal', function () {...
I'm also not clear why that is inside a function called 'removeModalContent'. Really you want to set up the event handler on load. What you would have to do in your current case is call that function just to set up the event listener.
Like I said, not entirely sure on your particular circumstances/problem so if this doesn't help or I am missing something let me know and I'll have another look.