トリガーフォームの記入onClickまたはonChange onチェックボックス

Question

私はチェックボックスで記入したいフォーム（入力テキスト）をクリックまたは変更します。したがって、ユーザーがチェックボックスをクリックすると、JavaScriptクエリーからの値をフォームに入力するためのjavascript関数が起動します。

問題は、私は多くのフォームがあります。だからここで私は各フォームの充填を処理するために多くの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れる：実は私は7つのフォームを

<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>

を持っていますが、ここで私はちょうど2をコピーしますそれらのスニペットで。このコードはうまくいきます。しかし、私はこれを行うより効率的な方法がなければならないと思います。

Answer 1

は、あなただけの、あなただけのcopyProfile()いつでもあなたはそれを使用したいと呼び出すことができる機能

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(<enter fname here>, <enter lname here>, <enter institution here>); 

このように、copyProfile関数をたくさん作成する必要はありません。

プロファイルに1

copyProfile（ "author1fname"、 "author1lname"、 "author1institution"）をコピーしたい場合は、

プロファイル2

copyProfile（ "author2fname"、 "author12name"、 "author2institution"）をコピーしたい場合は、

など···。

EDIT：あなたはすごい