Question

I am working on spring API with postgres, I want to create form in jquery with few animations and I want to submit the form data to a database table. Is there anyway without using the spring form? or can I add the jquery ajax calls actions to the spring form?

My jquery page works fine with the all the ajax autofill correctly as a stand alone. But I want to integrate now with the spring so that when I submit the form the data is posted to the DB using hibernate.

Is it possible to use the same jquery page in the spring? Can anyone suggest something pls?

    @RequestMapping(method = RequestMethod.GET)
public ModelAndView getVisitor() {

    return new ModelAndView("visitor", "command", new Visitor());
    // return "visitor";
}

@RequestMapping(method = RequestMethod.POST)
public String addVisitor(@ModelAttribute("visitor")Visitor visitor,
        ModelMap model) {
    System.out.println(visitor.getComment());
    String resp = visitorService.add(visitor);
    return resp;
}
}

I have this in my controller, once I submit my form, it is trying to post to addVisitor but the visitor object is null.

<form action="visitor" method="post" class="fancy-form">

        <div class="">
            <input type="text" maxlength="50" id="name" name="name" /><label
                for="name">Name: </label>
        </div>
        <fieldset name="address">
            <legend>Address</legend>
            <p class="instructions">Start by entering your zip code.</p>
            <div>
                <div>
                    <input type="text" name="street1" id="street1"><label
                        for="street1">Street #1</label>
                </div>
            </div>
            <div>
                <div>
                    <input type="text" name="street2" id="street2"> <label
                        for="street2">Street #2</label>
                </div>
            </div>
            <div>
                <div class="city-wrap">
                    <input type="text" name="city" id="city"> <label
                        for="city">City</label>
                </div>
                <div class="county-wrap">
                    <input type="text" name="county" id="county"> <label
                        for="county">County</label>
                </div>
                <div class="state-wrap">
                    <input type="text" name="state" id="state"> <label
                        for="state">State</label>
                </div>

                <div class="zip-wrap">
                    <input type="text" pattern="[0-9]*" maxlength="5" required
                        name="zip" id="zip"> <label for="zip">Zip</label>
                    <p class="zip-error">Not a real zip code.</p>

                </div>


            </div>

        </fieldset>
        <div>
            <input type="button" id="go" value="Find Me" />
        </div>

        <div class="">
            <label for="comment">Comment: </label>
            <textarea id="comment" name="comment" rows="4" cols="50"
                maxlength="2000">Enter comment here...</textarea>
        </div>
        <div>
            <input type="submit" value="Submit" />
        </div>
    </form>

Answer 1

Have you serialize your Form data?

$.ajax({type:'POST', url: 'post_action_url', data:$('#FormId').serialize(), success: function(response) { 
//response here
}});