HTML Form Doesn't Submit

Question

I have created a multi stage form to accept data and then serve it to my servlet.

HTML CODE ->

<head>
<meta charset="UTF-8">
<title>Registration Form - Unity Bank</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css"> </head>

<body>
    <!-- multistep form -->
    <br>
    <p align="center">
    <img src="Images/logo.png" width="20%" height="20%"></p>
    <form action="submitInfo" method="post" id="msform" enctype="multipart/form-data">
        <!-- progressbar -->
        <ul id="progressbar">
            <li class="active">Account Setup</li>
            <li>Personal Details</li>
            <li>Personal Details - 2</li>
        </ul>
        <!-- fieldsets -->
        <fieldset>
            <h2 class="fs-title">Create your account</h2>
            <h3 class="fs-subtitle">Get your account credentials</h3>
            <input type="text" name="email" placeholder="Email" />
            <input type="password" name="pass" placeholder="Password" />
            <input type="password" name="cpass" placeholder="Confirm Password" />
            <input type="button" name="next" class="next action-button" value="Next" /> </fieldset>
        <fieldset>
            <h2 class="fs-title">Personal Details</h2>
            <h3 class="fs-subtitle">Enter details carefully !</h3>
            <input type="text" name="fname" placeholder="First Name" />
            <input type="text" name="lname" placeholder="Last Name" />
            <input type="text" name="phone" placeholder="Phone" />
            <textarea name="address" placeholder="Address"></textarea>
            <input type="text" name="country" placeholder="Country" />
            <input type="text" name="state" placeholder="State" />
            <input type="text" name="city" placeholder="City" />
            <input type="text" name="pin" placeholder="PIN" />
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="button" name="next" class="next action-button" value="Next" /> </fieldset>
        <fieldset>
            <h2 class="fs-title">Personal Details - 2 </h2>
            <h3 class="fs-subtitle">Some more information please !</h3> <span>Male<input type="radio" name="sex" value="M" />
            Female<input type="radio" name="sex" value="F" /></span>
            <br><br>
            <span>Enter Date Of Birth</span><br><br>
            <input type="date" name="bday" />
            <span>Choose Profile Picture</span><br>
            <input type='file' onchange="readImage(this);" /> <img id="blah" src="#" alt="Profile Picture" />
            <br>
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="submit" name="submit_form" class="submit action-button" value="Submit" /> </fieldset>
    </form>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
    <script src="js/index.js"></script>
</body>

CSS CODE -->

/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
    margin: 0;
    padding: 0;
}

html {
    height: 150%;
    /*Image only BG fallback*/
    /*background = gradient + image pattern combo*/
    background: linear-gradient(rgba(14, 137, 214, 0.6), rgba(127, 190, 8, 0.6));
}

body {
    font-family: montserrat, arial, verdana;
}

span {
    font-size: 14px;
    color: #1f476d;
}

/*form styles*/

#msform {
    width: 550px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;
    /*stacking fieldsets above each other*/
    position: relative;
}


/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
    display: none;
}


/*inputs*/

#msform input,
#msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}


/*buttons*/

#msform .action-button {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

#msform .action-button:hover,
#msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}


/*headings*/

.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 11px;
    color: #666;
    margin-bottom: 20px;
}


/*progressbar*/

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}

#progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}


/*progressbar connectors*/

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1;
    /*put it behind the numbers*/
}

#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}


/*marking active/completed steps green*/


/*The number of the step and the connector before it = green*/

#progressbar li.active:before,
#progressbar li.active:after {
    background: #27AE60;
    color: white;
}

