时间戳

首页 > 解决方案 > 单选按钮输入不会将值传递给模态

javascript - 单选按钮输入不会将值传递给模态

问题描述

我创建了一个联系表单，将值传递给模态，以便用户在提交表单之前预览他们的答案。问题是，我无法弄清楚如何将是/否单选按钮的值传递给预览模式。问题......“这是一份新工作”应该有一个是或否的答案，但无论做出哪种选择，都没有出现。我在这里做错了什么？

链接到codepen

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form with Results in a Modal</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<style>
.modal.show  {
display:flex!important;
flex-direction:column;
justify-content:center;
align-content:center;
align-items: flex-start;
}

#formEntry {
background-color:#D0E4C7;
border-radius: 16px;
box-shadow: 3px 5px 8px grey;
margin: 40px 20px 20px 20px;
padding: 30px 30px;
font-size: 18px;
font-weight:500;
}
</style>
</head>

<body>

<div class="container mt-5">
<form role="form" id="formEntry" name="formEntry" method="post" onsubmit="return entry_check()" action="">
<section class="form-row mb-2">
<div class="form-group col-md-6">
<label for="fname">First Name</label>
<input type="text" name="firstName" id="fname" class="form-control" value="" />
</div>

<div class="form-group col-md-6">
<label for="lname">Last Name</label>
<input type="text" name="lastName" id="lname" class="form-control" value="" />
</div>
</section> <!-- end of row -->

<section class="form-row mb-3">
<div class="form-group col-md-4">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" value="" />
</div>

<div class="form-group col-md-4">
<label for="phone">Phone</label>
<input type="tel" name="phone" id="phone" class="form-control" value="" />
</div>
</section> <!-- end of row -->

<section class="form-row mb-3">
<div class="form-group col-md-6">
<label for="address">Street Address</label>
<input type="text" name="address" id="address" class="form-control" value="" />
</div>

<div class="form-group col-md-4">
<label for="city">City</label>
<input type="text" name="city" id="city" class="form-control" value="" />
</div>

<div class="form-group col-md-3">
<label for="county">County</label>
<input type="text" name="county" id="county" class="form-control" value="" />
</div>

<div class="form-group col-md-2">
<label for="state">State</label>
<input type="text" name="state" id="state"  class="form-control" value="" />
</div>

<div class="form-group col-md-3">
<label for="zip">Zip</label>
<input type="text" name="zip" id="zip"  class="form-control" value="" />
</div>
</section>

<section class="form-row mb-3">

<div id="newJob"  class="form-group col-sm-6">
<label for="newJob"><strong>Is this a NEW job?</strong> &nbsp; &nbsp; </label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="newJob" id="newJobYes" value="Yes" required data-hint="Please check YES or NO">
<label class="form-check-label" for="newJobYes"><strong>YES</strong></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="newJob" id="newJobNo" value="No" >
<label class="form-check-label" for="newJobNo"><strong>NO</strong></label>
</div>
</div>

</section> <!-- end of row -->


<section class="row mb-3 ">

<div class="mx-auto">
<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-success btn-lg" />
</div>
</section>

</form>  <!-- end of form -->

<!-- PREVIEW MODAL -->
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-body"><h3>Are the following details correct?</h3>
<!-- We display the details entered by the user here -->
<p>First Name: <strong id="fnameM"></strong> </p>
<p>Last Name:  <strong id="lnameM"></strong></p>

<p>Email: <strong id="emailM"></strong> </p>
<p>Phone:  <strong id="phoneM"></strong></p>

<p>Address: <strong id="addressM"></strong> </p>
<p>City:  <strong id="cityM"></strong></p>

<p>State: <strong id="stateM"></strong> </p>
<p>Zip:  <strong id="zipM"></strong></p>

<p>New Job: <strong id="newJobM"></strong></p>
<p><strong>Please check that all info is correct before pressing Submit</strong></p>

</div> <!-- end modal body -->

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a href="" id="submit" class="btn btn-success success">Submit</a>
</div>
</div>
</div>
</div>  <!-- end of modal -->

</div> <!-- end of container -->



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<!-- Display the input values in the modal -->
<script>
$('#submitBtn').click(function () {

$('#fnameM').html($('#fname').val());
$('#lnameM').html($('#lname').val());
$('#emailM').html($('#email').val());
$('#phoneM').html($('#phone').val());
$('#addressM').html($('#address').val());
$('#cityM').html($('#city').val());
$('#stateM').html($('#state').val());
$('#zipM').html($('#zip').val());
$('#newJobM').html($('#newJob').val());
});

$('#submit').click(function () {
/* when the submit button in the modal is clicked, submit the form */
alert('Your form has been submitted');
$('#formEntry').submit();
});

