Why this alert doesn't work using javascript? - javascript

I'm working on ASP.NET and on the view I have a code like this, If I use the sweet alert outside the function it works, and If I change the sweet alert in to a regular alert it works too but It doesn't work like the code below. (I also have the script with the library on the view)
<input type="submit" value="Create" class="btn btn-default" onclick="return foo();" />
<script type="text/javascript">
function foo() {
swal("Good job!", "You clicked the button!", "success")
return true;
}
</script>

When you click the submit button, it is submitting a form.
With an alert, it blocks the browser so the code will wait until you push okay and than submit the form. But the issue when you move to use sweet alert, you can not block the browser action. So you will have to cancel the click and submit the form manually.
// called onclick of the submit button
function foo() {
swal("foo")
.then(function() {
// manually submit the form
document.getElementById("yourFormId").submit()
});
return false; // cancel the button click
}
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form id="yourFormId">
<input type="submit" value="Create" class="btn btn-default" onclick="return foo();" />
</form>

ok, you forgot to include library js and css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<input type="submit" value="Create" class="btn btn-default" onclick="return foo();" />
<script type="text/javascript">
function foo() {
swal("Good job!", "You clicked the button!", "success")
return true;
}
</script>

Related

Why isn't my simple Javascript to enable and disable a button based on Recaptcha success & timeout working?

I think I'm going a little mad.
I have a working re-captcha div and submit button:
<div class="g-recaptcha" data-sitekey="LALALALALAL" data-callback="enableBtn"></div>
<br />
<button id="getJSON" type="button" class="btn btn-primary">Save Form</button>
The Save Form button is disabled on page load.
I have the following function:
<script>
function enableBtn(){
var submit = document.getElementById('getJSON');
if (submit.disabled) {
document.getElementById("getJSON").disabled = false;
} else {
document.getElementById("getJSON").disabled = true;
}
}
</script>
The callback works fine for the initial enabling of the button on successful recaptcha response, but when the recaptcha times out the button doesn't get disabled.
As I said, I think I'm going a little mad.
I think that you can use data-expired-callback attribute.
<div class="g-recaptcha" data-sitekey="LALALALALAL" data-callback="enableBtn" data-expired-callback="enableBtn"></div>
<br />
<button id="getJSON" type="button" class="btn btn-primary">Save Form</button>

JavaScript window.location.href code not working

I know this question has been asked a lot before, but none of the fixes worked for me. I made a window.location. href thing before and that worked but this one does not. I know the function runs because I tested it with an alert. Can someone see anything wrong here?
<form>
<input type="submit" name="agree" value="agree" onclick="fagree()">
<input type="submit" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html")
localStorage.setItem("Terms", "true")
}
function fdisagree(){
window.location.href="https://www.google.com/"
return false;
}
</script>
</body>
You can use button type instead of submit, otherwise, well, the form will be submit.
<form>
<input type="button" name="agree" value="agree" onclick="fagree()">
<input type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html");
localStorage.setItem("Terms", "true"); //This line won't be executed, because the above line will reload the page
}
function fdisagree() {
window.location.href="https://www.google.com/"
return false; //This can be removed because the above line will redirect to google and the return false won't be executed
}
</script>
If you don't need any else form elements than those 2 buttons, you can get ride of the <form></form> and simply use <button>. In example :
<button type="button" name="agree" value="agree" onclick="fagree()">
<button type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
Do not put it in the form if you don't have to (if that's the whole form code in the example). You are submitting it before functions have a chance to trigger.
OR:
<form>
<input type="button" name="agree" value="agree" onclick="fagree()">
<input type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html")
localStorage.setItem("Terms", "true")
}
function fdisagree(){
window.location.href="https://www.google.com/"
return false;
}
</script>
</body>

On 'Cancel' confirm() still allows form to submit

