Question

我有一个小表格。在用户输入文本后，他可以在提交之前preview。对于1个选项表单标签，预览效果很好。对于2个选项表单标签，仅显示第一个。例如...... Heading (2 options) Name and Email和Heading (2 options) Gamma。为这两个＆＃34; 2选项＆＃34;输入两个变量时标题，然后只有preview中显示的第一个变量。有可能修复和如何？我没有看到解决方案。

＆＃13;

$(document).ready(function() {

    $(".add_choice #reset").click(function(event) {
        event.preventDefault();

        var text = '<br>Summary:<br><br>';
        var alertText = '';
        var proceed = 1;
        $(".add_choice .input").each(function(index, item) {

});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="add_choice" id="add_choice">
    <div id="internal">
    <div class="input">
    <label for="name">HEADING (2 options) Name | Email</label> 
    <input autocomplete="on" class='inp_cont' id="contact-name" name="contact name" placeholder="Enter your name" required=""
    type="text" /> 
    <input class='inp_cont' id="email" name="email" placeholder="Enter your email" required="" type="text" /></div>

＆＃13;

Answer 1

您只在课程.input后选择一个元素，您应该选择所有元素。

仅为了您的测试，我将其他元素放在其他.input类中，而不是将两个元素放在一个.input

中

$(document).ready(function() {

    $(".add_choice #reset").click(function(event) {
        event.preventDefault();

        var text = '<br>Check info:<br><br>';
        var alertText = '';
        var proceed = 1;
        $(".add_choice .input").each(function(index, item) {

            var elem = $(item).find("input[type='radio']:checked").length ? $(item).find("input[type='radio']:checked") : $(item).find('.inp_cont');
            if (elem.prop('required') && elem.val() == '') {
                alertText += "Fill " + $(item).find('label').text() + "  field" + "\n\r";
                $(item).css("color", "red");
                $(elem).on("click", function() {
                    $(item).css("color", "inherit");
                });
                proceed = 0;
            } else text += "<div id='" + item.id + "i'>" + $(item).find('label').text() + ": </div><br><br><span class='presubm_item'>" + elem.val() + "</span><br><br>";

        });
        if (!proceed) alert(alertText);
        else {

            $(".toc-wrapper a").each(function() {
                var href = $(this).attr("href") + 'i';
                $(this).attr("href", href);
            })
            $("#b-popup #popup_info").html(text);
            $(".add_choice #internal").hide();

            $("#b-popup").show();
            window.scrollTo(0, 0);
            $(document).trigger('scroll');
            $(document).trigger("preview");
        }
    });
    $("#b-popup #popup_back").click(function(event) {

        $(".add_choice #internal").show();
        $("#b-popup").hide();
        $(".toc-wrapper a").each(function() {
            var href = $(this).attr("href");
            href = href.substring(0, href.length - 1);

            $(this).prop("href", href);
        })
        window.scrollTo(0, 0);
        $(document).trigger('scroll');
    });

    $("#b-popup #popup_submit").click(function(event) {

        $(".add_choice").submit();
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="add_choice" id="add_choice">
    <div id="internal">
    <div class="input">
    <label for="name">HEADING (2 options) Name | Email</label> 
    <input autocomplete="on" class='inp_cont' id="contact-name" name="contact name" placeholder="Enter your name" required=""
    type="text" />
    </div>
    <div class="input">
    <input class='inp_cont' id="email" name="email" placeholder="Enter your email" required="" type="text" /></div>
    <div class="input">
    <label for="alpha"> HEADING (1 option) Alpha</label> 
    <textarea class='inp_cont' id="alpha" name="alpha" cols="50" rows="10"
    placeholder="Alpha" required=""></textarea></div>
    <div class="input">
    <label for="beta"> HEADING (1 option) Beta</label> 
    <textarea class='inp_cont' id="beta" name="beta" cols="50" rows="10"
    placeholder="Beta" required=""></textarea></div>
    <div class="input">
    <label for="gamma"> HEADING (2 options) Gamma</label> 
    <select class='inp_cont' name="top5" id="gamma">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
    </div>
    <div class="input">
    <select class='inp_cont' name="top5" id="delta">
      <option>a</option>
      <option>b</option>
      <option>c</option>
      <option>d</option>
      <option>e</option>
      <option>f</option>
      <option>g</option>
      <option>h</option>
    </select></div>
    <input id="reset" style="width:150px; padding: 0" type="reset" value="Preview" /> 
    <input id="send" style="width:150px; padding: 0" type="submit" value="Submit" /></div>
    <div id="b-popup">
      <div class="b-popup-content">
        <div id="popup_info">Text in Popup</div>
        <div class="b-popup-content-buttons">
        </div>
      </div>
    </div>
  </div>

您确实需要更改您的JavaScript代码。

预览表单只显示一个变量

1 个答案: