Show and Hide element (jquery/javascript) - javascript

I have a modal but I don't want to show it unless it ends doing all the validation.
So am I trying to hide it in the beginning and show it if it passes through the validation process..
My code still shows the modal when I click the btnSubmit
$('#btnSubmit').click(function(e) {
e.preventDefault();
$('#creationModal').modal('hide');
//if the flow is not validated
var flowName = $('#flowName').val();
//check if it exists
validateFlowName(flowName);
});
function validateFlowName(flowName) {
if //some validation processes)
{
}
//if passes all validations, show it
else {
$('#creationModal').modal('show');
}
<button type="submit" class="btn btn-rounded btn-success-outline top10" data-target="#creationModal" data-toggle="modal" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>

When page is load, at that time $('#creationModal').hide() will hide your element and then you will click on button $('#btnSubmit').click(function(e) will call. In this function you can check the condition like this :
$('#creationModal').hide();
$('#btnSubmit').click(function(e) {
e.preventDefault();
//if the flow is not validated
var flowName = $('#flowName').val();
//check if it exists
if(flowName) {
$('#creationModal').show();
}
else {
$('#creationModal').hide();
}
});

Remove data-target="#creationModal" data-toggle="modal" line of code from your button, because this line will open modal. Above line is required if you want open modal directly.
<button type="submit" class="btn btn-rounded btn-success-outline top10" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>

try removing the data-target="#creationModal" data-toggle="modal" from your button :
<button type="submit" class="btn btn-rounded btn-success-outline top10" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>

Related

How to stop next page to be loading

In my project, while a particular button is clicked I want to stop the next page appearing. Here is my JavaScript code:
function checkcond() {
check_value=document.getElementById("chkvalue");
if(check_value==null){
alert(check_value);
document.firstform.textview.focus();
return false;
}
}
and button code is:
<form id="payment_form" name="payment_form" action="<?php echo site_url("cont/accept");?>" method="post">
<input id="chkvalue" name="chkvalue" type="hidden">
<button type="submit" id="submit_button" class="btn btn-primary" onclick="checkcond()">
<b>Make a Payment</b>
<span class="fa fa-hand-o-right" aria-hidden="true"></span>
</button>
Here after checking the check_value I want to keep my current page while it is null. How should it be done? Is there any function for that?
My suggestion would be to remove inline javascript
and use like this
document.getElementById('payment_form').onsubmit = function() {
return checkcond();
};
or if you want to use inline method, change onclick method like this
<button type="submit" id="submit_button" class="btn btn-primary" onclick="return checkcond()"><b>Make a Payment</b>

Bootbox Prompt call back function not working as expected

I want the buttons to show-up when user enters the correct string in the prompt dialog. But currently, the call back function gets invoked properly, but for the buttons to be visible, I have to call "checkPassword" twice.
Template:
<div class="form-group" ng-if="showEdit">
<input type="submit" class="btn btn-primary pull-right" value="Add New">
</div>
<button type='button' class='btn btn-primary' ng-click="checkPassword()">Edit</`button>
Script
$scope.checkPassword = function() {
bootbox.prompt("This is the default prompt!", function(result){
if(result == "password"){
$scope.showEdit = true;
}
else{
bootbox.alert("Wrong password");
}
});
}

How to disable a button on click and replace that button with another button with different function using AngularJS?

How to disable a button on click and replace that button with another button with different function using AngularJS?
The following is my button,
<button type="submit" class="btn btn-small btn-default"
ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">
<span class="glyphicon glyphicon-edit"></span> Edit Setting</button>
you can use a state setting, say $scope.showFirstButton=true to control when to show the submit button:
<button ng-show="showFirstButton" type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">Edit Setting</button>
and another button, showing them alternatively:
<button ng-show="!showFirstButton" type="submit" class="btn btn-small btn-default" ng-click="doSomethingElse()">Seccond Button</button>
In the controller method $scope.editSetting() you change the value of the state: $scope.showFirstButton = !$scope.showFirstButton'.
Edit: if you need to revert the state of the buttons, do the same thing in the second method:
$scope.doSomethingElse = function(){
//some cool things happen here, and:
$scope.showFirstButton = !$scope.showFirstButton
}
and this will get back the first button and hide the second.

Customize the cancel code button of the X-editable (AngularJS)

Is that possible when the user add a new row and by clicking on the cancel button(without put any data), the row will be deleted.
Otherwise how can I change the cancel button code, because this one use the default xeditable code of angularJS.(Or maybe how can I call the delete function if the row is empty?)
This is the EXAMPLE.
HTML for the cancel button:
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
You may call your own function. To achieve this you should change your html like this:
<button type="button" ng-disabled="rowform.$waiting"
ng-click="cancelAdvice(rowform, $index)"
class="btn btn-default">
cancel
</button>
As you can see there is a new function with the form and the current index as parameter. In your controller you have to define this function:
$scope.cancelAdvice = function(rowform, index){
console.log(rowform, index);
$scope.removeUser(index);
rowform.$cancel();
}
Now you can do your own stuff and call the form $cancel if you are done.
Alternatively if you look at xeditable.js you'll see that $cancel() internally calls $oncancel() which looks for oncancel attribute on the form and calls the function supplied in it. So instead of handling the form in the controller you could have:
<form editable-form name="rowform" onbeforesave="saveRole($data, $index)" oncancel="removeIfNewRow($index)" ng-show="rowform.$visible" class="form-inline" shown="inserted == role">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>

How to cancel form submit for btn-primary within form-actions of Twitter Bootstrap?

<div class="form-actions">
<button class="btn btn-primary" id="btn-next">Next</button>
<button type="reset" class="btn">Reset</button>
</div>
$("#btn-next").click(function(event) {
$('#tab li.active').next().find('a[data-toggle="tab"]').click();
});
When Next is pressed, form is submitted. How can I cancel it?
demo
Make it an anchor, not a button:
<a class="btn btn-primary" id="btn-next">Next</a>
Just return false from the click handler.
$("#btn-next").click(function(event) {
$('#tab li.active').next().find('a[data-toggle="tab"]').click();
return false;
});
Demo

Categories