</script>

</body>
</html>

标签： javascriptradio-buttonbootstrap-4

解决方案

您需要像这样获取选中的单选按钮$('input[name=newJob]:checked').val()的值：（获取名为“newJob”的选中输入的值），而不是尝试使用输入的名称，如id.

$('#newJob').val()将获得带有id“newJob”的元素的值，但你没有任何input作为 的 s id，只有作为name.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form with Results in a Modal</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<style>
.modal.show  {
display:flex!important;
flex-direction:column;
justify-content:center;
align-content:center;
align-items: flex-start;
}

#formEntry {
background-color:#D0E4C7;
border-radius: 16px;
box-shadow: 3px 5px 8px grey;
margin: 40px 20px 20px 20px;
padding: 30px 30px;
font-size: 18px;
font-weight:500;
}
</style>
</head>

<body>

<div class="container mt-5">
<form role="form" id="formEntry" name="formEntry" method="post" onsubmit="return entry_check()" action="">
<section class="form-row mb-2">
<div class="form-group col-md-6">
<label for="fname">First Name</label>
<input type="text" name="firstName" id="fname" class="form-control" value="" />
</div>

<div class="form-group col-md-6">
<label for="lname">Last Name</label>
<input type="text" name="lastName" id="lname" class="form-control" value="" />
</div>
</section> <!-- end of row -->

<section class="form-row mb-3">
<div class="form-group col-md-4">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" value="" />
</div>

<div class="form-group col-md-4">
<label for="phone">Phone</label>
<input type="tel" name="phone" id="phone" class="form-control" value="" />
</div>
</section> <!-- end of row -->

<section class="form-row mb-3">
<div class="form-group col-md-6">
<label for="address">Street Address</label>
<input type="text" name="address" id="address" class="form-control" value="" />
</div>

<div class="form-group col-md-4">
<label for="city">City</label>
<input type="text" name="city" id="city" class="form-control" value="" />
</div>

<div class="form-group col-md-3">
<label for="county">County</label>
<input type="text" name="county" id="county" class="form-control" value="" />
</div>

<div class="form-group col-md-2">
<label for="state">State</label>
<input type="text" name="state" id="state"  class="form-control" value="" />
</div>

<div class="form-group col-md-3">
<label for="zip">Zip</label>
<input type="text" name="zip" id="zip"  class="form-control" value="" />
</div>
</section>

<section class="form-row mb-3">

<div id="newJob"  class="form-group col-sm-6">
<label for="newJob"><strong>Is this a NEW job?</strong> &nbsp; &nbsp; </label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="newJob" id="newJobYes" value="Yes" required data-hint="Please check YES or NO">
<label class="form-check-label" for="newJobYes"><strong>YES</strong></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="newJob" id="newJobNo" value="No" >
<label class="form-check-label" for="newJobNo"><strong>NO</strong></label>
</div>
</div>

</section> <!-- end of row -->


<section class="row mb-3 ">

<div class="mx-auto">
<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-success btn-lg" />
</div>
</section>

</form>  <!-- end of form -->

<!-- PREVIEW MODAL -->
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-body"><h3>Are the following details correct?</h3>
<!-- We display the details entered by the user here -->
<p>First Name: <strong id="fnameM"></strong> </p>
<p>Last Name:  <strong id="lnameM"></strong></p>

<p>Email: <strong id="emailM"></strong> </p>
<p>Phone:  <strong id="phoneM"></strong></p>

<p>Address: <strong id="addressM"></strong> </p>
<p>City:  <strong id="cityM"></strong></p>

<p>State: <strong id="stateM"></strong> </p>
<p>Zip:  <strong id="zipM"></strong></p>

<p>New Job: <strong id="newJobM"></strong></p>
<p><strong>Please check that all info is correct before pressing Submit</strong></p>

</div> <!-- end modal body -->

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a href="" id="submit" class="btn btn-success success">Submit</a>
</div>
</div>
</div>
</div>  <!-- end of modal -->

</div> <!-- end of container -->



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<!-- Display the input values in the modal -->
<script>
$('#submitBtn').click(function () {

$('#fnameM').html($('#fname').val());
$('#lnameM').html($('#lname').val());
$('#emailM').html($('#email').val());
$('#phoneM').html($('#phone').val());
$('#addressM').html($('#address').val());
$('#cityM').html($('#city').val());
$('#stateM').html($('#state').val());
$('#zipM').html($('#zip').val());
$('#newJobM').html($('input[name=newJob]:checked').val());
});

$('#submit').click(function () {
/* when the submit button in the modal is clicked, submit the form */
alert('Your form has been submitted');
$('#formEntry').submit();
});

</script>

</body>
</html>

推荐阅读