Saya memiliki <article id="first"> di html saya dan saya ingin pada FORM send button klik dapatkan semua inputs + selects di dalam article dan periksa apakah ada yang mengandung beberapa nilai dan jika ya periksa apakah semua elemen di article berisi nilai dan jika tidak buat peringatan. ini article saya (Maaf untuk bahasa Jepang itu >.<)


<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>
0
Marcel Kopera 18 Juni 2020, 06:08

1 menjawab

Jawaban Terbaik

Saya baru saja memiliki seluruh artikel dalam <form> dan menambahkan tombol untuk mengirimkan formulir. Ini akan memeriksa semua inputs dan select yang memiliki nilai.

Jika semua pilihan dan input memiliki nilai, Anda melakukan submit formulir setelahnya dan peringatan menunjukkan semua nilai yang telah Anda pilih dalam formulir

e.preventDefault(); memastikan bahwa halaman tidak menyegarkan saat klik tombol kirim formulir.

Ini kode yang berfungsi untuk Anda

$("#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>

Semoga ini membantu.

1
Always Helping 18 Juni 2020, 03:35