send json object on form submit

Question

i have a usual form. the only thing i'm trying to differently is group 3 of the input values into a json. and when i click on submit, i want to send other inputs as usual but those 3 as one json. I have made it into json using jquery but unable to understand how to send it on submit click. Please see my code and let me know what's missing. (FYI i'm working on spring mvc) i have this form:

    <form class="form-horizontal" action="success" method="post" role="form">
    <div class="form-group">
        <input type="text" name="name" id="name" class="form-control" placeholder="Name" value="">
        <input type="text" name="dob" id="dob" class="form-control" placeholder="Date of Birth" value="">
    </div>

    <div class="row form-group">
        <div class="col-sm-3">
            <input type="text" id="school_name" class="form-control" placeholder="school/college name" />
        </div>
        <div class="col-sm-3">
            <select class="form-control year" id="year">
<option>1</option>
<option>2</option>
</select>
        </div>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="qualification" placeholder="qualification" />
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn btn-primary" id="add" value="add">Add More</button>
        </div>
    </div>

    <input type="submit" class="btn btn-danger form-control" id="save" value="Save">
</form>

and my jquery code is:

        $(document).on('click',"#save",function() {
        var $items = $('#school_name, #year,#qualification ')
        var education=null;
        var json = {}
        $items.each(function() {
            json[this.id] = $(this).val();
        });
        education= JSON.stringify(json);
        alert(education)    //this gives me the required result
        window.location="success?education="+education;  
// I guess something is wrong here
    });

score 2 · Answer 1 · answered Nov 29 '17 at 07:54

It is not clear what type of data the server is expecting. Because, if the server accepts data in JSON, it simply cannot be sent using query params.

You may want to see $.ajax. You can send your object json directly to the server using data key, like this:

$.ajax({
  url: 'success',
  data: json
})
.then(function(response) {
  // Handle the response here
});

It will simply send the data using query parameters to the server URL specified by url key. If your server accepts data in JSON instead, you may want to change the request method to POST and set the contentType to json, like this:

$.ajax({
  method: 'POST',
  url: 'success',
  contentType: 'application/json',
  data: json
})
.then(function(response) {
  // Handle the response here
});

Hope this clarifies your problem. For more details, observe the Network tab of your browser's developer tools to see how the data is being submitted to the server.

gkatiforis · Accepted Answer · 2017-11-29T08:42:12.480

1

First define id to your form id='formId' and then you can get form data into JSON string with:

 var json = $("#formId").serialize();

The result would be:

school_name=college+name&year=1&qualification=good

You can pass the json string using ajax request:

 $.ajax({
     url: 'success',
     data: json
    })
    .then(function(response) {

    });

Working example:

$(document).on('click',"#save",function() {

      var json = $("#formId").serialize();       
        alert(json)   
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" action="success" method="post" role="form" id="formId">
    <div class="form-group">
        <input type="text"  id="name" class="form-control" placeholder="Name" value="">
        <input type="text" id="dob" class="form-control" placeholder="Date of Birth" value="">
    </div>

    <div class="row form-group">
        <div class="col-sm-3">
            <input type="text" id="school_name" name="school_name" class="form-control" placeholder="school/college name" />
        </div>
        <div class="col-sm-3">
            <select class="form-control year" id="year" name="year">
<option>1</option>
<option>2</option>
</select>
        </div>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="qualification" name="qualification" placeholder="qualification" />
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn btn-primary" id="add" value="add">Add More</button>
        </div>
    </div>

    <input type="submit" class="btn btn-danger form-control" id="save" value="Save">
</form>

edited Nov 29 '17 at 08:42

answered Nov 29 '17 at 08:24

gkatiforis

1,588
9
19

this is not how i want the output. i want to only make json of those 3 attributes i.e year,schoolname,qualification. not others.rest should remain same and be submitted in usual way – Gurjot kaur Nov 29 '17 at 08:36
You can remove name="name" and name="dob" from the inputs and they will not be included to json string. I will update the answer. – gkatiforis Nov 29 '17 at 08:41
okay so when i serialize "#formID" it only serializes those input values which have "name" attribute in it..did i get it right? – Gurjot kaur Nov 29 '17 at 10:53
yep, name="qualification" is the name of the attribute in json string: &qualification=good – gkatiforis Nov 29 '17 at 10:56
okay! got it....but how does this json variable go to next page? the page that i go to after i click on submit btn – Gurjot kaur Nov 29 '17 at 11:03
error: HTTP Status 400 - Required Json parameter 'json' is not present – Gurjot kaur Nov 29 '17 at 11:17
i'm sorry if it seems spoon feeding...but can u edit ur code to use $("#formId").submit(); – Gurjot kaur Nov 29 '17 at 11:26
Can you send the @RequestMapping("/success") method at you controller? – gkatiforis Nov 29 '17 at 11:34
@RequestMapping(value = "/success",method = RequestMethod.POST) public ModelAndView first(@RequestParam("json")Json json) { System.out.println(json); ModelAndView mv = new ModelAndView(); mv.setViewName("success"); return mv; } – Gurjot kaur Nov 29 '17 at 11:39
@RequestParam("json")Json json is **wrong**. If you want to accept JSON you must use @RequestBody . Check this: https://stackoverflow.com/questions/18524524/passing-json-data-to-a-spring-mvc-controller. Also check this tutorial about form submit using Spring mvc: http://www.baeldung.com/spring-mvc-form-tutorial – gkatiforis Nov 29 '17 at 12:37

score 0 · Answer 3 · answered Nov 29 '17 at 07:56

here I have created a hidden field in your form named as education and while click save button it will generate JSON as you mention in question and assign it into education field then submit your form to success URL in post method

$("document").ready(function(){

    $("#save").click(function(e){
    
        var $items = $('#school_name, #year,#qualification')
        var education=null;
        var json = {}
        $items.each(function() {
            json[this.id] = $(this).val();
        });
        education= JSON.stringify(json);
       $("#education").val(education);
    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form class="form-horizontal" action="success" method="post" role="form">
    <div class="form-group">
        <input type="text" name="name" id="name" class="form-control" placeholder="Name" value="">
        <input type="text" name="dob" id="dob" class="form-control" placeholder="Date of Birth" value="">
    </div>

    <div class="row form-group">
        <div class="col-sm-3">
            <input type="text" id="school_name" class="form-control" placeholder="school/college name" />
        </div>
        <div class="col-sm-3">
            <select class="form-control year" id="year">
<option>1</option>
<option>2</option>
</select>
        </div>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="qualification" placeholder="qualification" />
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn btn-primary" id="add" value="add">Add More</button>
        </div>
    </div>

    <input type="submit" class="btn btn-danger form-control" id="save" value="Save">
    <input type="hidden" id="education" name="education">
</form>

send json object on form submit

3 Answers3