CODEWITHSUNDEEP
javascriptjqueryhtml
user7101388
user7101388

Reputation: 1

My Jquery does not connect to my html

my jquery is not connecting and I cannot figure out why. I've been stumped on this for hours and I cannot figure it out.

this is my html code. The file name is exercise6.html

<!DOCTYPE html> 
<html lang="en"> 
    
<head>

    <title>Exercise 6</title> 
    <meta charset="utf-8"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="JS/exercise6.js"> </script>
</head>
<body>

      <form id="email_form" name="email_form" action="exercise6.html" method="get">
	    <fieldset class="info">
		   <legend>Contact Information</legend>
			  <p>
			    <input type="text" name="Lname" id="name2" value="" required />
				<label for="name2"> Last</label>
			  </p>
			  <p>
			    <input type="text" name="mailAddie" id="mail1" value="" required />
				<label for="mail1"> Address</label>
			  </p>
			   <p>
			    <input type="text" name="City" id="city1" value="" />
				<label for="city1"> City</label>
			  </p>
			   <p>
			    <input type="text" name="State" id="state1" value="" />
				<label for="state1"> State</label>
			  </p>
			   <p>
			    <input type="number" name="Zip" id="zip1" value="" />
				<label for="zip1"> Zip</label>
			  </p>
			   <p>
			    <input type="number" name="phoneNum" id="number"  />
				<label for="number"> Phone</label>
			  </p>
		</fieldset>
		<fieldset>
		   <legend>Sign up for our email list</legend>
		     <p>
			    <label for="email_address1"> Email Address</label>
			    <input type="text" name="email_address1" id="email_address1" value="" />
				<span>*</span><br>
			 </p>
			 <p>
			    <label for="email_address2"> Confirm Email Address</label>
			    <input type="text" name="email_address2" id="email_address2" value="" />
				<span>*</span><br>
			 </p>

			 <p>
			    <label for="first_name"> First</label>
			    <input type="text" name="first_name" id="first_name" value="" />
				<span>*</span><br>
			  </p>

		</fieldset>

		<p>
		   <label>&nbsp;</label>
		   <input type="submit" value="Join Our List" id="join_list" >	
        </p>
		</form>

</body>
</html>

and this is my javascript. The file name is exercise6.js and it is located in a file named JS. I do not know what I am doing wrong.

$(document).ready(function() {
	$("#join_list").click(function() {
		var emailAddress1 = $("#email_address1").val();
		var emailAddress2 = $("#email_address2").val();
		var isValid = true;
		
		if (emailAddress1 == "") {
			$("#email_address1").next().text("This field is required.");
			isValid = false;
		} else {
			$("#email_address1").next().text("");
		}
		if (emailAddress2 == "") {
			$("#email_address2").next().text("This field is required.");
			isValid = false;
		} else {
			$("#email_address2").next().text("");
		}
		if ($("#first_name").val() == "") {
			$("#first_name").next().text("This field is required.");
			isValid = false
		} else {
			$("#first_name").next().text("");
		}
		if (isValid) {
			$("#email_form").submit();
		}

	)};
)};

Can anyone help me?

Upvotes: 0

Views: 86

Answers (2)

user1421750
user1421750

Reputation: 1230

The last two lines of exercise6.js both have a syntax error.

Change:

    )};
)};

To:

    });
});

To find this yourself next time, try using web development IDE like NetBeans with the help of right click with mouse to inspect in browser debug console, which would have even shown you where is this kind of error.

Upvotes: 1

UserEsp
UserEsp

Reputation: 426

enter image description hereYour js code has some errors for close the function "});" try this

$(document).ready(function() {
    $("#join_list").click(function() {
        var emailAddress1 = $("#email_address1").val();
        var emailAddress2 = $("#email_address2").val();
        var isValid = true;

        if (emailAddress1 == "") {
            $("#email_address1").next().text("This field is required.");
            isValid = false;
        } else {
            $("#email_address1").next().text("");
        }
        if (emailAddress2 == "") {
            $("#email_address2").next().text("This field is required.");
            isValid = false;
        } else {
            $("#email_address2").next().text("");
        }
        if ($("#first_name").val() == "") {
            $("#first_name").next().text("This field is required.");
            isValid = false
        } else {
            $("#first_name").next().text("");
        }
        if (isValid) {
            $("#email_form").submit();
        }

    });
});

Upvotes: 0

Related Questions