javascript - JQuery UI Dialog Not Showing when using a separate JS File -
I'm new to JavaScript and JQuery and I want to create a basic social website. Although I was stuck on the login page I basically want to do website, when you click Login, there will be a dialog popup and say your password and username are not correct and two buttons are asked to sign up and cancel I understood That you can do that using JQuery Dialog UI but IM is struggling to do it. These are my HTML, Javascript and CSS pages.
& lt ;! DOCTYPE html public "- // W3C // DTD HTML 4.01 // EN" & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; Login & lt; / Title & gt; & Lt; Link rel = "stylesheet" href = "css / login.css" & gt; & Lt ;! - Include jquery library - & gt; & Lt; Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> & Lt ;! - Include jquery ui library - & gt; & Lt; Script src = "// ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> & Lt; Script & gt; // Click the dialog to be submitted and check the ShowDialog () function. Select the {/ * div} which you want to create a dialogue, in our case this is 'Basic Model', you can see the parameters like width, height, Title, and so on. * / $ ("#basicModal") .dialog ({modal: true, title: "Are you certain?", Button: {"yes": function () {window.open ('signup.html');} , "No": function () {$ (this) .dialog ("close");}}}); }); & Lt; / Script & gt; & Lt; Script src = "js / script.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Section class = "login form" & gt; & Lt; Form name = "login" action = "" method = "post" onsubmit = "return check (login)" acceptable-charset = "UTF-8" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; Label = "usermail" & gt; Email & lt; / Label & gt; & Lt; Input type = "user name" name = "username" placeholder = "user name" required & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Label = "password" & gt; Password & lt; / Label & gt; & Lt; Input type = "password" name = "password" placeholder = "password" required & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "submit" value = "login" & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Form & gt; & Lt; / Section & gt; & Lt ;! - This is the real dialogue, yes, it is included in your html body, it's just hidden - we did not set the dialog 'title' here, we set it in js parameter - & gt; & Lt; Div id = "basicModal" & gt; you are mad? Username and password are not correct. Please sign up using the button below. & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt; This is my javascript page
function check (form) {/ * The following code checks whether the email and password being entered are matching * / If (Form.username.value === "User" & amp; amp; form.password.value === "pass") {window.open ('home.html'); / * Opens the Target Page while ID & amp; Password matches * /} else {// warning ("no password or username found. Please sign up"); / * Display error message * / showDialog (); }} and my CSS
ul {list-style-type: none; } .loginform {margin: 20% auto; Width: 200px; } / * Dialog Devices should be hidden * / #basicModal {display: none; } << Code>
You need return to Check () function to stop the form:
Function check (form) {/ * The following code checks whether the email and password that are signed / / (If Form.username.value === "user" & amp; amp; form.password.value === "pass") {window.open ('home.html'); / * Opens the Target Page while ID & amp; Password matches * /} else {// warning ("no password or username found. Please sign up"); / * Display error message * / showDialog (); return false; }}
You also have a syntax error. should not be at the end of showDialog ()
this one
Comments
Post a Comment