JAVASCRIPT FOR MULTI STAGE FORM -->

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
function readImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                .attr('src', e.target.result)
                .width(150)
                .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
}
$(".next").click(function () {
    if (animating) return false;
    animating = true;
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({
        opacity: 0
    }, {
        step: function (now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50) + "%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
                'transform': 'scale(' + scale + ')'
                , 'position': 'absolute'
            });
            next_fs.css({
                'left': left
                , 'opacity': opacity
            });
        }
        , duration: 800
        , complete: function () {
            current_fs.hide();
            animating = false;
        }, //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});
$(".previous").click(function () {
    if (animating) return false;
    animating = true;
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    //show the previous fieldset
    previous_fs.show();
    //hide the current fieldset with style
    current_fs.animate({
        opacity: 0
    }, {
        step: function (now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1 - now) * 50) + "%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
                'left': left
            });
            previous_fs.css({
                'transform': 'scale(' + scale + ')'
                , 'opacity': opacity
            });
        }
        , duration: 800
        , complete: function () {
            current_fs.hide();
            animating = false;
        }, //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

I have just set up a simple System.out.println("Test") inside of my doPost method of the servlet for debugging purposes. The submit button just doesn't trigger the servlet. I used the same servlet in a very basic form containing just one text input and a submit button to see whether it is working and it did work, so it is not a set-up issue.

So can anyone point out any mistake in the code ? Why is not the servlet being triggered ?

you should always post a minimal example.who need css to answer this question — Madhawa Priyashantha, Jul 23 '16 at 03:30
I didn't know if the CSS was a problem since I am new to this stuff...sorry if it bothered you — RwitamB, Jul 23 '16 at 03:39
Uploading files requires `enctype="multipart/form-data"` in your `form` tag. — JSchirrmacher, Jul 23 '16 at 03:51
Added the `enctype="multipart/form-data"`, but doesn't work @JoachimSchirrmacher — RwitamB, Jul 23 '16 at 03:54
You need both, the `enctype` **and** removing your last three JS lines — JSchirrmacher, Jul 23 '16 at 04:00
Yeah I did both. As i found out, the issue was that I was sending in a blank form. I filled it out and got a success message :) Thanks for the help :) — RwitamB, Jul 23 '16 at 04:04
Found another clearest answer than what I saw this week. So.. You had 3 problems on this (!) ;) See edit. — Louys Patrice Bessette, Jul 23 '16 at 04:14

score 1 · Answer 1 · answered Jul 23 '16 at 03:38

1

This part of your code:

$(".submit").click(function () {
    return false;
})

Is preventing the event from bubbling up, which means the button is not submitting the form.

Remove this return false; or the whole function (you are not doing anything here, anyway).

answered Jul 23 '16 at 03:38

Alex Oliveira

893
1
9
27

No luck doing that either :/ – RwitamB Jul 23 '16 at 03:41
i tried writing this $(".submit").click(function () { $('#msform').submit(); }) still doesn't work – RwitamB Jul 23 '16 at 03:49

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Problem: submit keyword.
This is kind of a "reserved" keyword on name's and id.

In <input type="submit" name="submit" class="submit action-button" value="Submit" />

Change it to name="submit_btn"

See result!

Sorry... I just can't find the reference that I've seen about it 48h or so... ago.
Will be back on this.

Tha' reference of what I was talking about: https://stackoverflow.com/a/876274/2159528

edited May 23 '17 at 12:22

Community

1
1

answered Jul 23 '16 at 03:42

Louys Patrice Bessette

33,375
6
36
64

still doesn't work :/ – RwitamB Jul 23 '16 at 03:46
Well You have the class `submit` triggering a return false... too... Can't help. – Louys Patrice Bessette Jul 23 '16 at 03:51
1

You've mentioned that you're trying to debug in your "doPost" method, however the form tag's action attribute seems to be pointing to "submitInfo", I guess this could be the glitch. – David R Jul 23 '16 at 03:55
I edited the post, making the changes suggested above....please check it out now. @LouysPatriceBessette – RwitamB Jul 23 '16 at 03:56
Nah "submitInfo" is the name of my Servlet, the HTTP method i'm using is "post" as mentioned in the form tag. @DavidR – RwitamB Jul 23 '16 at 03:58
action="whatever" should by a `path/filename`... There is something here. – Louys Patrice Bessette Jul 23 '16 at 04:02
I guess you should be using doGet to intercept and debugging. – David R Jul 23 '16 at 04:06

