How can I invoke a JavaScript function from an HTML file and send a parameter along with it?

Question

How can I invoke a JavaScript function from an HTML file and send a parameter along with it?

I'm using JavaScript to calculate the total value in a field by adding ca, part_a, and part_b numbers. The GPA is also calculated through JavaScript. In the first row, I can get the Total and GPA values with JavaScript, but in the second and subsequent rows, I cannot retrieve them. How can I solve this issue?

<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\]"  val...

javascript

Answer 1

Answer №1

To address the first part of your inquiry, you can achieve this by utilizing the event method to call your function.

For instance:

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>

Alternatively, you can utilize a JavaScript event listener.

For example:

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>

You can also opt for using a 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>

Concerning the second part of your query, you have the option to pass parameters when calling your function or retrieve them while inside the function.

An example of passing parameters when calling the function:

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

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

An illustration of retrieving parameters within the function (in JavaScript):

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>

For extracting parameters within the function (using 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 require a server-side variable, you can utilize this approach. In your JS function, use

var x = <?php echo $valor_x; ?>;

. This method is applicable when your PHP code resides on the same page as your JS.

Answer 2

To address the first part of your inquiry, you can achieve this by utilizing the event method to call your function.

For instance:

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>

Alternatively, you can utilize a JavaScript event listener.

For example:

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>

You can also opt for using a 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>

Concerning the second part of your query, you have the option to pass parameters when calling your function or retrieve them while inside the function.

An example of passing parameters when calling the function:

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

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

An illustration of retrieving parameters within the function (in JavaScript):

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>

For extracting parameters within the function (using 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 require a server-side variable, you can utilize this approach. In your JS function, use

var x = <?php echo $valor_x; ?>;

. This method is applicable when your PHP code resides on the same page as your JS.

Answer 3

Answer №2

You seem to have numerous elements (one per row) labeled with IDs such as total\[\]. Despite not having aesthetically pleasing IDs (symbols shouldn't be included in IDs), they are not unique, which is essential for IDs! Consider renaming them to something like total-<?php echo $i; ?> for better clarity.

Furthermore, your copy_text function seems to be defined multiple times (once for each PHP loop, based on the PHP output), leading to errors. It might be beneficial to create a single-parameter function, e.g. copy_text(id), and define it outside the loop. If this sounds complex, you can opt to keep it as is but assign distinct names to each function, like

copy_text_<?php echo $i; ?>

.

Answer 4

You seem to have numerous elements (one per row) labeled with IDs such as total\[\]. Despite not having aesthetically pleasing IDs (symbols shouldn't be included in IDs), they are not unique, which is essential for IDs! Consider renaming them to something like total-<?php echo $i; ?> for better clarity.

Furthermore, your copy_text function seems to be defined multiple times (once for each PHP loop, based on the PHP output), leading to errors. It might be beneficial to create a single-parameter function, e.g. copy_text(id), and define it outside the loop. If this sounds complex, you can opt to keep it as is but assign distinct names to each function, like

copy_text_<?php echo $i; ?>

.

How can I invoke a JavaScript function from an HTML file and send a parameter along with it?

Answer №1

Answer №2

Similar questions

Load texture using ImageUtils with callback in Canvas Renderer

Implementing Vuejs Array Push in Separate Components

Is there a way in React to specify which properties to pass (and when to pass them) to child components based on the properties of the parent component?

Kendo UI Scheduler: The system encountered an overflow while converting to a date and time format

404 error occurs when AngularJS removes hash symbol from URLs

Learn the process of transmitting data from middleware to components and APIs in Next.js version 13

I am interested in using a loop in Angular to highlight my div element

Troubleshooting problems encountered when duplicating an array in JavaScript

What is the best way to choose a random text from a dropdown menu that contains several div elements using Playwright?

How do I iterate through my state in React Redux?

Numerous textareas fail to function properly according to JQuery's standards

Refining an array data table within a nested component

Exploring the World of Infinite Scrolling with React.js and Material_ui

Tips for including a Places Autocomplete box within an InfoWindow on Google Maps

Assistance with the JQuery Validation Plugin

Issue with Ant Design form validation

Is it possible to create a button function in HTML that can alter the CSS image tag?

Failed AJAX Request - Google Chrome Experiences Issue

Developing with PHP and Ajax with the onchange event handler

What are some best practices for integrating jointjs with reactjs?