Adding list items using jquery

Question

Please check my code. The code adds the list item but it suddenly disappears. Kindly let me know the error in my code.

<button type="submit" class="btn btn-primary" id="needButton">Need</button>
<button type="submit" class="btn btn-primary btn-success" id="haveButton" >Have</button>
      </form>
      <div class="myNeed">
        <ul class="need">
        <li>
          The needed items are
        </li>
      </ul>
      </div>

This is js code

$(document).ready(function() {
  $("#needButton").click(function () {
    var needed = $("#bill").val();
    $(".need").append("<li>" + needed + "<li>");
  });
});

Change <button type="submit" to <button type="button". Form is getting submitted currently. — Rayon
– Rayon, Commented Sep 20, 2022 at 7:53

Rory McCrossan · Accepted Answer · 2022-09-20 08:00:23Z

2

The issue is because the button click triggers the form to be submit which redirects the page.

To fix this, hook your event handler to the submit event of the form element and call preventDefault() on the event. Using this methoid over change the button type means that users can still trigger the action by pressing the return key on the keyboard when the input has focus.

jQuery($ => {
  $("form").on('submit', e => {
    e.preventDefault();
    var needed = $("#bill").val();
    $(".need").append(`<li>${needed}</li>`);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<form>
  <input type="text" id="bill" />
  <button type="submit" class="btn btn-primary btn-success" id="haveButton">Have</button>
</form>
<div class="myNeed">
  <ul class="need">
  </ul>
</div>

answered Sep 20, 2022 at 8:00

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

Rayon Over a year ago

Good point #Accessibility :)

Sunny16 · Accepted Answer · 2022-09-20 08:04:17Z

0

i think there is a typo you write id=haveButton but in js code you type #needButton try change that to #haveButton

answered Sep 20, 2022 at 8:04

Sunny16

513 bronze badges

Comments

Mohamad Elhadidy · Accepted Answer · 2022-09-20 08:10:07Z

0

i did a simple code for here i hop it will help you

<button id="add">Have</button>
<ul class="need"></ul>
<script>
     $(document).ready(function () {
          $("#add").click(function () {
               var needed = '123.';
               $(".need").append("<li>" + needed + "</li>");
          });
     });
</script>

answered Sep 20, 2022 at 8:10

Mohamad Elhadidy

91 bronze badge

Collectives™ on Stack Overflow

Adding list items using jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related