mercredi 13 avril 2016

trigger form filling by onClick or onChange on checkbox

I have forms (input text) that I want to be filled by checkbox click or change trigger. So if user click the checkbox, it will fire the javascript function to fill the form with values from php queries.

The problem is, I have many forms. So here I make many javascript functions to handle each form filling. Here is the javascript code:

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

And here is the 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>

Actually I have 7 forms, but here I just copy 2 of them in snippet. This code is working well. But I think there must be more efficient way to do this.




Aucun commentaire:

Enregistrer un commentaire