如何使用html中的jquery将表单附加到其他div中的div

时间：2016-01-20 10:54:02

标签： javascript jquery html css twitter-bootstrap 

<script type="text/javascript">
    $(document).ready(function(){
		var i = 0;
		
		$("#buttonGenerate").click(function(){
			for(i = 0; i < document.getElementById('inputNumber').value; i++){
				$(".enterDetails").append('<div>Div Goes Here</div>');
			}
		});
    });
</script>
.container-fluid {
	padding-top: 20%;
	padding-bottom: 20%;
}
.bg-1 { 
  background-color: #1abc9c; /* Green */
  color: #ffffff;
}
.bg-2 { 
  background-color: #474e5d; /* Dark Blue */
  color: #ffffff;
}
.page-scroll {
	text-align: center;
}
.btn {
border-radius: 0;
text-transform: uppercase;
font-family: Montserrat,sans-serif;
font-weight: 400;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

.btn-circle {
    width: 70px;
    height: 70px;
    margin-top: 15px;
    padding: 7px 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 40px;
    color: #fff;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.btn-circle.btn-dark {
    border: 2px solid #666;
    color: #666;
}


.btn-circle:hover,
.btn-circle:focus {
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.1);
}

.btn-circle.btn-dark :hover,
.btn-circle.btn-dark :focus {
    outline: 0;
    color: #999;
    background: #fff;
}

.btn-circle.btn-dark :hover i,
.btn-circle.btn-dark :focus i{
    color: #999;
}

.page-scroll .btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}

.page-scroll .btn-circle:hover i.animated {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}
<html lang="en">
<head>
  <title>Exam</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/Exam.css">
      <link href="css/scrolling-nav.css" rel="stylesheet">
  <script src="js/jquery.min.js"></script>
  <script src="js/scrolling-nav.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.easing.min.js"></script>
  
</head>

<body>


<div class="container-fluid bg-1 text-center">
  <h1>Create Exam</h1>
	<div class="page-scroll">
		<a href="#enterDetails" class="btn btn-circle page-scroll">
			<i class="fa fa-angle-double-down animated"></i>
		</a>
	</div>
</div>
<div class="container-fluid bg-2 text-center" id="enterDetails">
	<form class="form-inline" id="listOfSections" role="form">
		<label>Enter No. of Sections :  &nbsp;</label>
		<div class="input-group">
		  <span class="input-group-addon">?</span>
		  <input type="text" class="form-control" id="inputNumber" placeholder="1, 2, 5 etc" aria-describedby="basic-addon1">
		</div>
		<button type="submit" id="buttonGenerate" class="btn btn-primary">Generate</button>
	</form>
</div>

</body>
</html>

这里我给出了Java Script和Exam.css的代码以及整个HTML文件。我没有给出bootstrap和jQuery的所有css和js。我想做的只是显示否。在动态提交的输入编号部分之后从文本字段插入的div。它正在添加并在同一时刻消失并再次显示默认值并创建页面。所以请一些人帮忙做正确的事。提前谢谢。

1 个答案:

答案 0 :(得分：1)

你使用错误的选择器，你正在使用类选择器，它应该是id选择器。

将$(".enterDetails")更改为$("#enterDetails")

为避免错误，您可能需要检查输入的值是否为数字。

$(function(){
  $("#buttonGenerate").click(function(e){
  $('#error').remove();
    e.preventDefault();
    var i = 0,
        n = $('#inputNumber').val();
    if( !isNaN(parseFloat(n)) && isFinite(n) ) {
      for(i = 0; i < n; i++){
        $("#enterDetails").append('<div>Div Goes Here</div>');
      }     
    }
    else {
        $(this).after('<div id="error">Wrong input</div>');
    }
  });
});

完整示例：

$(function(){
  $("#buttonGenerate").on('click', function(e){
  $('#error').remove();
    e.preventDefault();
    var i = 0,
        n = $('#inputNumber').val();
    if( !isNaN(parseFloat(n)) && isFinite(n) ) {
      for(i = 0; i < n; i++){
        $("#enterDetails").append('<div>Div Goes Here</div>');
      }     
    }
    else {
        $(this).after('<div id="error">Wrong input</div>');
    }
  });
});
.container-fluid {
	padding-top: 20%;
	padding-bottom: 20%;
}
.bg-1 { 
  background-color: #1abc9c; /* Green */
  color: #ffffff;
}
.bg-2 { 
  background-color: #474e5d; /* Dark Blue */
  color: #ffffff;
}
.page-scroll {
	text-align: center;
}
.btn {
border-radius: 0;
text-transform: uppercase;
font-family: Montserrat,sans-serif;
font-weight: 400;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

.btn-circle {
    width: 70px;
    height: 70px;
    margin-top: 15px;
    padding: 7px 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 40px;
    color: #fff;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.btn-circle.btn-dark {
    border: 2px solid #666;
    color: #666;
}


.btn-circle:hover,
.btn-circle:focus {
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.1);
}

.btn-circle.btn-dark :hover,
.btn-circle.btn-dark :focus {
    outline: 0;
    color: #999;
    background: #fff;
}

.btn-circle.btn-dark :hover i,
.btn-circle.btn-dark :focus i{
    color: #999;
}

.page-scroll .btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}

.page-scroll .btn-circle:hover i.animated {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-fluid bg-2 text-center" id="enterDetails">
	<form class="form-inline" id="listOfSections" role="form">
		<label>Enter No. of Sections :  &nbsp;</label>
		<div class="input-group">
		  <span class="input-group-addon">?</span>
		  <input type="text" class="form-control" id="inputNumber" placeholder="1, 2, 5 etc" aria-describedby="basic-addon1">
		</div>
		<button type="submit" id="buttonGenerate" class="btn btn-primary">Generate</button>
	</form>
</div>

相关问题
最新问题