How To Display Next Item On Form Html

January 30, 2024 Post a Comment

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

Solution 1:

You are only incrementing indexafter 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]);
});

Solution 2:

Increment indexbefore 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.

Solution 3:

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]);
});

Solution 4:

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]);    
  });

Solution 5:

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>

JavaScript Sample