通過onClick或onChange觸發表單填充複選框

Question

我有表單（輸入文本），我想通過複選框單擊或更改觸發器來填充。因此，如果用戶點擊複選框，它將觸發javascript函數以使用php查詢中的值填充表單。

問題是，我有很多形式。所以在這裏我做了很多JavaScript函數來處理每個表單填充。下面是javascript代碼：

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

這裏是HTML：

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