Question

我在表单中有一组单选按钮，复选框和一个日期选择器。我想在提交表单之前使用JQuery显示所选的选项......有点像提交页面之前的预览。我不知道为什么我的JQuery不起作用。我也有字段，那些显示得很好。只是无法获得单选按钮选择值，复选框选择值或显示的日期选择器选择值。以下是我的HTML：

<div class="col-12 col-md-6">
     <input type="text" id="f-name" name="full-name" placeholder="Full Name*" onblur="if (this.placeholder == '') {this.placeholder = 'Full Name*';}" onfocus="if (this.placeholder == 'Full Name*') {this.placeholder = '';}">
</div>
 <div class="col-12 col-md-4">
      <span>Date of Request*</span>
      <input type="text" id="request-date" placeholder="Select a Date" class="input-type-date datepicker-here" data-language="en" onblur="if (this.placeholder == '') {this.placeholder = 'Select a Date';}" onfocus="if (this.placeholder == 'Select a Date') {this.placeholder = '';}">
</div>
<div class="col-12 col-md-4">
     <span>Contact Preference*</span>
     <label for="phone">
     <input type="radio" name="contact-pref" value="Phone" id="phone"> Phone
     </label>
     <label for="email">
     <input type="radio" name="contact-pref" value="Email" id="email"> Email
     </label>
</div>
<div class="col-12 col-md-4">
     <label for="spec-st"><input type="checkbox" name="info-pref" id="spec-st" value="Specification Street"> Specification Street</label>
</div>
<div class="col-12 col-md-4">
     <label for="parts-n-kits"><input type="checkbox" name="info-pref" id="parts-n-kits" value="Parts &amp; Kits List"> Parts &amp; Kits List</label>
</div>

...在预览页面的表格中向下：

<div class="col-12 col-md-5 spacing">
     <h5><strong>Full Name</strong></h5><div id="input1"></div>
</div>
<div class="col-12 col-md-5 spacing">
     <h5><strong>Date of Request</strong></h5><div id="input7"></div>
</div>
<div class="col-12 col-md-5 spacing">
     <h5><strong>Contact Preference</strong></h5><div id="input9"></div>
</div>
<div class="col-12 col-md-5 spacing">
     <h5><strong>Report Preferences</strong></h5><div id="input10"></div>
 </div>

这是JQuery：

$('#f-name').keyup(function() {
    $('#input1').text($(this).val());
});
$('#request-date').click(function() {
    $('#input7').text($(this).val());
});
$("[name='contact-pref']:checked").each(function () {
    $('#input9').text($(this).val());
});
$("[name='info-pref']:checked").each(function () {
    $('#input10').text($(this).val());
});

Answer 1

＆＃13;

$('#f-name').keyup(function() {
    $('#input1').text($(this).val());
});
$('#request-date').change(function() {
    $('#input7').text($(this).val());
});
$("[name='contact-pref']").change(function() {
    $('#input9').text($(this).val());
});
$("[name='info-pref']").change(function() {
    var options=[];
    $("[name='info-pref']:checked").each(function() {
        options.push($(this).val());
    });
    $("#input10").text(options.join(" and "));
});
$(".datepicker-here").datepicker();

＆＃13;

<link href="https://raw.githubusercontent.com/t1m0n/air-datepicker/master/dist/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://raw.githubusercontent.com/t1m0n/air-datepicker/master/dist/js/datepicker.min.js"></script>
<script src="https://raw.githubusercontent.com/t1m0n/air-datepicker/master/dist/js/i18n/datepicker.en.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        
<div class="col-12 col-md-6">
     <input type="text" id="f-name" name="full-name" placeholder="Full Name*" onblur="if (this.placeholder == '') {this.placeholder = 'Full Name*';}" onfocus="if (this.placeholder == 'Full Name*') {this.placeholder = '';}">
</div>
 <div class="col-12 col-md-4">
      <span>Date of Request*</span>
      <input type="text" data-language='en' id="request-date" placeholder="Select a Date" class="input-type-date datepicker-here" data-language="en" onblur="if (this.placeholder == '') {this.placeholder = 'Select a Date';}" onfocus="if (this.placeholder == 'Select a Date') {this.placeholder = '';}">
</div>
<div class="col-12 col-md-4">
     <span>Contact Preference*</span>
     <label for="phone">
     <input type="radio" name="contact-pref" value="Phone" id="phone"> Phone
     </label>
     <label for="email">
     <input type="radio" name="contact-pref" value="Email" id="email"> Email
     </label>
</div>
<div class="col-12 col-md-4">
     <label for="spec-st"><input type="checkbox" name="info-pref" id="spec-st" value="Specification Street"> Specification Street</label>
</div>
<div class="col-12 col-md-4">
     <label for="parts-n-kits"><input type="checkbox" name="info-pref" id="parts-n-kits" value="Parts &amp; Kits List"> Parts &amp; Kits List</label>
</div>
<div class="col-12 col-md-5 spacing">
     <h5><strong>Full Name</strong></h5><div id="input1"></div>
</div>
<div class="col-12 col-md-5 spacing">
     <h5><strong>Date of Request</strong></h5><div id="input7"></div>
</div>
<div class="col-12 col-md-5 spacing">
     <h5><strong>Contact Preference</strong></h5><div id="input9"></div>
</div>
<div class="col-12 col-md-5 spacing">
     <h5><strong>Report Preferences</strong></h5><div id="input10"></div>
 </div>
<input type='text' class="datepicker-here" data-position="right top" />

＆＃13;

显示所选单选按钮和复选框的值

1 个答案: