Conditionally active click event on js button - javascript

I need a function on a button only if a bool conditional is met. Currently I have it implemented similar to
<button class="btn btn--primary pull-right" type="submit" data-bind="click: myBoolFlag ? $root.myFunction : function(){}"/>
I am using this button as my generic submit button on multiple pages, but on two of them it merely needs to add in a small function on click ontop of its normal submit functionality.
I feel as though doing this via an anonymous empty function isn't the best route, and am looking for cleaner alternatives.

In this situation I usually do something like so..
HTML
<!-- I gave it an ID to make it unique -->
<button id="myButton" class="btn btn--primary pull-right" type="submit"/>
JavaSCript/jQuery
//this handles the click function now
$('#myButton').click(function() {
if(condiion1){
do this;
} else {
do that;
}
});

Try returning true if you don't want to a function to be executed on click
<button class="btn btn--primary pull-right" type="submit" data-bind="click: myBoolFlag ? $root.myFunction : return true;"/>
Other option would be null
data-bind="click: myBoolFlag ? $root.myFunction : null"

Related

How do I stop the second onclick function from happening while the first function is executing?

I'm currently working on a validation feature. If the form fails to validate, it won't be able to submit, hence, I need to figure out a way to prevent the submitFilloutform() from happening.
<button
id="submit"
name="submit"
type="submit"
class="btn btn-warning"
style="float: right;"
onclick="validateForm(), submitFilloutform()"
>Submit</button>
Any help would be greatly appreciated. Thanks!
EDIT: I came back to this as someone upvoted it (thanks). One consideration to add it that inline JS may be a bad idea in the case that you want to lock down potential for cross-site-scripting attacks. Part of the defence of that is CSP headers and one strong contender to set is a rule that bans all inline JS. So, if you plan to use CSP you might want to move the JS below into an onclick listener for id=submit in a separate JS file.
Original answer.
onClick is executed like a function, so can include JS logic. Such as...
<button
id="submit"
name="submit"
type="submit"
class="btn btn-warning"
style="float: right;"
onclick="if (validateForm()){ submitFilloutform();}"
>
Submit
</button>
This assumed that validateForm() returns a boolean value, of course.
Why not invoke the second function at the end block inside the first function?
<button
id="submit"
name="submit"
type="submit"
class="btn btn-warning"
style="float: right;"
onclick="validateForm()"
>Submit</button>
function validateForm() {
// xxx
submitFilloutform()
}
function submitFilloutform() {
// xxx
}

How to click on button by onclick method?

I am use puppeteer for get data from page. But all button on webpage have same type and class - only difference is onclick attribute. I need click on different button to open tray with information I need.
For example:
> <button type="button" class="btn btn-primary"
> onclick="OpenTray(10002)">More</button>
> <button type="button" class="btn btn-primary"
> onclick="OpenTray(10003)">More</button>
> <button type="button" class="btn btn-primary"
> onclick="OpenTray(10004)">More</button>
So how I can tell puppeteer only click on button with onclick attribute for example OpenTray(10002)
You should be able to achieve this with a slightly more complex selector:
const button = await page.waitForSelector(`button[onclick="OpenTray(10004)"]`)
There are a lot of attribute selectors you can use to match the values of the attributes e.g. contains, starts with, ends with.

JQuery intercept click button

I have this script
$('#addDescriptionButtonId').click(function(){
alert ('ee');
});
and this button
<button id="addDescriptionButtonId" class="btn btn-primary" type="submit">Add Description</button>
expecting the alert when I click, but nothing happens when I click
Make sure your script is either running in $(document).ready() or is at the end of your <body>.
Need to add jQuery library
$('#addDescriptionButtonId').click(function(){
alert ('ee');
$('#productFormId').attr('method', 'post');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addDescriptionButtonId" class="btn btn-primary" type="submit">Add Description</button>
Well, If your expecting not to add any JQuery library and want the alert to work on button click then you might want to use native JS click events on button as shown below.
Javascript:
var element = document.getElementById('addDescriptionButtonId');
element.onclick = myFunction;
function myFunction() {
alert("ee");
}
HTML:
<button id="addDescriptionButtonId" class="btn btn-primary" type="submit">Add Description</button>
Hope this helps you.

No form validation on previous button

I have a multiple pages form where people can press next and previous. The form validates when trying to click next but it also validates when they click previous, which shouldn't be the case.
I've searched on Google and used some solutions provided by different websites such as class="cancel" or formnovalidate="formnovalidate" but nothing has worked for me so far.
These are my two buttons who are both in a form
<button data-role="prevbutton" class="btn btn-secondary pull-left">Previous</button>
<button data-role="nextbutton" class="btn btn-primary">Next</button>
There is no simple JS code that calls a function but more like this:
flow.isBelgianResidentChangeHandler = function(isBelgianResident) {
if (isBelgianResident) {
$('[data-role="nextbutton"]').attr('disabled', false);
} else {
$('[data-role="nextbutton"]').attr('disabled', true);
} };
It's hard to know without seeing your JavaScript code, but it could be because the default behavior of button elements in a form are to be submit buttons. So, whichever button you pressed, it would still submit your form. If this is the problem, then adding type="button" to your previous button will fix it.
<button data-role="prevbutton" type="button" class="btn btn-secondary pull-left">Previous</button>

Validate btn-radio button on click

I am using Angular UI btn-radio directive to show 2 different buttons:
<label class="btn btn-default" ng-model="mode" ng-change="toggleMode()" btn-radio="'Mode1'">Mode1</label>
<label class="btn btn-default" ng-model="mode" ng-change="toggleMode()" btn-radio="'Mode2'">Mode2</label>
And this works well, however I want to introduce some kind of validation so that when one of these buttons are clicked they became active only if validation is passed. For example, If I click on Mode2, that button should be active only if some condition is satisfied. The problem is that by default active class is added on every click, and btn-radio directive stores the state active. Is there a way to get around this ?
You can look at my answer in this plunker
I just removed the "ng-model",made my own condition to add "active" on the button and created a custom click that will check the condition before switching.
<div class="btn-group">
<label class="btn btn-default" ng-class="{active:mode==='Mode1'}" ng-click="activateMode('Mode1')">Mode1</label>
<label class="btn btn-default" ng-class="{active:mode==='Mode2'}" ng-click="activateMode('Mode2')">Mode2</label>
</div>
And the activateMode function :
$scope.activateMode = function(modeName){
//I don't allow to switch mode if the checkbox isn't checked.
if($scope.changeMode){
$scope.mode = modeName;
}
}
Hope it helped.

Categories