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/

Javascript turn div into form on button click

I am trying to turn a password row into an input field when the 'change password' button is clicked. I am kind of halfway there already using Jquery. So I have made it so that when you click 'change password' the input field gets added. Also when they click 'back' the original state is shown. If you look on the codepen, you'll notice that after clicking 'back', you can't then click 'change password' again, the jquery doesn't work. Is there a solution to this?
Also I have used jquery 'replaceWidth', is there a better way to do this? I am putting a lot of html into my Jquery and not sure if that's the best way to do it.
Please take a look!
https://codepen.io/liamdthompson/pen/WYwXeK
$("#change").click(function () {
$("#container").replaceWith('<input class="form-control" id="zing" required="required" type="text" value="Change password" id="website_name">');
$(this).replaceWith('<button type="button" id="yeet" class="btn btn-light lighter">back</button>');
$("#yeet").click(function () {
$(this).replaceWith('<button type="button" id="change" class="btn btn-light lighter">Change password</button>');
$("#zing").replaceWith('<div class="" id="container">*********</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountmain" style="padding-top:25px;">
<div class="row">
</div>
<div class="row">
<div class="col">
<h6> Password</h6>
</div>
<div class="col" id="container">
*********
</div>
</div>
<button type="button" id="change" class="btn btn-light lighter">Change password</button>
</div>

This is because your #change on click event is bound to the dom element when the page loads.
To bind events to dynamically created elements, bind to the document using the .on feature, like this.

You have to re-attach the event listener again when you insert the button back in.
Otherwise another solution is to use the derived event on the parent class ie.
$('body').on('click', '#change', function(){});
This will affect any element with Id change that has body in its line of ancestors.

Make a submit <button> work outside of <form> block? [duplicate]

This question already has answers here:
Submit form using a button outside the <form> tag
(15 answers)
Closed 8 years ago.
I want to place a submit <button> outside of a <form> block. How to make a submit that can execute method="post" action="/order/setup" from form block`?
<form id="order-form" role="form" method="post" action="/order/setup">
<input type="text name="first_name" />
</form>
<div class="details-section-button row">
<button type="submit" class="btn btn-block btn-dark right shadow arrow">Next <i class="icn btn-right-arrow"></i></button>
</div>

In browsers that support the new form attribute from HTML 5:
<button form="order-form">…</button>
… but don't. Adjust your design so that form controls are inside the form they are associated with. It doesn't make semantic sense to split them up.

$("form#order-form").submit();
http://api.jquery.com/submit/

Try something like this, giving your submit button an id of submitButton:
<div class="details-section-button row">
<button id="submitButton" type="submit" class="btn btn-block btn-dark right shadow arrow">
Next
<i class="icn btn-right-arrow"></i>
</button>
</div>
Then with jQuery:
$("#submitButton").on("click", function () {
$("form#order-form").submit();
});

Form AJAX send inside a twitter bootstrap modal (Symfony2)

After trying every google and stackoverflow result for this, I've decided to ask for your help.
I'm building a Symfony2 app. Within every view of my app, I'm including a twitter bootstrap modal element, with a form that sends a suggestion/question mail. So, from my base twig template, I include this hidden modal.
Modal showing/dismissing works just fine. Modal contains my form, as desired.
What I'm trying to achieve from here is: AJAX submit of the form, mail sending in the controller, response to the view. With that response being json, and a success function to change html of the modal to "*dismiss_button*" + "Email sent" OR "There was a problem".
Seems fairly simple. Well, after trying most solutions out there, I'm not able to prevent the form from submitting. So I decided to keep it really really simple.
Here, the modal code:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Send your suggestion</h3>
</div>
<div class="modal-body">
{% if is_granted('ROLE_USER') %}<p>We will reply to {{ app.user.mail }}</p>
{% else%}<p>Don't forget to include a reply-to email in your suggestion.</p>
{% endif %}
<form action="{{ path("mgfbc_arrt") }}" method="post" id="arrt">
<div class="control-group">
<label for="username">Text:</label>
<div class="controls">
<textarea id="mail" name="mail" rows="4" style="width:500px;"></textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="butt" class="btn btn-success" value="Send">
</div>
</form>
</div>
And, the JS:
<script type="text/javascript">
$("#butt").on('click', function(e) {
e.preventDefault();
});
</script>
After trying everything, I've reached the point in which THIS javascript does not prevent the form from submitting.
What am I doing wrong?
Thanks in advance.

#gomman Check up the following documentation: http://api.jquery.com/submit/
I think you need to cancel the submit-event of the form element to make it work the way you want.
#Fuser Although delegate() is a bit more readable to me, using on() or delegate() will do the same for this case. Citing jQuery documentation "As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation."

try this:
<form action="{{ path("mgfbc_arrt") }}" method="post" id="arrt">
<div class="control-group">
<label for="username">Text:</label>
<div class="controls">
<textarea id="mail" name="mail" rows="4" style="width:500px;"></textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="butt" class="btn btn-success" value="Send">
</div>
</form>
<script type="text/javascript">
$("#arrt").submit(function(e) {
e.preventDefault();
});
</script>

Don't use the on() function, instead use a delegate, try this:
$("#arrt").delegate("#butt", "click", function(e){
e.preventDefault();
});

p:commandbutton is not calling manage bean method

I have the follow modal form in Bootstrap, where the user insert data for add a new line but the p:commandbutton never executes lineaBean.insertar() and I don't know what it's doing this when I have a delete modal form that looks equal and works like a charm... any ideas? Here is my code:
<!-- Bootstrap trigger to open modal -->
<div class="hide fade modal" id="insertar-linea">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Alta de linea</h3>
</div>
<h:form class="form-horizontal well" id="form-insertar-linea">
<div class="modal-body">
<fieldset>
<h4>Número: </h4><h:inputText id="numero-form" class="validate[required]" value="#{lineasBean.numero}"></h:inputText>
<h4>Fecha Validacion: </h4><h:inputText id="fecha-form" class="validate[required]" value="#{lineasBean.fechaFact}"></h:inputText>
<h4>Publico: </h4>
<h:selectOneRadio id="publico-form" value="#{lineasBean.publico}">
<f:selectItem itemLabel="SI" itemValue="y"/>
<f:selectItem itemLabel="NO" itemValue="n"/>
</h:selectOneRadio>
</fieldset>
</div>
<div class="modal-footer">
Cancelar
<p:commandButton id="okInsertar" onclick="if($('#form-insertar-linea').validationEngine('validate')===false){return false;}"
styleClass="btn btn-primary ok" value="Ok" action="#{lineasBean.insertar()}"
oncomplete="checkCRUD(xhr, status, args)"/>
</div>
</h:form>
</div>

Finally I found the solution, I was setting up 'fechaFact' on my bean as Date type when I was passing a String... so I make a SimpleDateFormat for parse the String into Date in the method of Managed Bean.

Sounds similar to Unable to execute Backing bean method with the answer "When i made it Session scoped its working Fine."
Does this work for you, too?

try using actionListener instead of action to call the method when press p:command button