Question

我有表单（输入文本），我希望通过复选框单击或更改触发器来填充。因此，如果用户单击该复选框，它将触发javascript函数以使用来自php查询的值填充表单。

问题是，我有很多形式。所以在这里我创建了许多javascript函数来处理每个表单填充。这是javascript代码：

<script language="javascript">
function copyProfile1(){
	document.getElementById("author1fname").value 	= <?php echo json_encode($query_user['firstName']); ?>;
	document.getElementById("author1lname").value 	= <?php echo json_encode($query_user['lastName']); ?>;
	document.getElementById("author1inst").value 	= <?php echo json_encode($query_user['institution']); ?>;
}
function copyProfile2(){
	document.getElementById("author2fname").value 	= <?php echo json_encode($query_user['firstName']); ?>;
	document.getElementById("author2lname").value 	= <?php echo json_encode($query_user['lastName']); ?>;
	document.getElementById("author2inst").value 	= <?php echo json_encode($query_user['institution']); ?>;
}
</script>

这是HTML：

<div class="form-group">
			<h3><strong>Author(s)</strong> <small>limited to 4 authors</small></h3>
			<div class="row">
			<!-- 1st author -->
			<div class="col-sm-3">
				<div class="box box-success">
					<div class="box-header with-border">
					  <h3 class="box-title">1st Author</h3>
					</div>
					<div class="box-body">
					<div class="checkbox">
						<label>
						  <input type="checkbox" id="auth1check" onClick="copyProfile1()">
						  Check here if this is you
						</label>
					  </div>
					  <div class="row">
						<div class="col-xs-6">
						  <input type="text" name="author1fname" id="author1fname" class="form-control" placeholder="Firstname">
						</div>
						<div class="col-xs-6">
						  <input type="text" name="author1lname" id="author1lname" class="form-control" placeholder="Lastname">
						</div>
					  </div><br />
					  <div class="row">
						<div class="col-xs-12">
						<input type="text" name="author1inst" id="author1inst" class="form-control" placeholder="Institution">
						</div>
					  </div>
					</div>
					<!-- /.box-body -->
				  </div>
			</div>
			<!-- end of 1st author -->
</div>
<div class="row">
			<!-- 2nd author -->
			<div class="col-sm-3" id="author2"style="display:none;">
				<div class="box box-success">
					<div class="box-header with-border">
					  <h3 class="box-title">2nd Author</h3>
					</div>
					<div class="box-body">
					  <div class="checkbox">
						<label>
						  <input type="checkbox" id="auth2check" onClick="copyProfile2()">
						  Check here if this is you
						</label>
					  </div>
					  <div class="row">
						<div class="col-xs-6">
						  <input type="text" name="author2fname" id="author2fname" class="form-control" placeholder="Firstname">
						</div>
						<div class="col-xs-6">
						  <input type="text" name="author2lname" id="author2lname" class="form-control" placeholder="Lastname">
						</div>
					  </div><br />
					  <div class="row">
						<div class="col-xs-12">
						<input type="text" name="author2inst" id="author2inst" class="form-control" placeholder="Institution">
						</div>
					  </div>
					</div>
					<!-- /.box-body -->
				  </div>
			</div>
			<!-- end of 2nd author -->
</div>
</div>

实际上我有7个表单，但在这里我只是将它们中的2个复制到代码段中。这段代码运行良好。但我认为必须有更有效的方法来做到这一点。

Answer 1

你可以在函数上添加一个参数

function copyProfile(fName, lName, institution){
    //change the hardcoded id's to your parameter name
    document.getElementById(fName).value    = <?php echo json_encode($query_user['firstName']); ?>;
    document.getElementById(lName).value    = <?php echo json_encode($query_user['lastName']); ?>;
    document.getElementById(institution).value  = <?php echo json_encode($query_user['institution']); ?>;
}

然后你可以随时调用copyProfile()。

copyProfile(<enter fname here>, <enter lname here>, <enter institution here>);

这样你就不需要创建大量的copyProfile函数了。

如果要复制个人资料1

copyProfile（“author1fname”，“author1lname”，“author1institution”）;

如果要复制个人资料2

copyProfile（“author2fname”，“author12name”，“author2institution”）;

依此类推。

编辑：更新了我应该如何调用 copyProfile 功能的答案

通过onClick或onChange复选框触发表单填充

1 个答案: