Getting items in a jQuery Object array to display in a div onclick

Question

I've got an array of objects, that provides the user a list of suggestions as they start to type. What I would like to happen is that when the user selects which suggestion they want, and click the submit button, then a price that is connected to that suggestion is displayed in a <div> under the search bar. I've been unsuccessful up to this point.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Device Recycling</title>
  <link rel="stylesheet" href="/device_recycle.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
    var projects = [
      {
        Device: "iPhone",
        Price1: "$299",
        Price2: "$199"
      },
      {
        Device: "iPhone 2",
        Price1: "$199",
        Price2: "$99"
      }
    ];

    $( "#device" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#device" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#device" ).val( ui.item.value );
        $( "#price1" ).val( ui.item.price1 );
        $( "#price2" ).html( ui.item.price2 );


        return false;
      }
    })



    $("#submit").click(function(){
     $( "#Price" ).append(  item.Price1 );
     });
  </head>
<body>

 <h1 id="font1">Quick Device Qoute</h1>
<div class="FormContainer">




  <input id="device"/>

  <input id ="submit" type="image" src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat-one-color/128/magnifying-glass-icon.png" alt="Submit button">
  <div id="ATT_Button" class="hidden"> 
     <input id ="ATT" type="image" src="http://classlawyer.lawyer/wp-content/uploads/2015/12/ATT-Logo-Image-Labeled-for-Reuse.png" alt="Submit button">
  </div>
  <div id="VZW_Button" class="hidden"> 
     <input id ="VZW" type="image" src="http://educationinactionri.org/Portals/0/Uploads/Images/Verizon_small.jpg" alt="Submit button">
  </div>
  <div id="Price"></div>

 </div>

</body>
</html>

Ultimately what I would like to end up doing is when the user hits submit, it displays Price1 in the <div> below, but then have another button that they can click to then see Price2. At this point though, I'll settle for just figuring out how to get Price1 in a <div> on clicking of the submit button.

can you give the complete html file with screenshots of issue — Baskar Rao
– Baskar Rao, Commented Jan 26, 2016 at 16:18

logic-unit · Accepted Answer · 2016-01-26 17:14:06Z

There are quite a few errors in your javascript, and you're trying to bind to elements with ids that don't exist.

I've put a working copy here that does roughly what you've outlined: https://jsfiddle.net/nkocyafb/

<input id="device" />

<input id="submit" type="image" src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat-one-color/128/magnifying-glass-icon.png" alt="Submit button" width="50">

<div id="Price"></div>

<script>
    $(function() {
      var projects = {
        "iPhone": {
                            Price1: "$299",
                            Price2: "$199"
        },
        "iPhone 2": {
                            Price1: "$199",
                            Price2: "$99"
        }
      };

      var list = [
        "iPhone",
        "iPhone 2"
      ];

      $("#device").autocomplete({
        minLength: 0,
        source: list,
        focus: function(event, ui) {
          $("#device").val(ui.item.label);
          return false;
        },
        select: function(event, ui) {
          $("#device").val(ui.item.value);
          $("#price1").val(ui.item.price1);
          $("#price2").html(ui.item.price2);


          return false;
        }
      });

      $("#submit").click(function() {
        $("#Price").empty();

        var device = $("#device").val();
        $("#Price").append(projects[device].Price1);
      });
    });
</script>

See the documentation for jQuery UI autocomplete for further details on how that works: https://jqueryui.com/autocomplete/

Collectives™ on Stack Overflow

Getting items in a jQuery Object array to display in a div onclick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related