Javascript - Ajax PUT request sends parameter as null when it shouldn't

chrish
July 16, 2023
276 views
0 votes
2 Answers

I am trying to pass these two variables to a servlet, but get an error stating that sessionid is a null string.

var sessionid = document.getElementById("Session-select").value;
var attendeeid = document.getElementById("Attendee-select").value;
            console.log(attendeeid + " " + sessionid);
    $.ajax({

        url: 'http://localhost:8180/Project_2_Highfield/registrations',
        contentType: 'application/json',
        method: 'PUT',
        data: {sessionid: sessionid, attendeeid: attendeeid},
        dataType: 'json',
        success: function (jsondata) {
            console.log(JSON.stringify(jsondata));
            document.getElementById("output").innerHTML = "";
             var success = jsondata['success'];
             $("#output").append("<p>"+ "Success: " + success +"</p>");
        }});

The error is as follows:
java.lang.NumberFormatException: Cannot parse null string

I tried adding a console log to ensure the variables weren’t null; they aren’t, yet one still gets sent as null in the ajax query.

Here is the HTML related to this part.

<body>
        <fieldset >
         <legend>Session Management</legend>
          <label for="Sessions">Select Session:</label>

         <select name="Session-select" id="Session-select"> </select>
         <p></p>
         <label for="Attendees">Select Attendee:</label>

         <select name="Attendee-Select" id="Attendee-select"> </select>
         <p></p>
            <input type="button" value="List Registrations" onclick="list_session_attendees();">
            <input type="button" value="Update Registration" onclick="update_registration();">
            <input type="button" value="Cancel Registration" onclick="cancel_registration();">
      </fieldset>
</body>

Edit: Forgot to mention, the drop down menu it’s pulling from is generated dynamically. Here is the code behind that:

function generate_session_list() {
 $.ajax({

        url: 'http://localhost:8180/Project_2_Highfield/training',
        method: 'GET',
        dataType: 'json',
        success: function (jsondata) {
            
            var len = jsondata.length;
            console.log(JSON.stringify(jsondata));
                for( var i = 0; i<len; i++){
                           var session = jsondata[i]['description'];
                           var id = jsondata[i]['id'];
              $("#Session-select").append("<option value='"+ id +"' >"+ session +"</option>");
    }

        }});
    
}

I have made the other suggested changes, but am still encountering the error.

Upon further testing, this error appears to occur even when I hard-code the ID to send; i;e,

data: {sessionid: "1", attendeeid: attendeeid},

I am not sure why.

Answers

It’s weird when you say that you go both variable logged in console but one of them is sent as null.
Try to add a condition to only execute the ajax code when both variables are not null.

var sessionid = document.getElementById("Session-select").value;
var attendeeid = document.getElementById("Attendee-select").value;
            console.log(attendeeid + " " + sessionid);
if(attendeeid.trim().length != 0 && sessionid.trim().length != 0) {
    $.ajax({

        url: 'http://localhost:8180/Project_2_Highfield/registrations',
        contentType: 'application/json',
        method: 'PUT',
        data: {sessionid: sessionid, attendeeid: attendeeid},
        dataType: 'json',
        success: function (jsondata) {
            console.log(JSON.stringify(jsondata));
            document.getElementById("output").innerHTML = "";
             var success = jsondata['success'];
             $("#output").append("<p>"+ "Success: " + success +"</p>");
        }});
   }
}

If the Ajax code is not executed, then for sure one of your variables is null or empty, in this case you can check why the select is not getting a value.

(I know you code snippets is out of context), but don’t set the two global variables as a starting point.

Here I use two techniques to for ensuring that the form cannot be submitted before a session and a attendee has been selected. First, the submit button is disabled. I wrapped the AJAX request for session and attendee data in a promise. When the promise is returned the submit button will be enabled.

Second I made the select elements required. This means that the form can only be submitted if the session and the attendee is selected.

Often it is a good idea to avoid using IDs in a form. Use the name attribute instead. You can see that it is easy to refer to the value of one of the select elements in the context of the submit event callback (put_registration(e)).

$(document).ready(function() {
  generate_session_list();
  document.forms.form01.addEventListener('submit', put_registration);
});

function put_registration(e) {
  // submit event callback
  e.preventDefault();
  let form = e.target;
  $.ajax({
    url: 'data:application/json,{"success":"Registration submitted"}',
    contentType: 'application/json',
    method: 'PUT',
    data: {
      sessionid: form.sessionselect.value,
      attendeeid: form.attendeeselect.value
    },
    dataType: 'json',
    success: function(jsondata) {
      form.output.value = jsondata['success'];
    }
  });
}

function generate_session_list() {
  let promise1 = $.ajax({
    url: 'data:application/json,[{"id":1,"description":"Session01"},{"id":2,"description":"Session02"}]',
    method: 'GET',
    dataType: 'json',
    success: function(jsondata) {
      jsondata.forEach(session => {
        $(document.forms.form01.sessionselect).append("<option value='" + session.id + "' >" + session.description + "</option>");
      });
    }
  }).promise();
  let promise2 = $.ajax({
    url: 'data:application/json,[{"id":1,"description":"Attendee01"},{"id":2,"description":"Attendee02"}]',
    method: 'GET',
    dataType: 'json',
    success: function(jsondata) {
      jsondata.forEach(attendee => {
        $(document.forms.form01.attendeeselect).append("<option value='" + attendee.id + "' >" + attendee.description + "</option>");
      });
    }
  }).promise();
  // enable submit button when session and attendee has been fetched
  $.when(promise1,promise2).then(function(){
    document.forms.form01.submitBtn.disabled = false;
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form01">
  <fieldset>
    <legend>Session Management</legend>
    <label for="Sessions">Select Session:</label>

    <select name="sessionselect" required></select>
    <p></p>
    <label for="Attendees">Select Attendee:</label>

    <select name="attendeeselect" required></select>
    <p></p>
    <!--<input type="button" value="List Registrations" onclick="list_session_attendees();">
    <input type="button" value="Update Registration" onclick="update_registration();">
    <input type="button" value="Cancel Registration" onclick="cancel_registration();">-->
    <button name="submitBtn" type="submit" disabled>Submit</button>
  </fieldset>
  <output name="output"></output>
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Ajax PUT request sends parameter as null when it shouldn't

Answers