I have a SweetAlert popup, but it is closing itself automatically. Normally it should stay until user clicks 'OK'. (I have included and tested all SweetAlert files.)
<button class="btn btn-success" type="submit" name="submit" onclick="myFunction()">Submit</button>
<script>
function myFunction() {
swal("Submitted!", "Your Issue has been submitted!", "success");
}
</script>
Looks like it's a form submit, So when you click the button the page refreshes.That's why you see the alert for a second and it hides.
<button class="btn btn-success" type="submit" name="submit" onclick="myFunction()">Submit</button>
You must change the button type to be button.
<button class="btn btn-success" type="button" onclick="myFunction()">Submit</button>
Note that if your button is part of a form submit, then issue 284 suggests it's not currently supported. You can change your button to a regular button (rather than a submit button) and programmatically submit the form from the callback in a sweetalert callback.
I have a similar problem..
when click outside of the popup, the popup window closes automatically and change the page very fast...
I tried this code for stop close sweetalert itself, and refresh the page when the user click "OK" of sweetalert window.
HTML:
<form method="post" action="contact.php" name="myform" onsubmit="return myFunction()">
<input type="text" class="form-control" name="full" placeholder="* Full Name" required="" >
<input type="text" class="form-control" name="last" placeholder="* Last Name" required="">
<input type="submit" value="send" name="sends" class="btn btn-lg">
</form>
javascript
<script type="text/javascript">
function myFunction() {
var full=document.myform.full.value;
var last=document.myform.last.value;
if (full==null || last==null){
swal("Error...!!!!!!");
return false;
}else{
swal("Congrats!", ", Your account is created!", "success");
return true;}
}
</script>
Related
Hello so I have a problem with submit button leading to another page.
I figured it out how to make it go to another page but it doesn't recognize the required attribute.
Does anyone have any ideas ?
Html
<input type="submit" form="product_form" id="searchsubmit" onclick="myFunction()">
<form action="welcome.php" method="post" id="product_form">
<label>SKU</label> <input type="text" name="sku" class="sku" required>
</form>
JS
function myFunction() {
window.location.href = "index.html";
}
i have a form, i want to show a confirmation div BEFORE submitting it, if the user clicks ok on the new div, it submits, if not it won't, i'm using slideUp() and slideDown(), im kind if stuck, it's not working, it just redirects to the next page, how do i return true with a new button click to actually submit the form, not with the original submit button?
<div class="choosing" id="choosing">
<form action="rides.php" method="POST" id="tripinfo">
<label> Date of the trip: <br>
<input id="date" type="date" min="2021-06-21" required>
</label> <br>
<button type="submit" id="subBtn" class="btn"> Finish up</button>
</form>
</div>
<div class="confirmation " id="confirmation" style="display:none" ;>
//some stuff
<button id="ok">ok</button>
</div>
the script:
<script>
$('#tripinfo').submit(function () {
$("#choosing").slideDown();
$("#confirmation").slideUp();
if ($('#ok').click)
return true;
else
return false;
//i'm pretty sure this if statement is wrong but i don't know what is wrong with it lol.
}
});
</script>
use event.preventDefault() instead of return false
You'll need cancel submitting the form with preventDefault() and than use different event handler to listen when user clicked on "ok" button, and only than submit the form:
$('#tripinfo').submit(function(e) {
if (e.originalEvent && e.originalEvent.isTrusted) //check if user clicked submit button or javascript clicked it
e.preventDefault(); //prevent submitting the form if user clicked
$("#choosing").slideUp();
$("#confirmation").slideDown();
});
$('#ok').click(function() {
$('#tripinfo').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choosing" id="choosing">
<form action="rides.php" method="POST" id="tripinfo">
<label> Date of the trip: <br>
<input id="date" type="date" min="2021-06-21" required>
</label> <br>
<button type="submit" id="subBtn" class="btn"> Finish up</button>
</form>
</div>
<div class="confirmation " id="confirmation" style="display:none" ;>
//some stuff
<button id="ok">ok</button>
</div>
I have a webpage test.php with:
a form
a "Submit" button to send the answers to the form;
a "Leave" button to allow the user to leave the page (and go to 'leave.php') without filling the form;
a Controller which controls the data when the user clicks on Submit, and redirects elsewhere when everything is correct.
I would like the user to confirm that (s)he wants to leave before redirecting. Here is my code so far:
function confirmation(){
var result = confirm("Do you really want to leave this page?");
if(result){
window.location = 'leave.php';
}
else{
return FALSE;
}
}
<form method="post" action="test.php">
<input type="text" name="answer" id="answer" placeholder="Type your answer here">
<input type="submit" name="submit_answer" value="Submit your answer">
<input type="submit" name="leave" value="Leave this page" onClick="return confirmation();">
</form>
I have two problems:
The code does not redirect to leave.php when the user confirms that (s)he wants to leave, but it refreshes the current page. How can I fix that?
When the user selects Cancel in the confirmation box, the page test.php is reloaded and the data is lost: that is, the textbox is empty even if the user wrote something before clicking on Leave. Is there a way to avoid that?
You can submit the form using JavaScript. First, change both buttons to type="button". Using type="submit" submits your button causing your errors. Then write a simple function to submit the form.
function confirmation(){
var result = confirm("Do you really want to leave this page?");
if(result){
window.location = 'leave.php';
}
else{
return FALSE;
}
}
function submitForm(){
var form = document.getElementById('form');
form.submit();
}
<form id="form" method="post" action="test.php">
<input type="text" name="answer" id="answer" placeholder="Type your answer here">
<input type="button" name="submit_answer" value="Submit your answer" onClick="submitForm()">
<input type="button" name="leave" value="Leave this page" onClick="return confirmation();">
</form>
Here is a working version. I believe the issue was with the return statement, "return confirmation()":
<form method="post" action="test.php">
<input type="text" name="answer" id="answer" placeholder="Type your answer here">
<input type="submit" name="submit_answer" value="Submit your answer">
<input type="submit" name="leave" value="Leave this page" onClick="confirmation(); return false;">
</form>
<script>
function confirmation(e){
var result = confirm("Do you really want to leave this page?");
if (result) {
window.location = '/leave.php';
} else {
return FALSE;
}
}
</script>
If you have to Submit-Buttons each of them will submit your form. So you've got a conflict between the redirection to "test.php" and "leave.php". In this case, the action from the form comes always first.
function confirmation(){
var result = confirm("Do you really want to leave this page?");
if(result){
window.location = 'leave.php';
}
else{
return FALSE;
}
}
<form method="post" action="test.php">
<input type="text" name="answer" id="answer" placeholder="Type your answer here">
<input type="submit" name="submit_answer" value="Submit your answer">
<input type="button" name="leave" value="Leave this page" onClick="return confirmation();">
</form>
I have many forms like the following on the page. Now I want change the form action based on which submit button the user clicked (and of course submit the form)
<form action="/shop/products.php" data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
I tried with
$(".obtn").click(function() {
$(this).parent().parent().attr("action", "/shop/products.php");
});
$(".oEbtn").click(function() {
$(this).parent().parent().attr("action", "/shop/extras.php");
});
but the form is always submited to products.php. Can you tell me what's wrong?
Instead of setting the action attribute on the form itself, consider setting formaction attribute on each individual input element.
Docs: http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input formaction="/shop/products.php"
name="submit" class="obutn" type="submit" value="Order" />
<input formaction="/shop/extras.php"
name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
There are two typos:
obtn instead of obutn
oEbtn instead of oEbutn
Another suggestion is to use closest("form") to get the form that contains the clicked button.
$(".obutn").click(function() {
$(this).closest("form").attr("action", "/shop/products.php");
});
$(".oEbutn").click(function() {
$(this).closest("form").attr("action", "/shop/extras.php");
});
$("form").on("submit", function () {
alert($(this).attr("action"));
});
JSFIDDLE
Capture the submit event and determine which button was clicked. From that, you can change the action of the form.
Here's a link on how to do that.
How can I get the button that caused the submit from the form submit event?
Also, don't give the form the action until the click happens at all, it is superfluous.
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
What if you try it out with a switch instead? Something like:
<input name="submit" id = "1" class="obutn" type="submit" value="Order" />
<input name="submit" id = "2" class="oEbutn" type="submit" value="Extras" />
And then in JavaScript we have:
//param: The Id attr of the button that was clicked
function postTo(id){
switch(id){
case 1: postProducts();
break;
case 2: postExtras();
break;
default: //Do something else
}
}
Just an idea. Haven´t tested that yet, but maybe it could be helpful. I hope so.
I am new to forms, and Javascript, so please be forgiving.
I have a form that looks like this:
<form method="post" action="control" name="myform">
<input type="submit" name="Name" value="Do A"/>
<input type="submit" name="Name" value="Do B" />
<input type="submit" name="Name" value="Do C" />
<input type="submit" name="Name" value="Close" />
</form>
I need to change this so that there are two buttons, and the form is submitted using javascript dependent on some external conditions, so I want it to look something like this:
<form method="post" action="control" name="myform">
<script>
function submitForm(form){
if(someConditionA){
submit the form so that the script performs same action as if the button Do A had been clicked
} if (someConditionB){
submit the form so that the script performs same action as if the button Do B had been clicked
} if (someConditionC){
submit the form so that the script performs same action as if the button Do C had been clicked
}
}
function closeForm(form){
window.close();
}
</script>
<button name="doAction" onClick="SubmitForm(this.form)">Do Action<\button>
<button name="close" onClick="SubmitForm(this.form)">Close<\button>
</form>
How can I implement the function submitForm?
Thanks
Add a hidden field with the same name as the original submit buttons:
<input type="HIDDEN" name="Name" value=""/>
Set the value of that field based on your conditions:
function submitForm(form){
if(someConditionA){
form.Name.value = "Do A";
} if (someConditionB){
form.Name.value = "Do B";
} if (someConditionC){
form.Name.value = "Do C";
}
form.submit();
}
Change the new Close button to this:
<button name="close" onClick="this.form.Name.value='Close';this.form.submit();">Close<\button>
I haven't tested this, so it may contain a mistake or two, but that's the general idea. (+1 for 'this.form', not many folks know about that, nice.)
Have just figured out the answer to my question:
The way to do it is to have a hidden field:
<input type="hidden" name="Name" value=""/>
Then in the function, set this hidden field to have the same value as the respective button.
Well, you should simply name your submit buttons differently.
<form method="post" action="control" name="myform">
<input type="submit" name="SubmitA" value="Do A"/>
<input type="submit" name="SubmitB" value="Do B" />
</form>
This way, when submitted, the server will be able to distinguish which submit was clicked.
not sure if I got your Problem right, but why dont you just make a click event on those submit buttons?
like
$('#mysendbtn').click(function(){ ...do A });