添加动态输入 - 无法正确附加 - 包含图片
我已经包含了用于动态添加输入字段的javascript，但是第一次单击它时样式不正确。以下是使用添加按钮之前的样子（忽略作者1 /大学1出现2x，在我的代码中供参考）：
以下是点击几次后的效果：
正如您所看到的，第一个添加的样式不正确。
我还想知道是否有人知道如何创建删除作者字段按钮，以便在不需要时减去输入字段。
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input Form - Research Ranker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="shortcut icon" href="/../img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
var num = 2;
var id = 'author' +num;
var uni_id = 'university' +num;
$( "#AuthorFieldButton" ).click(function() {
var name = 'Author '+ num;
var uni_name = 'University ' + num;
id = 'author' + num;
$('.author-group').append('<div class="form-group"> <label class="col-md-4 control-label" for="'+id+'">'+name+':</label><div class="col-md-4"><input type="text" id="'+id+'" name="'+id+'" class="form-control input-md" maxlength="40" ></div></div><div class="form-group"><label class="col-md-4 control-label" for="'+uni_id+'">'+uni_name+':</label><div class="col-md-4"><input type="text" id="'+uni_id+'" name="'+uni_id+'" class="form-control input-md maxlength="55" ></div></div>')
num++;
// <div class="form-group">
// <label class="col-md-4 control-label" for="author1_name">Author 1:</label>
// <div class="col-md-4">
// <input id="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40">
// </div>
// </div>
});
});
</script>
</head>
<body>
<?PHP
if(!isset($_POST['submit'])){
print '
<div class="container-fluid ui-widget">
<form class="form-horizontal" method="post" action="articleinput2.php" onsubmit="return confirm("Is all of your data correct?");">
<fieldset>
<!-- Article Input -->
<legend>Article Input</legend>
<!-- Journal Radio Buttons (value is journal ISSN)-->
<div class="form-group">
<label class="col-md-4 control-label" for="journal_radio">Journal</label>
<div class="col-md-4">
<div class="radio">
<label for="journal_radio-0">
<input type="radio" name="journal_radio" id="journal_radio-0" value="2162-9730" checked="checked">
MIS Quarterly
</label>
</div>
<div class="radio">
<label for="journal_radio-1">
<input type="radio" name="journal_radio" id="journal_radio-1" value="1047-7047">
Information Systems Research
</label>
</div>
<div class="radio">
<label for="journal_radio-2">
<input type="radio" name="journal_radio" id="journal_radio-2" value="0742-1222">
Journal of Management Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-3">
<input type="radio" name="journal_radio" id="journal_radio-3" value="1536-9323">
Journal of the Association for Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-4">
<input type="radio" name="journal_radio" id="journal_radio-4" value="1476-9344">
European Journal of Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-5">
<input type="radio" name="journal_radio" id="journal_radio-5" value="1365-2575">
Information Systems Journal
</label>
</div>
<div class="radio">
<label for="journal_radio-6">
<input type="radio" name="journal_radio" id="journal_radio-6" value="0963-8687">
Journal of Strategic Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-7">
<input type="radio" name="journal_radio" id="journal_radio-7" value="0268-3962">
Journal of Information Technology
</label>
</div>
<div class="radio">
<label for="journal_radio-8">
<input type="radio" name="journal_radio" id="journal_radio-8" value="0167-9236">
Decision Support Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-9">
<input type="radio" name="journal_radio" id="journal_radio-9" value="0378-7206">
Information and Management
</label>
</div>
</div>
</div>
<!-- Article Name Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="article_name">Article Name:</label>
<div class="col-md-5">
<input id="article_name" name="article_name" type="text" placeholder="Article Name" class="form-control input-md" required="" maxlength = "60">
</div>
</div>
<!-- Author 1-->
<div class="form-group">
<label class="col-md-4 control-label" for="author1_name">Author 1:</label>
<div class="col-md-4">
<input id="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40">
</div>
</div>
<!-- Author 1 University -->
<div class="form-group">
<label class="col-md-4 control-label" for="author1_university">University:</label>
<div class="col-md-4">
<input id="author1_university" name="author1_university" type="text" placeholder="Author University" class="form-control input-md" required="" maxlength="55">
</div>
</div>
<!-- Author 1 New Input Field-->
<div class="form-group ">
<label class="col-md-4 control-label" for="author1">Author 1:</label>
<div class="col-md-4">
<inputid="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40"">
</div>
</div>
<!-- University 1 New Input Field-->
<div class="author-group form-group">
<label class="col-md-4 control-label" for="university1">University 1:</label>
<div class="col-md-4">
<input id="author1_university" name="author1_university" type="text" placeholder="Author University" class="form-control input-md" required="" maxlength="55">
</div>
</div>
<div class="form-group">
<div class="col-md-4 control-label">
<button class="btn-small btn-primary" id="AuthorFieldButton" type="button">+ Author</button>
</div>
</div>
<!-- Select Year Published -->
<div class="form-group">
<label class="col-md-4 control-label" for="year">Year Published</label>
<div class="col-md-4">
<select id="year" name="year" class="form-control">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
</div>
</div>
<!-- Is Security Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label" for="is_security"></label>
<div class="col-md-4">
<label class="checkbox-inline" for="is_security">
<input type="checkbox" name="is_security" id="is_security" value="1">
Security Related
</label>
</div>
</div>
<!-- Submit Form Button -->
<div class="form-group">
<div class="col-md-4 control-label">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>';
}
1 个答案:
答案 0 :(得分：0)
更新您的js：
$('.author-group').last().after('<div class="form-group"> <label class="col-md-4 control-label" for="'+id+'">'+name+':</label><div class="col-md-4"><input type="text" id="'+id+'" name="'+id+'" class="form-control input-md" maxlength="40" ></div></div><div class="form-group author-group"><label class="col-md-4 control-label" for="'+uni_id+'">'+uni_name+':</label><div class="col-md-4"><input type="text" id="'+uni_id+'" name="'+uni_id+'" class="form-control input-md maxlength="55" ></div></div>')
到
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input Form - Research Ranker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="shortcut icon" href="/../img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
var num = 2;
var id = 'author' +num;
var uni_id = 'university' +num;
$( "#AuthorFieldButton" ).click(function() {
var name = 'Author '+ num;
var uni_name = 'University ' + num;
id = 'author' + num;
$('.author-group').last().after('<div class="form-group"> <label class="col-md-4 control-label" for="'+id+'">'+name+':</label><div class="col-md-4"><input type="text" id="'+id+'" name="'+id+'" class="form-control input-md" maxlength="40" ></div></div><div class="form-group author-group"><label class="col-md-4 control-label" for="'+uni_id+'">'+uni_name+':</label><div class="col-md-4"><input type="text" id="'+uni_id+'" name="'+uni_id+'" class="form-control input-md maxlength="55" ></div></div>')
num++;
// <div class="form-group">
// <label class="col-md-4 control-label" for="author1_name">Author 1:</label>
// <div class="col-md-4">
// <input id="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40">
// </div>
// </div>
});
$('#RemoveLastAuthor').click(function(e){
$('.author-group').last().prev('.form-group').remove();
$('.author-group').last().remove();
num--;
});
});
</script>
</head>
<body>
<?PHP
if(!isset($_POST['submit'])){
print '
<div class="container-fluid ui-widget">
<form class="form-horizontal" method="post" action="articleinput2.php" onsubmit="return confirm("Is all of your data correct?");">
<fieldset>
<!-- Article Input -->
<legend>Article Input</legend>
<!-- Journal Radio Buttons (value is journal ISSN)-->
<div class="form-group">
<label class="col-md-4 control-label" for="journal_radio">Journal</label>
<div class="col-md-4">
<div class="radio">
<label for="journal_radio-0">
<input type="radio" name="journal_radio" id="journal_radio-0" value="2162-9730" checked="checked">
MIS Quarterly
</label>
</div>
<div class="radio">
<label for="journal_radio-1">
<input type="radio" name="journal_radio" id="journal_radio-1" value="1047-7047">
Information Systems Research
</label>
</div>
<div class="radio">
<label for="journal_radio-2">
<input type="radio" name="journal_radio" id="journal_radio-2" value="0742-1222">
Journal of Management Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-3">
<input type="radio" name="journal_radio" id="journal_radio-3" value="1536-9323">
Journal of the Association for Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-4">
<input type="radio" name="journal_radio" id="journal_radio-4" value="1476-9344">
European Journal of Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-5">
<input type="radio" name="journal_radio" id="journal_radio-5" value="1365-2575">
Information Systems Journal
</label>
</div>
<div class="radio">
<label for="journal_radio-6">
<input type="radio" name="journal_radio" id="journal_radio-6" value="0963-8687">
Journal of Strategic Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-7">
<input type="radio" name="journal_radio" id="journal_radio-7" value="0268-3962">
Journal of Information Technology
</label>
</div>
<div class="radio">
<label for="journal_radio-8">
<input type="radio" name="journal_radio" id="journal_radio-8" value="0167-9236">
Decision Support Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-9">
<input type="radio" name="journal_radio" id="journal_radio-9" value="0378-7206">
Information and Management
</label>
</div>
</div>
</div>
<!-- Article Name Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="article_name">Article Name:</label>
<div class="col-md-5">
<input id="article_name" name="article_name" type="text" placeholder="Article Name" class="form-control input-md" required="" maxlength = "60">
</div>
</div>
<!-- Author 1-->
<div class="form-group">
<label class="col-md-4 control-label" for="author1_name">Author 1:</label>
<div class="col-md-4">
<input id="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40">
</div>
</div>
<!-- Author 1 University -->
<div class="form-group">
<label class="col-md-4 control-label" for="author1_university">University:</label>
<div class="col-md-4">
<input id="author1_university" name="author1_university" type="text" placeholder="Author University" class="form-control input-md" required="" maxlength="55">
</div>
</div>
<!-- Author 1 New Input Field-->
<div class="form-group ">
<label class="col-md-4 control-label" for="author1">Author 1:</label>
<div class="col-md-4">
<inputid="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40"">
</div>
</div>
<!-- University 1 New Input Field-->
<div class="author-group form-group">
<label class="col-md-4 control-label" for="university1">University 1:</label>
<div class="col-md-4">
<input id="author1_university" name="author1_university" type="text" placeholder="Author University" class="form-control input-md" required="" maxlength="55">
</div>
</div>
<div class="form-group">
<div class="col-md-4 control-label">
<button class="btn-small btn-primary" id="AuthorFieldButton" type="button">+ Author</button>
<button class="btn-small btn-primary" id="RemoveLastAuthor" type="button">- Author</button>
</div>
</div>
<!-- Select Year Published -->
<div class="form-group">
<label class="col-md-4 control-label" for="year">Year Published</label>
<div class="col-md-4">
<select id="year" name="year" class="form-control">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
</div>
</div>
<!-- Is Security Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label" for="is_security"></label>
<div class="col-md-4">
<label class="checkbox-inline" for="is_security">
<input type="checkbox" name="is_security" id="is_security" value="1">
Security Related
</label>
</div>
</div>
<!-- Submit Form Button -->
<div class="form-group">
<div class="col-md-4 control-label">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>';
}修复您的样式问题。请参阅以下代码摘要，了解删除最后一位作者按钮...
＆＃13;
＆＃13;
＆＃13;
＆＃13;
class Person:
#Initializer
def __init__(self, first_name='', last_name='', phone_number='', address=None, social_sec_num='', emailAddress=''):
self.setFirstName(first_name)
self.setLastName(last_name)
self.setPhoneNumber(phone_number)
self.setAddress(address)
self.setSocialSecNum(social_sec_num)
self.setEmailAddress(emailAddress)
#Mutator
def setFirstName(self, first_name):
self.__first_name = first_name
def setLastName(self, last_name):
self.__last_name = last_name
def setPhoneNumber(self, phone_number):
self.__phone_number = phone_number
def setAddress(self, address):
self.__address = address
def setSocialSecNum(self, social_sec_number):
self.__social_sec_num = social_sec_num
def setEmailAddress(self, emailAddress):
self.__emailAddress = emailAddress
#Accessor Methods
def getFirstName(self):
return self.__first_name
def getLastName(self):
return self.__last_name
def getPhoneNumber(self):
return self.__phone_number
def getAddress(self):
return self.__address
def getSocialSecNum(self):
return self.__social_sec_num
def getEmailAddress(self):
return self.__emailAddress
#String Representation
def __str__(self):
people_string = \
"First Name: %s" %self.getFirstName() + "\n" +\
"Last Name: %s" %self.getLastName() + "\n" +\
"Phone Number: %s" %self.getPhoneNumber() + "\n" +\
"Address: %s" %self.getAddress() + "\n" +\
"Social Security Number: %s" %self.getSocialSecNum() + "\n" +\
"Email Address: %s" %self.getEmailAddress()
return people_string
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？