时间戳

首页 > 解决方案 > 表单提交前 Javascript 未执行

javascript - 表单提交前 Javascript 未执行

问题描述

我目前有一个表格，有两个按钮，“添加”和“提交”。使用 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);
});

标签： javascriptdjangoforms

解决方案

查看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>

推荐阅读