Отправка формы jQuery не запускается

#javascript #html #jquery #django

#javascript #HTML #jquery #django

Вопрос:

У меня есть 2 формы в одном HTML-файле (не вложенном). Каждый делает свое дело и не полагается друг на друга. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что $(form).submit((event)=>{code}) работает только на:

 <form id="mainForm" action='' method="POST" enctype="multipart/form-data">
    {% csrf_token %}

    <!--Cover image-->
    <ul class="error" id="coverImageLink_errors"></ul>
    <div class="cover-img">
        {{ mainForm.coverImageLink|add_class:'actual-img' }}
        <img src="#" id="cover" alt="Your image" style="color: black;">
    </div>

    <!--Music data part-->
    <div class="music-data">
        <ul class="error" id="albumName_errors"></ul>
        <label for="{ mainForm.albumName.id_for_label }">title</label><br>
        {{ mainForm.albumName }} <br><br>
    </div>
    <input id='albumSubmit' type="submit" value="Next" class="main-form-upload">
</form>

<script>
    $('#mainForm').submit((event)=>{
        event.preventDefault();
        console.log('AJAX CALLED FOR MAIN FORM');
    });
</script>

Но не на:

 <form id="AdvancedForm" action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <ul class="last-step-error" id="advancedForm.non_field_errors"></ul>
    
    <section id="main-section">
     
        <!-- compresso page -->
        <div id="compresso-page">
            <div class="parent">
                <div class="name">0. Hello world</div>
                <ul class="pre-errors">
                    <li>Video file is not supported</li>
                    <li> 2 more</li>
                </ul>
            </div>
        </div>
    
    </section>

    <div style="height: 20px;"></div> <!-- prevents collision with button -->
    <input type="submit" value="Release" onclick="alert('Advanced form submit pressed')">
</form>

<script>
    $('#AdvancedForm').submit((event)=>{
        event.preventDefault();
        console.log('AJAX CALLED FOR ADVANCED FORM')
        const url = '{% url "validate-upload-collection" %}'
    })
</script>

Я вижу, AJAX CALLED FOR MAIN FORM но не AJAX CALLED FOR ADVANCED FORM .
По умолчанию используется расширенная форма display='none'

console.log(document.getElementById('AdvancedForm')) возвращает здесь

Если вас смущает {{ something }} , это просто некоторый синтаксис переменной django (веб-фреймворка). Эти переменные будут заполнены на стороне сервера, поэтому их нет в html.

1. Если вы делаете $("#AdvancedForm")[0] это в консоли, видите ли вы, что она правильно захватывает вашу форму?

2. Работает ли это, если вы измените его на $(document).on("submit", "#AdvancedForm", function() { alert("try this"); });

3. @g23 Я сделал именно это, и возвращается объект длиной 1. Моя форма находится внутри

4. @freedomn-m Нет.

5. Как насчет console.log($("[id=Advancedform]").length) ?

Ответ №1:

Возможно, это onclick="alert('Advanced form submit pressed')" мешает вашему обработчику. Попробуйте удалить это из кнопки отправки.

Еще одна вещь, которую я вижу, это то, что вторая форма не имеет реальных полей? Это может быть другое дело. Попробуйте добавить <input type="text" name="test" />