在表单提交之前，Javascript没有执行

Question

我目前有一个表单，有两个按钮，“添加”和“提交”。 使用javascript，只要点击“添加”，我就会在表单中添加更多行。 但是，在我点击“提交”之前，它不会更新表单。 如何在不点击“提交”按钮的情况下添加行？

<form method="post" id="formset">
<table>
{% csrf_token %}
{{ formset.management_form }}
{{ formset }}

<div id="empty_form">
<tr>
{% for field in formset.empty_form.visible_fields %}
<td>{{ field }}</td>
{% endfor %}
</tr>
</div>
</table>
<button id="add_more" type="button">Add</button>
<button type="submit" id="submit">Submit</button>
</form>

使用Javascript：

$('#add_more').click(function() {
var form_idx = $('#id_form-TOTAL_FORMS').val();
$('#formset').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
$('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
});

Answer 1

查看target.oninput = functionRef; https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput

例：

 let input = document.querySelector('input'); let log = document.getElementById('log'); input.oninput = handleInput; function handleInput(e) { log.textContent = `The field's value is ${e.target.value.length} character(s) long.`; } 

 <input type="text" placeholder="Type something here to see its length." size="50"> <p id="log"></p>