I have 2 forms in one html file(Not nested). Each do their own thing and do not rely on each other. The problem i'm currently facing is that $(form).submit((event)=>{code})
only works on:
<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>
But not on:
<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>
I see AJAX CALLED FOR MAIN FORM
but not AJAX CALLED FOR ADVANCED FORM
. The advanced form is display='none'
by default
console.log(document.getElementById('AdvancedForm'))
returns here
If you are confused with {{ something }}
, it's just some django(Web framework) variable syntax. Those variables will be filled in on the server side so that is not present in the html.
It might be that onclick="alert('Advanced form submit pressed')"
interferes with your handler. Try to remove that from the submit button.
One other thing I see is that the second form has no real fields? That might be another thing. Try adding <input type="text" name="test" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.