Question 354936 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Why isn't my jQuery connecting and why doesn't my forms data save to my javascript object?

I am trying to recreate account creation through javascript objects while also starting practice in jQuery. However, I am having a few issues.

First, I can’t seem to get jQuery to connect. I have tried a few of the recommended methods on the website like downloading through terminal using npm and importing it from other sites that host it. But I keep getting this error "account.js:5 Uncaught ReferenceError: $ is not defined"

My second issue is I can’t seem to get my form submission data to run through my formSubmit and accountCreation function. I know it’s not running because none of the values are popping up in the console log when formSubmit runs. I am really confused on where all the values are going.

I understand I haven’t been asking questions right the past few times and they haven’t been well received. I am trying to get it right this time. If I need to adjust my question in anyway please let me know. I also understand I will need a database to actually save data at all times but I am just trying to learn objects and constructors right now and thought this would be a good way to practice it. Any tips help, thank you.

edit: I found some issues like undefined variables and trying to use .innerText instead of .textContent. I also realized I cant push an array thats initialized from the outside without changing its variable type and I couldn’t use an array to store these objects in general. I updated the code, fixing some of the issues. Still can’t get jQuery to connect and would love some advice or steps I could take to find the issue.

var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);

$(".terms").css("color", "red");

function formSubmit(){
    let user = document.querySelector(".userBox").textContent;
    let email = document.querySelector(".emailBox").textContent;
    let pass = document.querySelector(".passBox").textContent;
    let conPass = document.querySelector(".conPassBox").textContent;
    console.log(user);
    console.log(user + " " + email + " " + pass + " " + conPass);
    accountCreation(user, email, pass, conPass);
}

function accountCreation(user, email, pass, conPass){
    this.username = user;
    this.email1 = email;
    this.password = pass;
    this.confirmPass = conPass;
    console.log(username + " " + email1 + " " + password + " " + confirmPass);
}
#form {
    background-color: rgb(30, 10, 80, 0.7);
    border-radius: 20px;
    border: 3px solid white;
    margin: 10% auto;
    width: 40vw;
    height: 55vh;
    position: relative;
    z-index: 5;
}

#box {
    font-size: 30px;
    color: white;
    border: none;
}

.signUpTitle {
    padding-top: 30px;
    padding-left: 110px;
    color: white;
    font-size: 40px;
    font-weight: 300;
    margin: auto;
    font-family: monospace;
}

.all {
    padding-top: 25px;
    display: inline-block;
    width: 350px;
    text-align: right;
    vertical-align: 10px;
    font-family: monospace;
}

.textbox {
    width: 210px;
    height: 30px;
    vertical-align: 15px;
    padding-left: 10px;
    font-size: 15px;
    border-radius: 10px;
}

#terms {
    border: none;
    padding-left: 250px;
}

.check:hover {
    cursor: pointer;
}

.terms {
    color: white;
    font-size: 15px;
    font-family: system-ui;
    position: relative;
    top: -1px;
}

#submit {
    border: none;
    padding-top: 5px;
    padding-left: 240px;
}

.submit {
    width: 200px;
    height: 50px;
    font-size: 25px;
    font-family: sans-serif;
    color: white;
    border-radius: 30px;
    background-color: rgb(80, 20, 200);
    border: 1px solid white;
}

.submit:hover {
    background-color: rgb(80, 25, 190);
    cursor: pointer;
}

#signUp {
    padding-top: 10px;
    padding-left: 195px;
    color: white;
    font-family: monospace;
    font-size: 15px;
    border: none;
}

.signUp {
    text-decoration: none;
    color: white;
}
<main>
            <form id="form">
                <fieldset id="box">
                    <h1 class="signUpTitle">Universal Sign Up</h1>
                    <label for="user" class="user all">Username: </label>
                    <input required type="text" class="userBox textbox" name="user" maxlength="16" minlength="5"></br>
                    <label for="email" class="email all">Email: </label>
                    <input required type="email" class="emailBox textbox" name="email"></br>
                    <label for="pass" class="pass all">Password: </label>
                    <input required type="password" class="passBox textbox" name="pass" maxlength="20" minlength="8"></br>
                    <label for="conPass" class="conPass all" >Confirm password: </label>
                    <input required type="password" class="conPassBox textbox" name="conPass" maxlength="20" minlength="8"></br>
                </fieldset>
                <fieldset id="terms">
                    <input type="checkbox" class="check">
                    <label for="terms" class="terms">Terms and Conditions</label></br>
                </fieldset>
                <fieldset id="submit">
                    <input type="button" class="submit" onclick="formSubmit()">
                </fieldset>
                <fieldset id="signUp">
                    Already have an account? 
                    <a href="login.html" class="signUp">Sign in</a>
                </fieldset>
            </form>
            <script src="../src/account.js"></script>
        </main>
Tags:

3

Answers


  1. 0

    You can try the word jQuery: jQuery() (typed out) instead $(). of easier is this; try to get jQuery back to no conflict mode. This is the easiest:

     jQuery(document).ready(function($) { 
/* in here, $ is safe */ 
 }); 

 jQuery(function($) { 
/* in here, $ is safe */ 
 });
    Login or Signup to reply.
  2. 0 
    jquery is really big so we have to wait for it to load or javascript finishes running the whole file without it: 
 script.onload = function () {
// jQuery is available now
 $(".terms").css("color", "red");
 $("title").html("jquery works now");

    };

    Login or Signup to reply.
  3. 0 
     script.onload = function () {
// jQuery is available now
 $(".terms").css("color", "red");
 $("title").html("jquery works");
 };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search