0

私は完全に困惑しています。インタラクティブ性のためにいくつかのJSでカスタマイズされたフォームがあります。とても簡単です。そしてそれはローカルでうまく機能します。ただし、サーバーでは、ユーザーがドロップダウン選択を使用すると、フォームは送信されません。

私はこれを引き起こしているものを見ることができず、それは私を怒らせています。

ライブフォームはこちらです： http： //trainer.cbirt.org/events/test-event/sign-up/

JSは現在圧縮されていないため、これをトラブルシューティングできます。

これまでに試しました：

  • サーバー上のVEを吹き飛ばして再構築する
  • 関連するjsをファイルのローカルに配置する
  • jsが日曜日までの7つの方法でどのように機能するかを作り直します

私が残して考えられる唯一のことは、すべてのJSをローカルでホストすることですが、提出がJSに基づいていないため、それが機能する理由は意味がありません。

ありとあらゆる提案を歓迎します。

フォームコード：

{% extends "events/base.html" %}

{% block page_class %}full-screen{% endblock page_class %}

{% block content%}

<h1>Sign Up for {{ event.title }}</h1>

<ul class="instructions">
<li>Fill in your name and email address, and tell us if you are a Team member</li>
<li>Fill in the form that appears</li>
<li>Click Submit</li>
</ul>

{% if form.errors %}
    <ul class="errors">
        {% for error in form.errors %}
            {% if error == "first_name" %}
                <li>Please enter your <strong>first name</strong>.</li>
            {% endif %}
            {% if error == "last_name" %}
                <li>Please enter your <strong>last name</strong>.</li>
            {% endif %}
            {% if error == "email" %}
                <li>Please enter your <strong>email</strong>.</li>
            {% endif %}
        {% endfor %}
    </ul>
{% endif %}

<form method="post" action="" id="signup">

    {% csrf_token %}

    <div class="form_block">
        <label for="id_first_name">First name:</label>
        <input id="id_first_name" type="text" name="first_name" maxlength="50" />
    </div>

    <div class="form_block">
        <label for="id_last_name">Last name:</label>
        <input id="id_last_name" type="text" name="last_name" maxlength="50" />
    </div>

    <div class="form_block">
        <label for="id_email">Email:</label>
        <input id="id_email" type="text" name="email" maxlength="75" />
    </div>

    <div class="form_block team_mem">
        <label for="id_tbi_team_member">Are you a TBI Team Member?</label>
        <div class="yes-no">
            <span class="yes">Yes</span>
            <span class="no">No</span>
        </div>
        <input type="checkbox" name="tbi_team_member" id="id_tbi_team_member" />
    </div>

    <section class="team-member">
        <div class="form_block">
            <label for="id_hotel_checkin_date">Hotel checkin date:</label>
            <input type="text" name="hotel_checkin_date" id="id_hotel_checkin_date" />
        </div>

        <div class="form_block">
            <label for="id_hotel_checkout_date">Hotel checkout date:</label>
            <input type="text" name="hotel_checkout_date" id="id_hotel_checkout_date" />
        </div>

        <div class="form_block">
            <label for="id_yes_share">Are you willing to share a room?</label>
            <div class="yes-no">
                <span class="yes">Yes</span>
                <span class="no">No</span>
            </div>
            <input type="checkbox" name="yes_share" id="id_yes_share" />
        </div>

        <div class="form_block">
            <label for="id_share_suite">Are you willing to share a suite?</label>
            <div class="yes-no">
                <span class="yes">Yes</span>
                <span class="no">No</span>
            </div>
            <input type="checkbox" name="share_suite" id="id_share_suite" />
        </div>

        <div class="form_block">
            <label for="id_team_dinner">Will you join us for the team dinner?</label>
            <div class="yes-no">
                <span class="yes">Yes</span>
                <span class="no">No</span>
            </div>
            <input type="checkbox" name="team_dinner" id="id_team_dinner" />
        </div>

    </section>

    <section class="not-team-member">

        <div class="form_block">
            <h3>Price of training per day - $40</h3>
        </div>

        <div class="form_block">
            <label for="id_payment_method">Payment method:</label>
            <select name="payment_method" id="id_payment_method">
                <option value="" selected="selected">---------</option>
                <option value="2">Cash</option>
                <option value="3">Check</option>
                <option value="4">PO</option>
            </select>
        </div>

        <div class="form_block">
            <h4>Cash and checks will be collected at the door.</h4>
        </div>

    </section>

    <section class="general">

        <div class="form_block">
            <label for="id_dietary_restrictions">Do you have dietary restrictions?</label>
            <input id="id_dietary_restrictions" type="text" name="dietary_restrictions" maxlength="200" />
        </div>

        <div class="form_block">
            {% if event.pdu %}
                <p>{{ event.pdu.content }}</p>
            {% endif %}
            {% if event.ceu %}
                <p>{{ event.ceu.content }}</p>
            {% endif %}
        </div>

        <div class="form_block">
            <label for="id_your_notes">Notes and special accommodations:</label>
            <textarea id="id_your_notes" rows="10" cols="40" name="your_notes"></textarea>
        </div>

    </section>

    <div class="form_block">
        <input type="submit" value="Submit" class="button" id="event-signup" />
    </div>
</form>

{% endblock content %}

{% block addthis %}{% endblock addthis %}

そしてJS

$('#id_payment_method').change(function(event) {
    //console.log($(this));
    $('option').each(function(event) {
        $('option:not(:selected)').attr('selected', false);
        $('option:selected').attr('selected', true);
    });
});
4

1 に答える 1

0

私が見ることができるのは、ラジオボックスに基づいて非表示/表示されるフィールドがあります。

フォームの送信時にこれらが必要ないことを確認します。はいの場合、おそらく同じページで行き詰まる可能性がありますが、フィールド エラーが表示されないため、何も出力されません。

これをデバッグするには、ラジオ フィールドの JavaScript を無効にし、各フィールドのフィールド エラーを表示します。

これが役立つことを願っています。

于 2012-12-17T16:31:12.630 に答える