how to call javascript function from html and pass parameter through it

Question

I am adding ca, part_a, part_b number and directly writing the total in total field and calculating gpa through javascript. In my first row i am getting the Total and GPA value through javascript but in my second and next rows i am not getting the Total and GPA value how can i solve this ?

<div>
    <ul class="breadcrumb">
        <li>
            <a href="#">Home</a> <span class="divider">/</span>
        </li>
        <li>
            <a href="#">Forms</a>
        </li>
    </ul>
</div>

<div class="row-fluid sortable">
    <div class="box span12">
        <div class="box-header well" data-original-title>
            <h2><i class="icon-edit"></i>Add All Student Mark</h2>
            <h3>

            </h3>
            <div class="box-icon">
                <a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
                <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
                <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <form class="form-horizontal" action="<?php echo base_url();?>super_admin/save_all_student_mark" method="post" enctype="multipart/form-data">
                <fieldset>
                    <legend>Add all Student Mark</legend>
                    <h3>
                        <?php
                        $msg = $this->session->userdata('message');
                        if ($msg) {
                            echo $msg;
                            $this->session->unset_userdata('message');
                        }
                        ?>
                    </h3>




                    <div class="box-content">
                    <table class="table table-striped table-bordered bootstrap-datatable">
                        <thead>
                            <tr>
                                <th>Student Roll</th>
                                <th>CA</th>
                                <th>Part A</th>
                                <th>Part B</th>
                                <th>Total</th>
                                <th>GPA</th>
                            </tr>
                        </thead>   
                        <tbody>
                            <?php $i=0;?>
                            <?php foreach($student_info_by_session as $student_info){?>
                            <tr>
                                <td>
                                    <input type="text" class="span12 typeahead"  value="<?php echo $student_info->student_roll; ?>">
                                    <input type="hidden" class="span12 typeahead" name="data\[<?php echo $i; ?>\]\[student_id\]"  value="<?php echo $student_info->student_id; ?>">
                                    <input type="hidden" class="span12 typeahead" name="data\[<?php echo $i; ?>\]\[subject_id\]"  value="<?php echo 11; ?>">
                                </td>
                                <td>
                                    <input type="text" class="span12 typeahead" id="ca\[\]" name="data\[<?php echo $i; ?>\]\[ca\]" onkeyup="copy_text();" >
                                </td>
                                <td>
                                    <input type="text" class="span12 typeahead" id="part_a\[\]" name="data\[<?php echo $i; ?>\]\[part_a\]" onkeyup="copy_text();" >
                                </td>
                                <td>
                                    <input type="text" class="span12 typeahead" id="part_b\[\]" name="data\[<?php echo $i; ?>\]\[part_b\]" onkeyup="copy_text();" >
                                </td>

                                <script>         
                                        function copy_text()
                                        {

                                                var total_mark=+document.getElementById('ca\[\]').value + +document.getElementById('part_a\[\]').value + +document.getElementById('part_b\[\]').value;
                                                document.getElementById('total\[\]').value=total_mark;

                                                if(total_mark>=80){
                                                    document.getElementById('grade\[\]').value=4.0;
                                                }
                                                else if(total_mark>=75){
                                                    document.getElementById('grade\[\]').value=3.75;
                                                }
                                                else if(total_mark>=70){
                                                    document.getElementById('grade\[\]').value=3.5;
                                                }
                                                else if(total_mark>=65){
                                                    document.getElementById('grade\[\]').value=3.25;
                                                }
                                                else if(total_mark>=60){
                                                    document.getElementById('grade\[\]').value=3.0;
                                                }
                                                else if(total_mark>=55){
                                                    document.getElementById('grade\[\]').value=2.75;
                                                }
                                                else if(total_mark>=50){
                                                    document.getElementById('grade\[\]').value=2.5;
                                                }
                                                else if(total_mark>=45){
                                                    document.getElementById('grade\[\]').value=2.25;
                                                }
                                                else if(total_mark>=40){
                                                    document.getElementById('grade\[\]').value=2.0;
                                                }
                                                else{
                                                    document.getElementById('grade\[\]').value=0.0;
                                                }

                                        }
                                </script>

                                <td>
                                    <input type="text" class="span12 typeahead"  id="total\[\]"  name="data\[<?php echo $i; ?>\]\[total\]" >
                                </td>
                                <td>
                                    <input type="text" class="span12 typeahead" id="grade\[\]" name="data\[<?php echo $i; ?>\]\[grade\]" >
                                </td>
                            </tr>
                            <?php $i++;} ?>
                            <tr class="form-actions">
                                <button type="submit" class="btn btn-primary">Save changes</button>
                                <button type="reset" class="btn">Cancel</button>
                            </tr>
                        </tbody>
                    </table>            
                </div>
                </fieldset>
            </form>   

        </div>
    </div><!--/span-->

