joy joy - 1 year ago 56
Ajax Question

how to post modal information to a api using jquery,javascript,ajax

I have a modal, e.g the modal is in modal.html, the method i wrote in a javascript file modal.js. when I am trying to submit data through modal, it is not working properly. the code is below. please help me someone.

/modal.html

<div class="col-md-12 text-right">
<button type="button" data-toggle="modal" data-target="#myModal">Update User Information</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Enter User Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" id="user_name" placeholder="User name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email_id" placeholder="Enter email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="address" placeholder="Enter Address">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" id="myFormSubmit">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>


/modal.js

$(function() {
$('#myFormSubmit').click(function () {
$.post("/api/adduserInfo/v1",
{
user_name : $("#user_name").val(),
email : $("#email_id").val(),
address : $("#address").val()
});
});
});

Answer Source

You can use something like this (you will have to get the parametres via post on the server side):

                        <!-- FORM -->
                    <form id="idform">
                       <!-- FORM INPUTS -->
                        <input class="btn btn-large btn-primary" value="Submit" type="submit">
                    </form>


                    <script>
                        // Variable to hold request
                        var request;
                        $("#idform").submit(function(event) {

                            // Prevent default posting of form - put here to work in case of errors
                            event.preventDefault();

                            // Abort any pending request
                            if (request) {
                                request.abort();
                            }

                            var $form = $(this);

                            // Let's select and cache all the fields
                            var $inputs = $form.find("input, select, button, textarea");

                            // Serialize the data in the form
                            var serializedData = $form.serialize();

                            $.ajax({
                                url:   '/api/adduserInfo/v1',
                                type:  'post',
                                data: serializedData,
                                beforeSend: function () {
                                    $("#divtoaddresult").html("Processing, please wait...");
                                },
                                success:  function (response) {
                                    $("#divtoaddresult").html(response);
                                }
                            });
                        });
                    </script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download