मेरे पास पृष्ठ पर बहुत सारे रूप हैं और जब उनमें से एक सबमिट किया जाता है तो मैं अजाक्स के माध्यम से अनुरोध भेजना चाहता हूं और लेख और अन्य जानकारी की एक आईडी है। तो मुझे यह जांचने की ज़रूरत है कि जिस फॉर्म पर क्लिक किया गया है वह event.target जैसा ही है या नहीं। मैंने ऐसा कुछ किया लेकिन यह नहीं पता कि यह सही है (पहला कंसोल.लॉग काम करता है लेकिन दूसरा नहीं):

<div id = "list">
            {% for article in news %}
                <a href="{{ article.resource }}"><h1>{{ article.title }}</h1></a>
                <p>{{ article.published }}</p>
                <img src = "{{ article.url }}">
                <p>
                    <button><a href="#" class="vote" id="{{ article.id }}" action = "upvote">Upvote</a></button>
                    <button><a href="#" class="vote" id="{{ article.id }}" action = "downvote">Downvote</a></button>
                </p>
                <div id="span">
                    {% with article.upvotes.count as total_upvotes and article.downvotes.count as total_downvotes %}
                        <span upvote-id = "{{ article.id }}">{{ total_upvotes }}</span><span> upvote{{ total_votes|pluralize}}</span>
                        <span downvote-id = "{{ article.id }}">{{ total_downvotes }}</span><span> downvote{{ total_votes|pluralize}}</span>
                    {% endwith %}
                </div>
                <form method = 'post' action = '{% url "news:news_list" %}' form-id = '{{ article.id }}' class="form">
                    {{ form.as_p }}
                    {% csrf_token %}
                    <input type = "submit" value = "post">
                </form> 
            {% endfor %}
        </div>
{% endblock %}
{% block domready %}
        const 
            list = document.getElementById('list'),
            items = document.getElementsByClassName('vote');
            forms = document.getElementsByClassName('form');

        list.addEventListener('click', voteFunc);
        list.addEventListener('submit', commentFunc);

        function commentFunc(event){
            event.preventDefault();
            const clickedForm = event.target;
            console.log('event triggered');
            for (let form in forms){
                if (form == clickedForm){
                    console.log('form is event.target')
                    $.ajax({
                        url: '{% url "news:news_list" %}',
                        type: 'POST',
                        data: {'id':$(event.target).attr('form-id'), 'title':$(this).elemets['title_field'].text(), 'body':$(this).elemets['body_field'].text()}, 
                        dataType: 'json'
                    })
                }
            }
        }

आशा है कि इसे बेहतर तरीके से कार्यान्वित करने की सलाह सुनने की आशा है और इसमें कौन-सा Event.target शामिल है

1
Denys 14 फरवरी 2021, 12:15

1 उत्तर

सबसे बढ़िया उत्तर

आप फ़ॉर्म सबमिट ईवेंट के लिए ईवेंट हैंडलर लिख सकते हैं। इसलिए, जब भी सबमिट बटन (पोस्ट) पर क्लिक किया जाता है तो यह ईवेंट कॉल हो जाएगा फिर .serialize() विधि और &name=value का उपयोग करके फॉर्म-आईडी भी संलग्न करें और फिर आप इसे बैकएंड में पास कर सकते हैं।

डेमो कोड :

//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>
1
Swati 14 फरवरी 2021, 14:27