how to import JQuery to another html file-CodePudding

I have a html file and in that i have some html and jquery i want to import the jquery to another html file this is my html code ↓↓↓

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Register Form Test JQuery</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var data = "";
        let arr = [];


        $(document).ready(function() {
            var skills = [];
            var subjects = [];

            $("button").click(function() {
                $.each($("input[name='subject']:checked"), function() {
                    subjects.push($(this).val());

                });


                $.each($("input[name='skill']:checked"), function() {
                    skills.push($(this).val());
                });


                var email = $("#email").val();
                var password = $("#password").val();
                var dob = $("#dob").val();
                var gender = $("#gender").val();
                var address = $("#address").val();
                var city = $("#city").val();
                var telephone = $("#telephone").val();
                var aadhaar = $("#aadhaar").val();
                var role = $("#role").val();


                data = "Email: "   email   ", "   "Password: "   password   ", "   "Date Of Birth: "   dob   ", "   "Gender: "   gender   ", "   "Address: "   address   ", "   "City: "   city   ", "   "Subjects: "   subjects.join(", ")   ", "   "Skills: "   skills.join(", ")   ", "   "Telephone Number: "   telephone   ", "   "Aadhaar Number: "   aadhaar   ", "   "Role: "   role;
                arr.push(data);
                console.log(data)
            });
        });
    </script>
</head>

<body>
    <form>
        <label>Email:</label><br>
        <input id="email" type="email" required><br>
        <label>Date Of Birth:</label><br>
        <input id="dob" type="date" required><br>
        <label>Role:</label><br>
        <select id="role" required>
    <option>Learner</option>
    <option>Educator</option>
    <option>Both</option>
    </select><br>
        <label>Gender:</label><br>
        <select id="gender" required>
      <option>Male</option>
      <option>Female</option>
      <option>other</option>
    </select><br>
        <label>Address:</label><br/>
        <input id="address" type="text" required><br/>
        <label>City:</label><br>
        <input id="city" type="text" required><br>
        <label>Subject/s</label><br>
        <label><input type="checkbox" value="Math" name="subject"> Math</label>
        <label><input type="checkbox" value="Science" name="subject"> Science</label>
        <label><input type="checkbox" value="SST" name="subject"> SST</label>
        <label><input type="checkbox" value="English" name="subject"> English</label>
        <label><input type="checkbox" value="Computer Science" name="subject"> Computer Science</label>
        <label><input type="checkbox" value="Kannada" name="subject"> Kannada</label><br>
        <label><input type="checkbox" value="Hindi" name="subject"> Hindi</label><br>
        <label>Skill/s</label>
        <BR>
        <label><input type="checkbox" value="Drawing/Doodling" name="skill"> Drawing/Doodling</label>
        <label><input type="checkbox" value="Instrument Playing" name="skill"> Instrument Playing</label>
        <label><input type="checkbox" value="Dance and/or Music" name="skill"> Dance and/or Music</label>
        <label><input type="checkbox" value="sports (any)" name="skill"> sports (any)</label><br>
        <label>Telephone Number:</label><br>
        <input type="tel" id="telephone" placeholder="1234-567890" pattern="[0-9]{4}-[0-9]{6}"><br>
        <label>Aadhaar Number (if available):</label><br>
        <input id="aadhaar" placeholder="1234-5678-9000" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"><br>
        <label>Password:</label><br>
        <input type="password" id="password" required><br><br>
        <button type="button" value="submit">Submit</button>
    </form>
</body>

</html>

How do i import the jquery script which is in this html file to another html file which also contains jquery? Is there any code which i need to input in my other file or do i need to link it in this html file?

Thanks for your help!

CodePudding user response：

Just copy the code to an external js file and include it in each html file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="myJQueryScript.js"></script>

Just remember to include this after the jquery source file

CodePudding user response：

What we can do is take a script file and add the jQuery link in that JS file. ex: MyJSFile.js

var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

    var data = "";
    let arr = [];

    $(document).ready(function() {
        var skills = [];
        var subjects = [];

        $("button").click(function() {
            $.each($("input[name='subject']:checked"), function() {
                subjects.push($(this).val());

            });

            $.each($("input[name='skill']:checked"), function() {
                skills.push($(this).val());
            });

            var email = $("#email").val();
            var password = $("#password").val();
            var dob = $("#dob").val();
            var gender = $("#gender").val();
            var address = $("#address").val();
            var city = $("#city").val();
            var telephone = $("#telephone").val();
            var aadhaar = $("#aadhaar").val();
            var role = $("#role").val();

            data = "Email: "   email   ", "   "Password: "   password   ", "   "Date Of Birth: "   dob   ", "   "Gender: "   gender   ", "   "Address: "   address   ", "   "City: "   city   ", "   "Subjects: "   subjects.join(", ")   ", "   "Skills: "   skills.join(", ")   ", "   "Telephone Number: "   telephone   ", "   "Aadhaar Number: "   aadhaar   ", "   "Role: "   role;
            arr.push(data);
            console.log(data)
        });
    });

Now you can import your MyJSFile.js file in as many HTML files as you can as shown in below.

<!DOCTYPE html>
<html>    
<head>
    <meta charset="utf-8">
    <title>Register Form Test JQuery</title>
    <script src="MyJSFile.js"></script>
</head>
   <body>
   </body>
</html>

CodePudding user response：

Just copy CDN scripts to bottom of your body or in head of your HTML tag and that's it. You can find links here: https://releases.jquery.com/