CODEWITHSUNDEEP
javascriptjqueryarrays
IProgrammer
IProgrammer

Reputation: 11

How to display next item on form HTML

I am trying to display next item from array JSON with the displayItem function, but after clicking the button, the form reloads the first value (arrayResponse[0]). What should I do to display the next item instead?

$(document).ready(function() {
  var firstElement;
  var arrayResponse;
  var index =0;    

  var request = new XMLHttpRequest();

  // When the file has loaded,
  request.onload = function () {

    // parse the JSON text into an array of post objects.
    arrayResponse = JSON.parse(request.responseText);

    firstelement = arrayResponse[0];
    $("#name").val(firstelement.name);
    $("#author").val(firstelement.author);
    $("#content").val(firstelement.content);     
  };

  request.open("GET", "http://127.0.0.1/HTML_JavaScripts_Test/posts.json", true);
  request.send(null);

  $("#nextButton").bind("click", function(){
    displayItem(arrayResponse[index]);
    index++;
  });

  function displayItem(item) {
    $("#name").val(item.name);
    $("#author").val(item.author);
    $("#content").val(item.content);   
  }
});

Upvotes: 0

Views: 181

Answers (5)

IProgrammer
IProgrammer

Reputation: 11

I understand problem.. Javascripts code is correct! But it doesn't work on my html code... I tried on another simple html code and work it!

this is my html code :<html><head><meta charset="utf-8"><title>Blog</title><link rel="stylesheet" href="styles.css"></head><body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/><script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"/><script src="main2.js"/><div class="container"> <form id="contact" action="" method="post"><h3>Colorlib Contact Form</h3><h4>Contact us for custom quote</h4><fieldset><input id="name" placeholder="Name" type="text" tabindex="1" ></fieldset><fieldset><input id="author" placeholder="Author" type="text" tabindex="2" ></fieldset><fieldset><textarea id="content" placeholder="Content...." tabindex="5" /></fieldset><fieldset> <button id="nextButton"> Next </button> </fieldset><p class="copyright">Designed by <a href="https://colorlib.com" target="_blank" title="Colorlib">Colorlib</a></p></form></div> </body></html>

Upvotes: 0

Gabriel Bourgault
Gabriel Bourgault

Reputation: 852

You are only incrementing index after setting the display.

You set the first element from the onload, and then you show that same element from your button click.

This should work :

$("#nextButton").bind("click", function(){
    index++;
    displayItem(arrayResponse[index]);
});

Upvotes: 1

praveen
praveen

Reputation: 485

Your code will display the next element if you click the button second time. But if you want to display the next value for the first time you click on button, increase the index first and call the function.

 $("#nextButton").bind("click", function(){
    index++;
    displayItem(arrayResponse[index]);    
  });

Upvotes: 0

Justin Waite
Justin Waite

Reputation: 865

Right now you load the first item (index 0) and then when you click the next button it loads the same item before you increase the index. Increase the index first and then load the next item

$("#nextButton").bind("click", function(){
  index++;
  displayItem(arrayResponse[index]);
});

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36438

Increment index before calling displayItem(). As it is, you display arrayResponse[0] on load, then leave index at 0 for the next display.

Instead:

$("#nextButton").bind("click", function(){
  index++;

  if (index < arrayResponse.length)
    displayItem(arrayResponse[index]);
});

Notice that we're also checking that index is valid before calling displayItem; no sense trying to display elements past the end of the array.

Upvotes: 0

Related Questions