通过 onClick 或 onChange onChange 触发表单填写

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个复制到sn-p中。这段代码运行良好。但我认为必须有更有效的方法来做到这一点。

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 函数的答案