</div><!--/row-->

I am not a PHP expert but it appears you are generating <script> function copy_text() {.. in a loop here? If that is true which of the copy_text() instances would you expect to be called? If the loop part is true, this is probably not a proper solution as you have it defined here. — Mark Schultheiss
– Mark Schultheiss, Commented Feb 16, 2022 at 14:16
Please update your question with reasons why the answers presented did NOT assist you here so that we may get you an answer that does. — Mark Schultheiss
– Mark Schultheiss, Commented Feb 16, 2022 at 16:05

Jose Marques · Accepted Answer · 2017-05-15 11:41:48Z

For the first part of your question, you can do this by using event method for calling your function.

Example:

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}

<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

Or use javascript event listener.

Exemple:

document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

Or use jquery event listener.

Example:

$(document).ready(function(){
    $("p").click(function(){
        alert("The paragraph was clicked.");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click on this paragraph.</p>

For the second part of your question you can send parameters by passing them when you call your function, or getting them when you are using your function.

Example for sending parameters when calling the function:

function changeText(id) {
    id.innerHTML = "Ooops!";
}

<h1 onclick="changeText(this)">Click on this text!</h1>

Example for getting when you are in the function (JS):

function myFunction() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
}

First Name: <input type="text" id="myText" value="Mickey">

<p>Click the button to display the value of the value attribute of the text field.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

Example for getting when you are in the function (Jquery):

$(document).ready(function(){
    $("button").click(function(){
        var first_name = $("#user_f").val();
        var last_name = $("#user_l").val();
        var name = first_name + " " + last_name;
        $("#user").val(name);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> First Name: <input type="text" id="user_f"></p>

<p> Last Name: <input type="text" id="user_l"></p>

<p>Name: <input type="text" id="user"></p>

<button>Set the value of the input field</button>

If you want a server-side variable you can use this form. In your function js use this var x = <?php echo $valor_x; ?>; . This works when you have your PHP in the same page that you have your JS.

This pattern var x = <?php echo $valor_x; ?>; while valid as an option from my observation tends to lead to fragile and/or more difficult to maintain code. Not sure the OP sees that the code presented has more issues than the questions posted so that is not really on you here.

Lukas · Accepted Answer · 2017-05-15 10:21:08Z

0

It looks like you have many elements (i.e. one per row) with ID's like total\[\]. Appart from not being particularely attractive IDs (I would personally not put symbols in IDs) they are not unique, which IDs must be! I would probably rename them to something like total-<?php echo $i; ?> if that makes sense.

Finally, your copy_text function is being defined multiple times (once for each PHP loop, check the output from PHP), which is also causing things to go wrong. I would make it a one-parameter function, i.e. copy_text(id) and only define it once outside the loop, but if you think that is complicated you might just keep it the way it is, but name each function copy_text_<?php echo $i; ?>.

answered May 15, 2017 at 10:21

Lukas

1

1 Comment

Mark Schultheiss Over a year ago

Some valid points here.

Collectives™ on Stack Overflow

how to call javascript function from html and pass parameter through it

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related