简体   繁体   中英

Underscore.js template form fields don't submit

I'm running into a little problem as I test all of my application's form submissions. It's a backbone application with underscore.

I've noticed that on the two forms that have loops in them, the form fields within those loops don't send when the submit button is pressed. I have no idea why!

Here's an example of a form being submitted

<form role="form" action="" method="POST" id="voters-guide-survey">
    <div class="row">
        <div class="col-xs-4">
            Candidate #: <strong><%= candidate.id %></strong>
        </div>
        <div class="col-xs-4">
            Name: <strong><%= candidate.firstName %> <%= candidate.lastName %></strong>
        </div>
    </div>

    <hr />

    <div class="row">
        <div class="col-xs-12">
            <p>The following are 5 policy statements dealing with issues in the news. Please check the option that best reflects your point of view.</p>
        </div>
    </div>

<% _.each(questions, function(questionData) { %>
    <div class="row">
        <div class="form-group col-xs-8">
            <%= questionData.question %><br />
            <input type="hidden" name="question-<%= questionData.id %>" value="<%= questionData.question %>" />
            <span class="error" for="survey-question-<%= questionData.id %>"></span>
        </div>
    </div>

    <div class="row">
        <div class="form-group col-xs-6">
            <% _.each(questionData.options, function(option) { %>
            <label class="radio-inline"><input type="radio" name="survey-question-<%= questionData.id %>" value="<%= option.name %>" required /> <%= option.name %></label><br />
            <% }); %>
        </div>
    </div>
<% }); %>

    <hr />

    <div class="row">
        <div class="form-group col-xs-4 col-xs-offset-4">
            <input type="hidden" name="numQuestions" value="<%= questions.length %>" />
            <% if (pageStatus == 'disabled') { %>
            <a href="javascript:void(0);" path="questionnaire/endorsements" candidate-id="<%= candidate.id %>">Continue to Next Page &raquo;</a>
            <% } else { %>
            <input type="hidden" name="id" value="<%= candidate.id %>" />
            <input type="hidden" name="page" value="endorsements" />
            <input type="submit" name="save-questionnaire" value="Submit and Continue" />
            <% } %>
        </div>
    </div>
</form>

The loops are iterating through the following data

    {
    "questions": [
        {
            "id": 1,
            "question": "Question 1",
            "options": [
                {"id": 1, "name": "Strongly agree"},
                {"id": 2, "name": "Somewhat agree"},
                {"id": 3, "name": "Have mixed feelings"},
                {"id": 4, "name": "Somewhat disagree"},
                {"id": 5, "name": "Strongly disagree"},
                {"id": 6, "name": "Have no opinion"},
                {"id": 7, "name": "Do not wish to respond"}
            ],
            "answer": ""
        },
        {
            "id": 2,
            "question": "Question 2",
            "options": [
                {"id": 1, "name": "Strongly agree"},
                {"id": 2, "name": "Somewhat agree"},
                {"id": 3, "name": "Have mixed feelings"},
                {"id": 4, "name": "Somewhat disagree"},
                {"id": 5, "name": "Strongly disagree"},
                {"id": 6, "name": "Have no opinion"},
                {"id": 7, "name": "Do not wish to respond"}
            ],
            "answer": ""
        },
        {
            "id": 3,
            "question": "Question 3",
            "options": [
                {"id": 1, "name": "Strongly agree"},
                {"id": 2, "name": "Somewhat agree"},
                {"id": 3, "name": "Have mixed feelings"},
                {"id": 4, "name": "Somewhat disagree"},
                {"id": 5, "name": "Strongly disagree"},
                {"id": 6, "name": "Have no opinion"},
                {"id": 7, "name": "Do not wish to respond"}
            ],
            "answer": ""
        },
        {
            "id": 4,
            "question": "Question 4",
            "options": [
                {"id": 1, "name": "Strongly agree"},
                {"id": 2, "name": "Somewhat agree"},
                {"id": 3, "name": "Have mixed feelings"},
                {"id": 4, "name": "Somewhat disagree"},
                {"id": 5, "name": "Strongly disagree"},
                {"id": 6, "name": "Have no opinion"},
                {"id": 7, "name": "Do not wish to respond"}
            ],
            "answer": ""
        },
        {
            "id": 5,
            "question": "Question 5",
            "options": [
                {"id": 1, "name": "Strongly agree"},
                {"id": 2, "name": "Somewhat agree"},
                {"id": 3, "name": "Have mixed feelings"},
                {"id": 4, "name": "Somewhat disagree"},
                {"id": 5, "name": "Strongly disagree"},
                {"id": 6, "name": "Have no opinion"},
                {"id": 7, "name": "Do not wish to respond"}
            ],
            "answer": ""
        }
    ]
}

Is there something I'm missing about how underscore templates work?

When the submit button is clicked, the only data that comes through to is the stuff that is outside the loop, so just the hidden fields at the end.

How do I make this work?

God, I'm so silly sometimes. It has nothing to do with anything regarding underscore, and everything regarding the fact that my field names have hyphens in them. I forgot that I had to revert a few of my form files, and forgot to change the hypens.

Sorry for the sillyness!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM