CODEWITHSUNDEEP
javajqueryjsonforms
Gurjot kaur
Gurjot kaur

Reputation: 145

send json object on form submit

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
    });

Upvotes: 3

Views: 6496

Answers (3)

gkatiforis
gkatiforis

Reputation: 1652

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>

Upvotes: 1

Kalaiselvan
Kalaiselvan

Reputation: 2134

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>

Upvotes: 0

31piy
31piy

Reputation: 23869

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.

Upvotes: 2

Related Questions