我有一个小表格。在用户输入文本后,他可以在提交之前preview
。
对于1个选项表单标签,预览效果很好。
对于2个选项表单标签,仅显示第一个。
例如...... Heading (2 options) Name and Email
和Heading (2 options) Gamma
。为这两个" 2选项"输入两个变量时标题,然后只有preview
中显示的第一个变量。有可能修复和如何?我没有看到解决方案。
$(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;
答案 0 :(得分:0)
您只在课程.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代码。