score 0 · Answer 3 · edited Jul 23 '16 at 04:19

0

If your last three lines (returning false in the click handler of .submit) are removed as proposed by @AlexOliveira (this is needed!) and it still doesn't work, it might be that the form is in fact called, but your file isn't uploaded.

The reason is, that your form needs to send data encoded with multipart/form-data to send file uploads:

<form action="submitInfo" method="post" id="msform" enctype="multipart/form-data">

edited Jul 23 '16 at 04:19

Louys Patrice Bessette

33,375
6
36
64

answered Jul 23 '16 at 03:58

JSchirrmacher

3,243
2
19
27

Oh my god ! That was indeed the issue. I was just clicking on submit with a blank form to see whether it triggered the servlet. I just did the same with a completely filled out form along with the file and it worked ! Thanks :) – RwitamB Jul 23 '16 at 04:02
What an eagle eye! ` – Louys Patrice Bessette Jul 23 '16 at 04:05
Do i have to access the form data differently when using `enctype="multipart/form-data"` ? Cause I just got all nulls on my output :P @LouysPatriceBessette – RwitamB Jul 23 '16 at 04:20
Sorry about edit mistake. – Louys Patrice Bessette Jul 23 '16 at 04:20
So ... sorry again. Since answer above this fixed a part of your problem. I suggest you mark it as right answer. Both 3 answer were good (I think). Than restart where you actually at. With a new question. I'm so sorry again if I wizzed it all up. – Louys Patrice Bessette Jul 23 '16 at 04:34
1

With `multipart/form-data` data is in fact sended different. A good description is here: http://stackoverflow.com/questions/2422468/how-to-upload-files-to-server-using-jsp-servlet – JSchirrmacher Jul 23 '16 at 04:51

score 0 · Answer 4 · answered Jul 23 '16 at 04:32

your code you can not upload file and submit at time you can try this code..!

private static final int MAX_MEMORY_SIZE = 1024 * 1024 * 50;
    private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {

        String fileName = null,filePath =null;
        // Check that we have a file upload request
        boolean isMultipart = ServletFileUpload.isMultipartContent(request);

        if (!isMultipart) {
            return;
        }

        // Create a factory for disk-based file items
        DiskFileItemFactory factory = new DiskFileItemFactory();

        // Sets the size threshold beyond which files are written directly to
        // disk.
        factory.setSizeThreshold(MAX_MEMORY_SIZE);

        // Sets the directory used to temporarily store files that are larger
        // than the configured size threshold. We use temporary directory for
        // java
        factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

        // constructs the folder where uploaded file will be stored
        //String uploadFolder = getServletContext().getRealPath("")
        //      + File.separator + DATA_DIRECTORY;

        // Create a new file upload handler
        ServletFileUpload upload = new ServletFileUpload(factory);

        // Set overall request size constraint
        upload.setSizeMax(MAX_REQUEST_SIZE);

        try {
            // Parse the request
            List items = upload.parseRequest(request);
            Iterator iter = items.iterator();
            while (iter.hasNext()) {
                FileItem item = (FileItem) iter.next();

                if (!item.isFormField()) {
                    fileName = new File(item.getName()).getName();
                    filePath = yourfilename.
                    vloc = filePath;
                    vname = fileName;
                    File uploadedFile = new File(filePath);
                    System.out.println(filePath);
                    // saves the file to upload directory
                    item.write(uploadedFile);
                }
            } 
        } catch (FileUploadException ex) {
            throw new ServletException(ex);
        } catch (Exception ex) {
            throw new ServletException(ex);
        }        
    }

HTML Form Doesn't Submit

So can anyone point out any mistake in the code ? Why is not the servlet being triggered ?

4 Answers4