[Answered ]-What event.target will contain if I added submit event listener on the form

by

1👍

✅

You can write event handler for form submit event .So, whenever submit button(post) is clicked this event will get called then use .serialize() method to get all inputs inside your form and also attach form-id using &name=value and then you can pass same to backend.

Demo Code :

//when form will get submit
$("form.form").submit(function(e) {
  //serialize will get all inputs as name=value separted wth `& `
  console.log("data to send --> " + $(this).serialize() + "&id=" + $(this).attr('form-id'))
  $.ajax({
    type: "POST",
    url: '{% url "news:news_list" %}',
    data: $(this).serialize() + "&id=" + $(this).attr('form-id'), //send same
    dataType: 'json'
  });
  e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">

  <a href="{{ article.resource }}">
    <h1>A1</h1>
  </a>
  <p>abcd..</p>
  <img src="{{ article.url }}">
  <p>
    <button><a href="#" class="vote" data-id="1" action = "upvote">Upvote</a></button>
    <button><a href="#" class="vote" data-id="1" action = "downvote">Downvote</a></button>
  </p>
  <div id="span">

    <span upvote-id="1">23</span><span> 54</span>
    <span downvote-id="1">2</span><span> 56</span>
  </div>
  <form method='post' action='{% url "news:news_list" %}' form-id='1' class="form">
    <p><label>somehting:</label>
      <input type="text" name="something"></p>
    <input type="submit" value="post">
  </form>

  <a href="{{ article.resource }}">
    <h1>A</h1>
  </a>
  <p>abcd..</p>
  <img src="{{ article.url }}">
  <p>
    <button><a href="#" class="vote" data-id="2" action = "upvote">Upvote</a></button>
    <button><a href="#" class="vote" data-id="2" action = "downvote">Downvote</a></button>
  </p>
  <div id="span">

    <span upvote-id="2">23</span><span> 54</span>
    <span downvote-id="2">2</span><span> 56</span>
  </div>
  <form method='post' action='{% url "news:news_list" %}' form-id='2' class="form">
    <p><label>somehting:</label>
      <input type="text" name="something"></p>
    <input type="submit" value="post">
  </form>
</div>
👤Swati

Leave a comment