Bootbox Prompt call back function not working as expected - javascript

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");
}
});
}

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>

Show and Hide element (jquery/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>

function is not defined at HTMLButtonElement.onclick

I want to call the function DeleteRow and EditRow on click of Delete Button and Edit Buttton.
<button style="margin-right: 5px;" type='button' onclick='return EditRow(#i)' id='#editrow' class='btn btn-primary btn-sm pull-right'><i class='glyphicon glyphicon-edit'></i> </button>
<button style="margin-right:5px;" type='button' onclick='return DeleteRow(#i)' id='' class='btn btn-danger btn-sm pull-right'><i class='fa fa-times-circle'></i> </button>
I have also made functions on my JavaScript file but I am getting this "undefined Error function error".
JavaScript Function here
<script type="text/javascript">
function DeleteRow(id) {
debugger
//logic here
return false;
}
function EditRow(id) {
//logic here
return false;
}
</script>
I have got similar error before but at that time I only changed the function name in onClick at html and changed the function name at JavaScript but now no matters what I rename the function, I am getting the same error.
Can anyone explain why I am getting this error
Your code works if you make sure that your JS is defined before your buttons (or as long as you use some DOM ready event).
Also, make sure #i renders the right value. I don't recognize this pattern...
function DeleteRow(id) {
console.log('Delete ' + id);
return false;
}
function EditRow(id) {
console.log('Edit ' + id)
return false;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<button type='button' onclick='return EditRow(1)' id='#editrow' class='btn btn-primary btn-sm'><i class='glyphicon glyphicon-edit'></i> </button>
<button type='button' onclick='return DeleteRow(1)' id='' class='btn btn-danger btn-sm'><i class='fa fa-times-circle'></i> </button>

bootstrap buttons onclick events

I have 2 bootstrap buttons, I is a direct link to another page on the website and the other one I want to activate a javascript onclick event. I have no problem with a basic link but when adding it to a button it doesnt seem to work? I have included the code I am using with the link thats works but the button doesnt.
The code is :
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
Are you already registered?
<a href='login' button type='button' class='btn btn-block btn-success'><span class='glyphicon glyphicon-user'></span> Login</button></a>
<div class="spacing3"></div>Not yet?
<button id='next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>
</div>
</div>
Login here
And the js for the button is
$(document).ready(function() {
$('#btn-next').on('click', function() {
$('#loginbox').hide(); $('#1box').show();
}
      
   
change this
<button id='next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>
to
<button id='btn-next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>
as you are applying event on btn-next ID $('#btn-next').on('click'
Change your code to:
$(document).ready(function() {
$('#next').on('click', function() {
$('#loginbox').hide();
$('#1box').show();
})
});
Acyually u r using wrong id.
$('#btn-next')
should be
$('#next')
Another solution could be, change your id from html like:
<button id='btn-next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>
And then jquery as:
$(document).ready(function() {
$('#btn-next').on('click', function() {
$('#loginbox').hide();
$('#1box').show();
})
});

javascript validation on Submit button

Want to use javascript validation to work when i click submit button. What happens now is even if i enter a low value the value submits. but i need to check the validation before i click submit...
This is the Javascript:
$(function () {
$("#newMonoReading").on('focusout', function () {
var str = "";
var initialMonoReading = $('#InitialMonoReading').val();
var newMonoReading = $('#newMonoReading').val()
if (~~newMonoReading < ~~initialMonoReading) {
$('#MonoErrorMessage').text("New Mono Readings must be MORE than existing");
$('#MonoErrorMessage').show();
} else {
$('#MonoErrorMessage').hide();
}
});
});
Now on my form, you can see the input type (Submit)
<div class="modal-footer">
<input type="submit" value="Submit New Readings" class="btn btn-primary">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
How do i get the JavaScript function to the submit button, so when i enter submit it wont work because i have entered a low value.
function validateForm() {
var str = "";
var initialMonoReading = $('#InitialMonoReading').val();
var newMonoReading = $('#newMonoReading').val();
if (~~newMonoReading < ~~initialMonoReading) {
$('#MonoErrorMessage').text("New Mono Readings must be MORE than existing");
$('#MonoErrorMessage').show();
return false;
} else {
$('#MonoErrorMessage').hide();
}
}
This example will clear things
FIDDLE
<form onsubmit="return validateForm()" method="post">
<div class="modal-footer">
<input type="submit" value="Submit New Readings" class="btn btn-primary">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
You don't actually want the validation on the submit button, since there are other ways to submit a form. You actually want the validation the the form's onsubmit handler.
Now, that said, you haven't shown enough of your code to know where the problem is, but I can take a good guess.
Before this line:
$("#newMonoReading").on('focusout', function () {
Add this line:
alert($("#newMonoReading").length);
There is a good chance you are trying to run this code before the DOM has been rendered. If that returns 0, you have three choices:
Use event delegation (overkill in this case)
Move the code inside a $(function() {...}); block
Load the scripts at the bottom of the page.
Change the submit button to button
In this way, you will have full control of the submit. You can perform your own logic in the validate() function and decide whether allow the form to submit or not
<input type="button" onclick="validate()" value="Submit New Readings" class="btn btn-primary">
and your the validate function will be
function validate () {
var initialMonoReading = $('#InitialMonoReading').val();
var newMonoReading = $('#newMonoReading').val()
if (~~newMonoReading < ~~initialMonoReading)
{
alert("Value is not valid");
return;
}
///else submit
$("yourform").submit();
});

Categories