function next() {
return confirm('Are you sure you want to Foo');
}
<form method="GET" action="/foo" onsubmit="next()">
<input type="hidden" name="delete" value={{$foo} />
<button class="btn btn-warning" type="submit"> Foo</button>
</form>
I am trying to give the user the option to verify that they want to submit the form. Currently the above code shows the popup confirm box, but the form will submit regardless if 'ok' or 'cancel' is clicked.
My understanding of 'confirm()' was that if 'cancel' was clicked the form submission would be stopped.
How does Confirm() work, and how is it best implemented?
You need to precede the next() with a return in your HTML:
function next() {
return confirm('Are you sure you want to Foo');
}
<form method="GET" action="/foo" onsubmit="return next()">
<input type="hidden" name="delete" value={{$foo} />
<button class="btn btn-warning" type="submit"> Foo</button>
</form>
To stop submission, the onsubmit handler needs to return false, which you missed. confirm() returns false when the modal is dismissed.

jcryption form submit not working with button click

I am using jcryption for encrypting the form.It works fine if i use submit button in form. Instead if i use button and submit the form manually my jcryption method is not getting called.
below is my code
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#login").bind('click', function(){
document.authenticatorform.username.value=$("#username").val();
document.authenticatorform.password.value=$("#password").val();
alert('outer hello');
$("#authenticatorform").jCryption({
getKeysURL:"<%=request.getContextPath()%>/keypairrequest",
beforeEncryption:function() {
alert('inner hello');
document.authenticatorform.submit()
return true; },
encryptionFinished:function(encryptedString, objectLength) {return true;}
});
});
});
</script>
<body>
<form:form method="post" action="login.htm" name="authenticatorform" id="authenticatorform">
<input type="hidden" name="username"/>
<input type="hidden" name="password"/>
</form:form>
<input type="button" id="login"/>
</body>
</html>
In the code only outer alert is printing.
Is it possible to call jcryption in other than submit button?
Any help will be greatly appreciated!!!!!
Try using on click function instead of bind
Try this:
$("#login").on('click', function(){
//your codes goes here
}

html form with multiple submitbuttons

I have 2 submit buttons in an HTML form.
How can I know which submit button has triggered the JavaScript function?
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
// I can't use onclick handler
// I can't use JQuery.. I want to do only with javascript
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1">
<input type="submit" value="submit2">
</form>
<button value="delete row" id="but1" onclick="disps()">delete row</button>
I want to do different actions based on the different submit buttons clicked.
It is not possible to check the button clicked through the onsubmit event. Instead move the call to verifyData() to the onclick handler of each button. Use return in the onclick call to cancel submission if false is returned by verifyData()
<script language="javascript" type="text/javascript">
function verifyData(button) {
// validate
switch (button.value) {
case "submit1":
// do somehting
break;
case "submit2":
// do somehting
break;
// ...
};
// submit the form
return true;
}
</script>
<form method="post">
<input type="submit" value="submit1" onclick="return verifyData(this);">
<input type="submit" value="submit2" onclick="return verifyData(this);">
</form>
How about putting an onclick event handler on both buttons which will set a variable to say which button was clicked?
like so:
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
alert(btnClicked);
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
}
var btnClicked = 0;
function setSubmit(which) {
btnClicked = which; return true;
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1" onclick="return setSubmit(1);">
<input type="submit" value="submit2" onclick="return setSubmit(2);">
</form>
Are you allowed to use the jQuery library?
If you can using this you can easily bind to each submit button based on an id.
For example:
<form id="form1" method="post">
<input type="submit" value="submit1" id="submit1">
<input type="submit" value="submit2" id="submit2" >
</form>
<script type="text/javascript">
$("#submit1").click(function(e)
{
// Do stuff when 1 is clicked.
$("#form1").submit();
});
$("#submit2").click(function(e)
{
// Do stuff when 2 is clicked.
$("#form1").submit();
});
</script>
you could also have the buttons as a type of button to avoid any issues, but you should be able to simply return false; to stop the button of type submit from... submitting
Here is how I would do it... Firstly I would use jQuery so you must include that in your document like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
It would also mean your HTML can be simplified to:
<form method="post">
<input type="submit" value="submit1"/>
<input type="submit" value="submit2"/>
</form>
Then you can use jQuery:
<script>
// When the document is ready
$(function(){
// Action performed when a submit button in the form is clicked
$("form[type='submit']").click(function(e){
// Get the value attribute
var val = $(this).val(),
validation_has_passed = false;
// If it is submit1
if(val == "submit1") {
// Validate submit 1
validation_has_passed = true;
// If it is submit2
} else if(val == "submit2") {
// Validate submit 2
validation_has_passed = true;
}
// If all validation is OK submit the form
if(validation_has_passed === true) {
$("form").submit();
}
// Ensure pressing these buttons doesn't submit the form
e.preventDefault();
});
});
</script>

Categories

Resources