Connecting an HTML button with Javascript object data

Question

I'm trying to build a searchable database that will allow a user to type in the name of a state and see a small subset of that state's laws (traffic laws, age of consent, conceal and carry laws, etc.). I'm getting confused on how a user submitted string will interact with my Javascript objects. I have seen people submitting questions regarding adding user-submitted integers or concatenating but what I am trying to do is slightly different.

I am able to assign the user-submitted text as a variable via the getElementById method but now I'm lost. My question is this: How do I connect that user submitted variable with my objects' key values in Javascript so that when a user types in "Minnesota" and clicks the find button it retrieves and displays my Javascript data (which is information about Minnesota's state laws stored as object keys)?

Here is a subset of the HTML in question:

<div class="formDiv">
<form id="searchbox" action="">
  <!--Search field-->
  <input id="search" type="text" placeholder="Ex: Minnesota"></input>
  <!--Submit button-->
  <input id="submit" type="submit" value="Search"></input>
</form>
</div>
<!--Where I want the Javascript object to be displayed-->
<div class="answer"><p></p></div>

And here is the Javascript with just one object for simplicity:

var Minnesota = {
  name: "Minnesota",
  consent: 18,
  openBottle: true,
  deathPen: false,
  conceal: "Conceal & Carry",
  txtDriveBan: true,
  talkDriveBan: false
}
$(document).ready(function() {
  $("#submit").on('click', function(){
  var State = document.getElementById("#search");
  //At this point, what do I write to display Minnesota's information stored in the object?//
  });
});

Thanks very much for any help!

check this api.jquery.com/data

gp.
– gp.

2014-08-10 03:19:02 +00:00
Commented Aug 10, 2014 at 3:19 — gp.
– gp., Commented Aug 10, 2014 at 3:19

Scott Mitchell · Accepted Answer · 2014-08-10 03:32:05Z

1

here you go I implemented this fiddle for you with how I'd handle what you need. I changed the data structure so that the state names are the keys...

http://jsfiddle.net/yc7w364t/

var stateData = {
    "minnesota" : {
      consent: 18,
      openBottle: true,
      deathPen: false,
      conceal: "Conceal & Carry",
      txtDriveBan: true,
      talkDriveBan: false
    }
}

answered Aug 10, 2014 at 3:32

Scott Mitchell

6984 silver badges11 bronze badges

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

4 Comments

Haymaker87 Over a year ago

I changed my data structure to put the state names as keys, although it doesn't seem to be working in that js fiddle link.

Haymaker87 Over a year ago

edit: nevermind, something was wrong with my browser. Thanks again!

Scott Mitchell Over a year ago

No problem! sounds good. An upvote or check would be great :P hah trying to raise my rep ^^

Haymaker87 Over a year ago

Apparently I don't have enough "rep" to upvote this so I gave you a check.

celeritas · Accepted Answer · 2014-08-10 03:34:13Z

0

The keys in your object should be the name of the state. Then you can do this:

var states = {
    "Minnesota": {
        consent: 18,
        openBottle: true,
        deathPen: false,
        conceal: "Conceal & Carry",
        txtDriveBan: true,
        talkDriveBan: false
    }
}

$(document).ready(function() {
$("#submit").on('click', function(e){
  e.preventDefault(); // Don't submit the form.
  var State = document.getElementById("#search");
  var answerString = '';
  for (var key in states[State]){
     answerString += '<p>' + key + ': ' + states[State][key] + '</p>';
  }
  $('#answer').html(answerString);
 });
});

Note that you should change the div that will contain the answer to have id "answer", not class "answer".

edited Aug 10, 2014 at 3:34

answered Aug 10, 2014 at 3:24

celeritas

2,2892 gold badges19 silver badges28 bronze badges

2 Comments

Scott Mitchell Over a year ago

I also thought the same as far as the data structure he was using :) And the id for answer as well actually. Twinsies.

celeritas Over a year ago

Good call. I also saw your solution and I realized I needed to add e.preventDefault to mine.

Collectives™ on Stack Overflow

Connecting an HTML button with Javascript object data

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related