SweetAlert with Java Servlet

Question

I wanted to pause form's onsubmit, so I could ask user to confirm action before proceed. So here's my form:

            <form action="<%= request.getContextPath()%>/Controller" 
                  method="POST" id="remove_book" 
                  onsubmit="alertBookInfo('return_book')">
            </form>

Then, I created the JavaScript function, using SweetAlert:

function alertInfo(action) {
document.querySelector(action).addEventListener('submit', function (e) {
    var form = this;
    e.preventDefault();
    if (action === "remove_book") {
        swal({
            title: "Remove book?",
            text: "Watch out",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes.",
            cancelButtonText: "No.",
            closeOnConfirm: false,
            closeOnCancel: false
        },
        function (isConfirm) {
            if (isConfirm) {
                swal({
                    title: "Deleted.",
                    text: "Done.",
                    type: "success"
                }, function () {
                            form.submit();
                });
            } else {
                swal("Cancelled", "Not done.", "error");
            }
        });
    }
});
}

But for some reason, I am unable to prevent page reload on form submit. Am I doing someting wrong?

PS: I already tried with return alertInfo() in form and returning boolean value from JS function with no success.

Where is your function `alertBookInfo('return_book')`? – Zorken17 Jan 25 '17 at 09:47 — Zorken17, Jan 25 '17 at 09:47
In my file "functions.js", properly linked. – pietrochico Jan 25 '17 at 09:55 — pietrochico, Jan 25 '17 at 09:55

score 0 · Answer 1 · answered Jan 25 '17 at 09:47

0

If you don't want the page reloads you could use an AJAX call. When you use the submit() you will always reload the page because is how submit works.

$.ajax({
        method: "POST",
        url: YOUR_ACTION_URL,
        data: $('form').serialize(),
        success: function(data){
            //here you could add swal to give feedback to the user
        }
    });

In your controller you have to define the method as produces JSON, if you are using Spring, the annotation is @ResponseBody

answered Jan 25 '17 at 09:47

cralfaro

5,822
3
20
30

Thanks. I know I can use AJAX but I don't want to: changing from an AJAX request from HTTPRequest would force me to change too many things on my project, so I hoped I could not use it. – pietrochico Jan 25 '17 at 09:55
I understand what you need, but I am afraid is not possible using a form, have a look here also to this post http://stackoverflow.com/questions/18169933/submit-form-without-reloading-page – cralfaro Jan 25 '17 at 10:01
So I could only show an alerts that informs user of page changes, so:
and, the function would be the function you showed me, right?
– pietrochico Jan 25 '17 at 10:05
Yes you can add this function, then you will have the total control of the form, so no more reload, then you can send all form data to the controller and by JS process the response and show the message you ned to the user. Also remember to change the button type from submit to button – cralfaro Jan 25 '17 at 10:07
Thank you. so much. By the way, how can standard alerts block page reload? – pietrochico Jan 25 '17 at 10:10
Is not because is standard alert, the one who reload the page is the submit action because with an action you always have to redirect to some page, is how to submit works, in the moment you use ajax, you use a different way, so you can decide how the page will act. If you think the response if clear enough could you validate it? so is usefull for some other people :) Thanks – cralfaro Jan 25 '17 at 10:14

Zorken17 · Accepted Answer · 2017-01-25T10:54:05.590

0

Why not call the function from the form like this, the the alert will be prompt before submitting the form:

HTML

<form action="<%= request.getContextPath()%>/Controller" method="GET" id="remove_book" onclick="myAlertFunction(event)">
  <input type="submit">
</form>

JavaScript

function myAlertFunction(event) {
  event.preventDefault()
  swal({
      title: "Remove book?",
      text: "Watch out",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes.",
      cancelButtonText: "No.",
      closeOnConfirm: false,
      closeOnCancel: false
    },
    function(isConfirm) {
      if (isConfirm) {
        swal({
          title: "Deleted.",
          text: "Done.",
          type: "success"
        }, function() {
          $("#remove_book").submit();
        });
      } else {
        swal("Cancelled", "Not done.", "error");
      }
    });
}

And if you want to prevent the reload, you can always use event.preventDefault()

Here is an example: JSFiddel

edited Jan 25 '17 at 10:54

answered Jan 25 '17 at 10:06

Zorken17

1,896
1
10
16

That's what I am trying to do: I already called the event.preventDefault() in my function but for some reason it's not working as it should. I wanted to use SweetAlert because of the good-looking interface they've got. – pietrochico Jan 25 '17 at 10:12
@pietrochico check my updated code and the working JSFiddle. – Zorken17 Jan 25 '17 at 10:18
Id doesn't submit the form, even if I press the ok button :') – pietrochico Jan 25 '17 at 10:26
It only submits if you choose to delete the book – Zorken17 Jan 25 '17 at 10:31
Still not submitting :/ – pietrochico Jan 25 '17 at 10:35
What browser are you using when you are trying my fiddle. JSFiddle won't allow submit if you are using Internet Explorer, try Firefox. But it will work on you published site. – Zorken17 Jan 25 '17 at 10:39
Your fiddle works perfectly, in my code doesn't. I am using Firefox. – pietrochico Jan 25 '17 at 10:41
Breaks my user session anyway. That's weird. Tried also with getElementByID with no luck – pietrochico Jan 25 '17 at 10:44
Have you included jQuery? If my fiddle is working you code will also work if you implement it right. – Zorken17 Jan 25 '17 at 10:45
I did. src="jquery-3.1.1.min.js", src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" and src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" – pietrochico Jan 25 '17 at 10:47
Tyre putting this in your head `` – Zorken17 Jan 25 '17 at 10:51
Still nothing. Seriously, this is a nonsense. – pietrochico Jan 25 '17 at 10:57
Then you are doing something wrong and you are not showing the whole problem to us. – Zorken17 Jan 25 '17 at 10:58
The only thing I didn't tell youismy Controller implementation, I think – pietrochico Jan 25 '17 at 11:00
How can you expect that we can help you if you don't show us the whole problem. I solved you question regarding the alertbox before submit, but I can not help you to implement that to you code if the is bigger issues. – Zorken17 Jan 25 '17 at 11:02
The point is that everything works well in my code. Looks like after $("#remove_book").submit() Controller is not controlling the situation anymore. – pietrochico Jan 25 '17 at 11:04
AJAX looks like tha best solition. Thank you so much anyway. – pietrochico Jan 25 '17 at 11:07

SweetAlert with Java Servlet

2 Answers2