Comparing user input value with JSON object via ajax to ultimately update page content

Question

On page load for my current project, I have a modal overlay appear that prompts the user to enter a 5 digit long value. From that value, I want to have an AJAX call hit an API to see if that value exists/matches and from there, update the nav bar to say, "Hello, [user]" ([user] being another key value pair from the JSON object that the 5 digit long value is referencing. I'm still new to AJAX, so I'm wondering what the best way to go about doing this. I know the following is completely wrong, but I imagine this is the basic framework for starting out something like this.

$("#inputForm").submit(function(){
    $.ajax({
        url: "/my/api/url/",
        type: "POST",
        data: postData
        success: function(postData){
            //if 5-digit value matches value in the API, update the navbar with name key value pair in the JSON object
        }
    });
});

guest271314 · Accepted Answer · 2015-08-28 14:56:10Z

1

Try utilizing change event prompt

$(function() {
  var check = function(vals, data) {
    if (vals.length === 5 && vals.split("").every(Number)) {
      if (vals in data) {
        // do `$.ajax()` stuff here
        /*
        $.ajax({
          url: "/my/api/url/",
          type: "POST",
          data: vals
          success: function(returnData) {
            var data = JSON.parse(returnData);
            // check data and update nav bar
            $("#navbar").html("Hi, " + data)
          }
          error: function() {
            evt.preventDefault();
            // show error
          }
        });
        */
        $("#navbar").html("Hi, " + data[vals])
      }
    }
  };
  var data = {
    12345: "abc"
  };
  var vals = prompt("enter 5 digits");
  if (vals !== null) check(vals, data);
  $("input").change(function(e) {
    check(this.value, data)
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navbar"></div>
<input type="text" placeholder="enter 12345" />

answered Aug 28, 2015 at 14:56

guest271314

1

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

2 Comments

cn1993 Over a year ago

Could you explain the functionality behind this code? From what I gather, unless the 5-digit value that the user enters is in the data var, this code wouldn't function. I want whatever the user enters in the input field to be compared to the JSON object for the 5-digit value there. If they match, then another ajax call is made that references the actual user account and sets the nav bar user name to that account

guest271314 Over a year ago

@cn1993 "From what I gather, unless the 5-digit value that the user enters is in the data var, this code wouldn't function." Yes , at if (vals in data) { if false is result of condition , $.ajax() would not be called . "want whatever the user enters in the input field to be compared to the JSON object for the 5-digit value there." Yes, the comparison is processed within if (vals in data) { for each five character value entered by user at input element

Danny · Accepted Answer · 2015-08-28 14:04:42Z

0

$("#inputForm").submit(function(evt){
    $.ajax({
        url: "/my/api/url/",
        type: "POST",
        data: postData
        success: function(returnData){
          var data = JSON.parse(returnData);
          // check data and update nav bar
        }
        error: function() {
          evt.preventDefault();
          // show error
        }
    });
});

answered Aug 28, 2015 at 14:04

Danny

6343 silver badges11 bronze badges

1 Comment

cn1993 Over a year ago

Could you explain a bit how the following lines work: success: function(returnData){ var data = JSON.parse(returnData);

Collectives™ on Stack Overflow

Comparing user input value with JSON object via ajax to ultimately update page content

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related