How to call javascript function inside jQuery

Question

We have this tag with a javascript function in our HTML,

<select name="My_Saved_Billing" onchange="Choose_My_Saved_Billing(this.selectedIndex)" >
    <option>Select</option>
    <option value="1714">Address line 1, QC</option>
</select>

<script type="text/javascript">
function Choose_My_Saved_Billing(arg_index) {
    switch(arg_index) { 
        // some commands here
    }
}
</script>

And I also added a jQuery to it which is below so that on windows load, it will automatically select the second option.

<script type="text/javascript">
    $(window).load(function(){
        $("select").val($("select option:eq(1)").val());    
    });
</script>

But is it possible to call javascript function using jQuery? If so, how should I call this one?

Should I use Choose_My_Saved_Billing(this.selectedIndex) or Choose_My_Saved_Billing(arg_index) or you might know something. I've tried these two but none are working. Please let me know. Just a beginner here.

Answer 1

The way to call a JavaScript function from a JQuery file is the same as calling a JavaScript function from a JavaScript file :) This is so because JQuery is a library based from JavaScript. Say, you want to call function foo from a JavaScript file, when the window loads.

JQuery:

$(window).on('load', function() {
    foo();
});

And JavaScript:

function foo() {
    alert('This works!');
}

I hope this helps!

Answer 2

Yes, it's possible to call functions inside a jQuery ready block. Since you've defined the function at global scope (should probably move this into the jQuery ready block or, if you want to go to the trouble, into a module), it can be called from anywhere. So inside your ready block:

$(function () {
  // do stuff
  Choose_My_Saved_Billing(args);
});

Answer 3

jQuery is JavaScript. It's just a library for JavaScript. The main jQuery global $ is a JavaScript function that takes a valid selector as an argument and provides several methods on the return value of that function.

So calling a JavaScript function inside the callback function to .load is not an issue.

It is not clear what the Choose_My_Saved_Billing function actually does.

Answer 4

Think about what's happening here. In your onchange event you're calling the function with the index of the selected option passed as an argument. Since JQuery is just a library of shortcuts for things you can do in JavaScript, we should easily be able to do the same thing.

So let's get the element for which we want the selected index:

// maybe think about adding an ID here for better selection
var select = $('select[name^="My_Saved_"]'); 

Then let's get the index with a change event, then call the function:

var index = 0;
select.change(function(){
    index = select.selectedIndex || 2;  // set the index to default to 2
    Choose_My_Saved_billing(index);
});

Answer 5

Instead of using onchange="..." , just use jQuery to attach a change listener:

$(window).load(function() {
    $('.colors_backgroundneutral select').on('change', function () {
        Choose_My_Saved_Billing(this.value);
    });
});

Answer 6

 $(document).ready(function() { $("#Submit1").click(function() { $("#id1").hide(); Raise1(); }); $("#Raise").click(function() { $("#id1").show(); }); }); function Raise1() { var value1; alert("hi"); value1 = document.getElementById("amount").value; alert(value1); alert("done"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

Answer 7

As jQuery is a more simple and advanced JavaScript solution, my guessing is you can call you JS function like this:

$(window).load(function(){
    my_js_function(arg1, arg2);
});

Now, what you want is to call the JS function named Choose_My_Saved_Billing() with argument arg_index

So, your jQuery will look like this:

$(window).load(function(){
    Choose_My_Saved_Billing(arg_index);
});

This only works if the function is already declared through raw code, on via the <script type="text/javascript" src="path/to/my_file.js"> head tag.

It should work like a charm, if not, feel free to share the errors returned by your browser.