OnClick action after actual action in h:commandButton - javascript

I have a marketplace application, and in the payment page, there's a h:form with some validations on the fields. I have a h:commandButton to submit the form and perform an action in the back-end.
The code is this:
<div class="form-actions">
<h:commandButton onclick="setTimeout($('#adios').modal('show'),50)"
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
class="btn btn-primary btn-lg"/>
</div>
The modal just displays a message. But I want this action to be performed after the h:form validations are correctly met, or even better, after the action inside the h:commandButton (which by the way is not working, it only works if I remove the onClick)
Any ideas?
EDIT: Thanks to #SRy for his advice, but there's still problems. This is my code now:
<div class="form-actions">
<p:commandButton oncomplete="$('#adios').modal('show')"
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
styleClass="btn btn-primary btn-lg"/>
</div>

You Can use Primefaces commandbutton p:commandButton for easy execution or you can do somthing like this
<h:commandButton
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
class="btn btn-primary btn-lg">
<f:ajax execute="#this" render="#form" onevent=showdlg();/>
</h:commandButton>
JavaScript
function showdlg(data){
if(data.status=='success'){
setTimeout($('#adios').modal('show'),50);
}
}

Related

Javascript Button redirecting to http://127.0.0.1:5000/?

I am new to web technologies, trying to build a basic website.
Technology stack: Python+Flask and HTML+CSS+JS on frontend.
I have a button, from which I am trying to redirect to a relative URL:
Button html:
<div class="form-group">
<input type="submit"
class="btn btn-primary btn-lg btn-block pb_btn-pill btn-shadow-blue"
value="Register"
onclick="approve()">
</div>
Javascript:
function approve() {
window.location.href = '/approve';
}
This is not taking me to: http://127.0.0.1:5000/approve
rather to: http://127.0.0.1:5000/?
Can anyone please guide?
SOLUTION:
Thank you all, this helped: return false
https://stackoverflow.com/a/26518061/4253760
I still have a question, what is this URL with ? mark
http://127.0.0.1:5000/?
Your button is of type "submit". This will submit the form. The form has no URL defined, so it assumes the current document, in your case "/". The question mark in "/?" is followed by the form contents (key/values), in your case, the form is empty (it has no input values, only a button)
You should use input of type "button" or the onclick should read "approve(); return false" to prevent the form from being submitted and instead execute your function
Change your input type to use button
<div class="form-group">
<input type="button"
class="btn btn-primary btn-lg btn-block pb_btn-pill btn-shadow-blue"
value="Register"
onclick="approve()">
</div>
Because you were using submit it would have submitted to the form action rather than your javascript.

Call javascript parameterized Function

I have one Input button control i want to call javascript function with parameter.
parameter is object of my Asp.Net repeater.
here is my Button
<input id="btnAddNew" class="btn btn-primary pull-left" type="button" value="Add More" onclick="AddFileUpload(<%# Eval("PrimaryID")%>)" />
and JavaScript Function is like this
function AddFileUpload(PrimaryID) {
document.getElementById('<%= hdnField.ClientID %>').setAttribute('value', PrimaryID);
}
I assume that your <%# Eval("PrimaryID")%> is returning non-numeric value so this would generate the syntax error.
replace
onclick="AddFileUpload(<%# Eval("PrimaryID")%>)"
with
onclick="AddFileUpload('<%# Eval("PrimaryID")%>')"
I hope this will work fine if not then post your error here.
You can try this
<input id="btnAddNew" class="btn btn-primary pull-left" type="button" value="Add More" onclick="AddFileUpload('<%# Eval(\'PrimaryID\')%>')">
Hope it works for you..

Prevent customer from double submitting order?

I have an ecommerce website that uses jQuery 1.9.1 and Bootstrap 2.3.2
I'd like to prevent customers from double-submitting orders on accident (hitting submit twice).
Any ideas on how to do this?
My input submit is simply:
<input type="submit" class="btn btn-orange pull-right" value="Place Order">
Is there anything I can do to prevent this from occurring? I don't want to hinder other customers, I just don't want folks to submit, wait, get impatient, submit again, and they are double charged for their order. That's sloppy.
Thanks.
Here is a little trick:
<input type="submit" class="btn btn-orange pull-right" value="Place Order" onClick="this.disabled=1">
Disable the button when form is submitted. You can do something like this:
$('.pull-right').click(function() {
// Code to submit the form
$(this).attr('disabled', true);
});
This SO Question might help
How-to-prevent-calling-of-en-event-handler-twice-on-fast-clicks
You can do it like this:
<input type="submit" class="btn btn-orange pull-right" value="Place Order" onclick="$(this).attr('disabled', true);">
Some times you may want to also run a function like: OnSubmit function (or a validation) you can do this:
<input type="submit" class="btn btn-orange pull-right" value="Place Order" onclick="this.disabled=true;OnSubmit(this.parentNode);" />

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

Stop form submission when an html button with onserverclick enabled is clicked in an asp.net web App

I have a button in an asp.net application which submits a form.
<input type="submit" id="sumbit" value="Sign up" runat="server"
onserverclick="sumbit_ServerClick2" class="submitbutton"/>
I have a javascript function which returns true and false. How do i prevent the form from being submitted if the javascript function returns false.
I cant access the form tag as i am using masterpage and the whole contentplacedholder is enclosed within a runat="server" form.
Use the onclick attribute to test the return value of your JS function:
<input type="submit" id="sumbit" value="Sign up" runat="server"
onserverclick="sumbit_ServerClick2" class="submitbutton"
onclick="if (!yourFunction()) return false;" />
Assuming your function is called yourJsFunction, I think you can just use onclick="return !!yourJsFunction();" on the input element, like this:
<input type="submit" id="sumbit" value="Sign up" runat="server" onclick="return !!yourJsFunction();"
onserverclick="sumbit_ServerClick2" class="submitbutton"/>
Use !! in front of the function call to force a boolean value.
--
For ASP.NET Button use onClientClick="return !!yourJsFunction();".
Read more here.
Set the button type to "button" (defaults to submit), this will disable the submit of the form and rely upon the __doPostBack() to handle the wiring up.
<button id="MyButton" runat="server" type="button" onserverclick="MyButton_Click">Submit</button>

Categories

Resources