Проверка значений всех элементов в статье - PullRequest
Новая
       0

Проверка значений всех элементов в статье

0 голосов
/ 18 июня 2020

У меня есть <article id="first"> в моем html, и я хотел бы FORM send button щелкнуть, получить все inputs + selects внутри article и проверить, содержит ли какой-либо из них какое-либо значение, и если да, проверьте если все элементы в article содержат значение, и если не сделать предупреждение. вот мой article (Простите за то японское>. <) </p> 


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

1 Ответ

1 голос
/ 18 июня 2020

У меня есть только вся статья в <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>

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...