检查文章中所有元素的值

Question

我的 html 中有一个<article id="first">，我想FORM send button单击获取article内的所有inputs+selects并检查其中是否有任何包含一些值，如果是，请检查article中的所有元素是否都包含一个值，如果没有，则发出警报。 这是我的article(对不起，日本>.<(

<article id="first" style="display: none;">
<section>
<label for="hidzukeichibanmekoushin">日付一番目更新：</label>&nbsp;&nbsp;
<input type="date" name="hidzukeichibanmekoushin" value="{{ data.日付一番目更新 }}">
</section>
<section>
<label for="tantoushaichibanmekoushin">担当者一番目更新</label>&nbsp;&nbsp;
{% if data.担当者一番目更新 %}
<select name="tantoushaichibanmekoushin">
<option value="{{ data.担当者一番目更新 }}">{{ data.担当者一番目更新 }}</option>
<option value=""></option>
<option value="デフォルト">デフォルト</option>
</select>
{% else %}
<select name="tantoushaichibanmekoushin">
<option value=""></option>
<option value="{{ user.last_name }} {{ user.first_name }}">{{ user.last_name }} {{ user.first_name }}</option>
<option value="デフォルト">デフォルト</option>
</select>
{% endif %}
</section>
<section>
<label for="kontakutoichibanmekoushin">コンタクト一番目更新</label>&nbsp;&nbsp;
{% if data.コンタクト一番目更新 %}
<select name="kontakutoichibanmekoushin">
<option value="{{ data.コンタクト一番目更新 }}">{{ data.コンタクト一番目更新 }}</option>
<option value="受付">受付</option>
<option value="担当者">担当者</option>
<option value="責任者">責任者</option>
<option value="決裁者">決裁者</option>
<option value="社長">社長</option>
<option value="その他">その他</option>
<option value="デフォルト">デフォルト</option>
</select>
{% else %}
<select name="kontakutoichibanmekoushin">
<option value=""></option>
<option value="受付">受付</option>
<option value="担当者">担当者</option>
<option value="責任者">責任者</option>
<option value="決裁者">決裁者</option>
<option value="社長">社長</option>
<option value="その他">その他</option>
<option value="デフォルト">デフォルト</option>
</select>
{% endif %}
</section>
<section>
<label for="sutetasuichibanmekoushin">ステータス四番目更新</label>&nbsp;&nbsp;
{% if data.ステータス一番目更新 is not none %}
<select name="sutetasuichibanmekoushin">
<option value="{{ data.ステータス一番目更新 }}">{{ data.ステータス一番目更新 }}</option>
<option value="無応答">無応答</option>
<option value="現アナ">現アナ</option>
<option value="未コンタクト">未コンタクト</option>
<option value="一方的NG">一方的NG</option>
<option value="本社管理">本社管理</option>
<option value="競合外NG">競合外NG</option>
<option value="ネット未使用">ネット未使用</option>
<option value="その他NG">その他NG</option>
<option value="継続中">継続中</option>
<option value="アポ調整">アポ調整</option>
<option value="アポ">アポ</option>
<option value="デフォルト">デフォルト</option>
</select>
{% else %}
<select name="sutetasuichibanmekoushin">
<option value=""></option>
<option value="無応答">無応答</option>
<option value="現アナ">現アナ</option>
<option value="未コンタクト">未コンタクト</option>
<option value="一方的NG">一方的NG</option>
<option value="本社管理">本社管理</option>
<option value="競合外NG">競合外NG</option>
<option value="ネット未使用">ネット未使用</option>
<option value="その他NG">その他NG</option>
<option value="継続中">継続中</option>
<option value="アポ調整">アポ調整</option>
<option value="アポ">アポ</option>
<option value="デフォルト">デフォルト</option>
</select>
{% endif %}
</section>
<section>
<label for="bikouichibanmekoushin">備考一番目更新</label>&nbsp;&nbsp;
<input type="text" name="bikouichibanmekoushin" value="{{ data.備考一番目更新 }}">
</section>
<section>
<label for="next_hidzukeichibanmekoushin">NEXT_日付一番目更新</label>&nbsp;&nbsp;
<input type="date" name="next_hidzukeichibanmekoushin" value="{{ data.NEXT_日付一番目更新 }}">
</section>
<section>
<label for="next_jikanichibanmekoushin">NEXT_時間一番目更新</label>&nbsp;&nbsp;
<input type="time" name="next_jikanichibanmekoushin" value="{{ data.NEXT_時間一番目更新 }}">
</section>
</article>

Answer 1

我只在<form>中保存了整篇文章，并添加了一个按钮来提交表单。它将检查所有inputs，select具有值。

如果所有选择和输入都有值，则之后submit表单，警报显示您在表单中选择的所有值

e.preventDefault();确保页面在单击"提交表单"按钮时不会刷新。

这是适合您的工作代码

$("#submit_form").submit(function(e) {
e.preventDefault();
var queryString = $(this).serialize();
alert(queryString)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="submit_form" method="POST" action="">
<article id="first">
<section>
<label for="hidzukeichibanmekoushin">日付一番目更新：</label>&nbsp;&nbsp;
<input type="date" name="hidzukeichibanmekoushin" value="{{ data.日付一番目更新 }}" required>
</section>
<section>
<label for="tantoushaichibanmekoushin">担当者一番目更新</label>&nbsp;&nbsp; {% if data.担当者一番目更新 %}
<select name="tantoushaichibanmekoushin" required>
<option value="{{ data.担当者一番目更新 }}">{{ data.担当者一番目更新 }}</option>
<option value=""></option>
<option value="デフォルト">デフォルト</option>
</select>
{% else %}
<select name="tantoushaichibanmekoushin" required>
<option value=""></option>
<option value="{{ user.last_name }} {{ user.first_name }}">{{ user.last_name }} {{ user.first_name }}</option>
<option value="デフォルト">デフォルト</option>
</select>
{% endif %}
</section>
<section>
<label for="kontakutoichibanmekoushin">コンタクト一番目更新</label>&nbsp;&nbsp; {% if data.コンタクト一番目更新 %}
<select name="kontakutoichibanmekoushin" required>
<option value="{{ data.コンタクト一番目更新 }}">{{ data.コンタクト一番目更新 }}</option>
<option value="受付">受付</option>
<option value="担当者">担当者</option>
<option value="責任者">責任者</option>
<option value="決裁者">決裁者</option>
<option value="社長">社長</option>
<option value="その他">その他</option>
<option value="デフォルト">デフォルト</option>
</select>
{% else %}
<select name="kontakutoichibanmekoushin" required>
<option value=""></option>
<option value="受付">受付</option>
<option value="担当者">担当者</option>
<option value="責任者">責任者</option>
<option value="決裁者">決裁者</option>
<option value="社長">社長</option>
<option value="その他">その他</option>
<option value="デフォルト">デフォルト</option>
</select>
{% endif %}
</section>
<section>
<label for="sutetasuichibanmekoushin">ステータス四番目更新</label>&nbsp;&nbsp; {% if data.ステータス一番目更新 is not none %}
<select name="sutetasuichibanmekoushin">
<option value="{{ data.ステータス一番目更新 }}">{{ data.ステータス一番目更新 }}</option>
<option value="無応答">無応答</option>
<option value="現アナ">現アナ</option>
<option value="未コンタクト">未コンタクト</option>
<option value="一方的NG">一方的NG</option>
<option value="本社管理">本社管理</option>
<option value="競合外NG">競合外NG</option>
<option value="ネット未使用">ネット未使用</option>
<option value="その他NG">その他NG</option>
<option value="継続中">継続中</option>
<option value="アポ調整">アポ調整</option>
<option value="アポ">アポ</option>
<option value="デフォルト">デフォルト</option>
</select>
{% else %}
<select name="sutetasuichibanmekoushin" required>
<option value=""></option>
<option value="無応答">無応答</option>
<option value="現アナ">現アナ</option>
<option value="未コンタクト">未コンタクト</option>
<option value="一方的NG">一方的NG</option>
<option value="本社管理">本社管理</option>
<option value="競合外NG">競合外NG</option>
<option value="ネット未使用">ネット未使用</option>
<option value="その他NG">その他NG</option>
<option value="継続中">継続中</option>
<option value="アポ調整">アポ調整</option>
<option value="アポ">アポ</option>
<option value="デフォルト">デフォルト</option>
</select>
{% endif %}
</section>
<section>
<label for="bikouichibanmekoushin">備考一番目更新</label>&nbsp;&nbsp;
<input type="text" name="bikouichibanmekoushin" value="{{ data.備考一番目更新 }}" required>
</section>
<section>
<label for="next_hidzukeichibanmekoushin">NEXT_日付一番目更新</label>&nbsp;&nbsp;
<input type="date" name="next_hidzukeichibanmekoushin" value="{{ data.NEXT_日付一番目更新 }}" required>
</section>
<section>
<label for="next_jikanichibanmekoushin">NEXT_時間一番目更新</label>&nbsp;&nbsp;
<input type="time" name="next_jikanichibanmekoushin" value="{{ data.NEXT_時間一番目更新 }}" required>
</section>
<section>
<input type="submit" id="submit" value="Submit" />
</section>
</article>
</form>

希望这有帮助。