getting data from a form using ajax?

Question

I am trying to get data from an html form using jquery. I have tried the following but for some reason when I tried to log the data in the console, I keep getting null. What could I be doing wrong ? I want to send the data captured from my form in json format to my servlet. Thanks

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.vertical-menu {
    width: 200px;
}

.vertical-menu a {
    background-color: #eee;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
}

.vertical-menu a:hover {
    background-color: #ccc;
}

.vertical-menu a.active {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>

<form id="register">
<div class="vertical-menu">

</div>
 API Name:<br>
  <input type="text" id = "apiname" name="apiname">
   API ENDPOINT:<br>
  <input type="text" id ="apiendpoint" name="apiendpoint">
  <br>
  API VERSION:<br>
  <input type="text" id="apiversion" name="apiversion">
   ACCESSIBLE:<br>
  <input type="checkbox" name="source" value="internet"> Internet<br>
    <input type="checkbox" name="source" value="vpn"> VPN<br>


  <br>
    <input type="submit" id="check" name="check" value="Insert">

</form> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).on("click", "#check", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
      event.preventDefault();
      var d = $('register').serialize();
      console.log("d",d);
     $.ajax({
            type: "POST",
            url: "HomeServlet",
            dataType: "text",
            contentType: "application/json",
            data:d,
            success: function(data){
                console.log(data);
            },
            error:function(){
                console.log("error");
            },

        });
});

</script>
</body>
</html>

$('#register'). # is missing

Jeremy Thille
– Jeremy Thille

2017-07-21 13:55:16 +00:00
Commented Jul 21, 2017 at 13:55 — Jeremy Thille
– Jeremy Thille, Commented Jul 21, 2017 at 13:55

Himanshu Upadhyay · Accepted Answer · 2017-07-21 13:55:07Z

1

You forgot to give proper selector: register is the ID of the form so;

$(document).on("click", "#check", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
      event.preventDefault();
      var d = $('#register').serialize(); // You had missed # here.
      console.log("d",d);
     $.ajax({
            type: "POST",
            url: "HomeServlet",
            dataType: "text",
            contentType: "application/json",
            data:d,
            success: function(data){
                console.log(data);
            },
            error:function(){
                console.log("error");
            },

        });
});

answered Jul 21, 2017 at 13:55

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

exe-cute-table · Accepted Answer · 2017-07-21 14:05:57Z

0

 // Handle submit action on the forms.
$('#register').on('submit', function(e) {

    // Prevent the browser to submit the form (we want to do it manually)
    e.preventDefault();

    var form = $(this);
    var formdata = (window.FormData) ? new FormData(form[0]) : null;
    var data = (formdata !== null) ? formdata : form.serialize();
    console.log(data);

    // POST request to server 
    $.ajax({
        url : "URL/TO/SERVER",
        type : "POST",
        data : data,
        // other fields you need
    });
});

I think that this is a proper way to achieve what you need. Don't forget to add the event argument to your callback function.

answered Jul 21, 2017 at 14:05

exe-cute-table

1281 silver badge11 bronze badges

Collectives™ on Stack Overflow

getting data from a form using ajax?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related