I want to run this html code only when I click a button:
<div class="modal-bg">
<div id="modal">
<span>Sign In×</span>
<form>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<a id="forgot-link" href="#">Forgot password?</a>
<button name="submit" id="submit" type="submit">Sign in</button>
</form>
</div>
</div>
The button's html code is:
<span class="button" onclick="javascript:buttonClicked();">Sign In</span>
I want to create the buttonClicked() function in order to load the html code above (the form etc).
Any ideas?
<button id="showdiv">Show</button>
<div class="modal-bg hide">
<div id="modal">
<span>Sign In×</span>
<form>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<a id="forgot-link" href="#">Forgot password?</a>
<button name="submit" id="submit" type="submit">Sign in</button>
</form>
</div>
</div>
<script>
$(document).on("ready", function(e){
$("#showdiv").on("click", function(){
$("div.modal-bg").removeClass("hide");
});
});
</script>
Class hide should have valid css to hide the div. in div with class modal-bg.
Related
I have an html form where there are input fields for username, password, confirm-password and email. When i submit the button which is input type="submit" it does not take me to the action method's file rather it refreshes the file. I also wrote javascript to stop refresh by e.preventDefault() but same thing is happening.
This is the stupid html.
<div id="container">
<form action="includes/register.inc.php" method="post" id="form-container" class="register-form">
<h1 id="linklist">Register</h1>
<div class="input-container">
<input type="text" name="username" id="username" placeholder="Username">
<i class="fas fa-user" id="username-logo"></i>
</div>
<div class="input-container">
<input type="password" name="password" id="password" placeholder="Password">
<i class="fas fa-lock" id="password-logo"></i>
</div>
<div class="input-container">
<input type="password" name="confirm_password" id="confirm-password" placeholder ="Confirm password">
<i class="fas fa-lock" id="password-logo"></i>
</div>
<div class="input-container">
<input type="email" name="email" id="email" placeholder="Email">
<i class="fas fa-envelope" id="email-logo"></i>
</div>
<input type="submit" name = 'register' class="submit" value="Register">
<p id="login">
Have an account? Log in
</p>
</form>
</div>
This is the stupid extra javascript which didn't worked.
$(function() {
$('.register-form').on('submit', function(e) {
e.preventDefault();
})
});
This is the file where the form should take me.
<?php
if (isset($_POST["submit"])) {
echo "Am i stupid";
}
else{
header("location: ../register.php");
}
?>
Input type submit has name: register .
Then you only can check next parameters with $_POST[..].
Parameters:
I am new to typescript and I was wondering why my .ts code is not working with my HTML code (because my HTML does run, but the buttons don't work).
I am trying to do this without angular and without react
I have this code and have transpiled the .ts to .js, but nothing I've seen from examples is working to make the code run.
running on Intellij
Right now I have the code as simple as possible: the button is supposed to just run an alert.
there are 2 buttons where I try to test my code in the HTML File
:
<input type="button" class="button" id="enter" value="Login">
and
<button onclick="loginTs.validateInput()">Forgot Password?</button>
this is my HTML code
<HTML>
<HEAD>
<TITLE>Capstone Typescript Login</TITLE>
</HEAD>
<BODY>
<header>
<h2>Billy Bronco's Grading Calculator</h2>
</header>
<div id="container">
<div id="tabs">
<p id="lt" class="tabs" onclick="loginTabFun()">Log in</p>
<p id="rt" class="tabs" onclick="regTabFun()">Register</p>
<link rel="stylesheet" href="Login.css">
<div id="clear"></div>
</div>
<div id="cont">
<div id="login" class="comm">
<h3>Sign in</h3>
<input id="se" type="email" placeholder="Email" required/>
<input id="sp" type="password" placeholder="Password" required/>
<input type="button" class="button" id="enter" value="Login">
<button onclick="loginTs.validateInput()">Forgot Password?</button>
</div>
<div id="register" class="comm">
<h3>Register</h3>
<input id="re" type="email" placeholder="Email" required/>
<input id="rp" type="password" placeholder="Password" required/>
<input id="rrp" type="password" placeholder="Re write Password" required/>
<input type="submit" onclick="register()" value="Submit"/>
</div >
<div id="forgot" class="comm">
<h3>Forgot Password</h3>
<div>
<input id="fe" type="email" placeholder="Email" required/>
<input type="submit" onclick="forgot()" value="Submit"/>
</div>
</div>
</div>
</div>
<script src="LoginTs.js"></script>
</BODY>
</HTML>
this is my .ts code:
constructor(username: string, password: string ) {
this.username=(<HTMLInputElement>document.getElementById("email")).value;
this.password=(<HTMLInputElement>document.getElementById("password")).value;
let submitBtn= document.getElementById("enter")
submitBtn.addEventListener("click",(e:Event) =>{ return this.validateInput();});
}
validateInput(){
alert("wrong user or password but good job erin")
}
let loginTs = new LoginTs("billy", "bronco");
When my page loads I hide a div containing a form using
$('#popupPerson').hide();
then in the body I build a table and this popup to help insert/update/delete row data using a form that is initally hidden
<div id="popupPerson" class="popupPerson">
<form id="form_popup_person" action="person_update" method="post">
<fieldset>
<legend>Person</legend>
<label for="id">id</label> <input name="id" type="number" />
<label for="revision">revision</label> <input name="revision" type="number" /><p>
<label for="lastName">lastName</label> <input name="lastName" type="text" />
<label for="firstName">firstName</label> <input name="firstName" type="text" /><p>
<label for="street">street</label> <input name="street" type="text" />
<label for="city">city</label> <input name="city" type="text" /><p>
<label for="county">county</label> <input name="county" type="text" />
<label for="state">state</label> <input name="state" type="text" />
<label for="postalCode">postalCode</label> <input name="postalCode" type="text" /><p>
<label for="birthDate">birthDate</label> <input name="birthDate" type="text" />
<label for="email">email</label> <input name="email" type="text" />
<label for="status">status</label> <input name="status" type="text" /><p>
<input name="submit" type="submit" value="Submit" />
<input name="cancel" type="submit" class="cancel" value="Cancel" />
<button type="button" class="cancel" onClick="this.parent.close();">Cancel button</button>
<button type="button" class="cancel" onClick="$(this).parent().parent().hide();">parent parent hide button</button>
<button type="button" class="cancel" onClick="$(this).parent().hide();">parent hide button</button> <!-- makes ALL BUTTONS DISAPPEAR -->
<button type="button" class="cancel" onClick="$(this).hide();">hide button</button> <!-- makes the BUTTON ITSELF DISAPPEAR -->
</fieldset>
</form>
</div>
and some js so that if a row in the table is clicked this fires and makes the div visible
$('#popupPerson').show();
I want to add a "Cancel" button to the form that simply closes/hides the div - no submitting, no resetting.
you can simply write like
<button type="button" class="cancel" onClick="$('#popupPerson').hide();">Cancel</button>
I would use this: <button type="button" class="cancel" onClick="$(this).closest('.popupPerson').hide();">parent parent hide button</button> which closes the containing .popupPerson, incase you ever need more than one on a page.
Alternatively, you can put this in a script:
$(function(){
$(document).on('click','.popupPerson .cancel', function(){
$(this).closest('.popupPerson').hide();
// Do whatever else you want here, like eat the event (stopPropegation, etc).
});
});
And this is the element:
<a class="cancel">parent parent hide button</a>
I am making a login form with a link if the user forgot password,
this form is inside div as below, but the problem is that when the user click Forgot the password, it opens this page in the whole page not on its div
<div>
<form class="form" method="POST" id="login-nav">
<div class="form-group">
<label for="emailaddress">Email address</label>
<input type="email" class="form-control" id="emailaddress" name="emailaddress"placeholder="Email address" required>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" required>
<div class="help-block text-right">Forgot the password ?</div>
</div>
<div class="form-group">
<button type="submit" id="login_button" name="login_button" class="btn btn-primary btn-block">Sign in</button>
</div>
</form>
forgotpassword.php
<form action="" method="post">
<div class="form-group">
<label for="emailaddress">Enter your email address</label>
<input type="email" class="form-control" id="recovery_email" name="recovery_email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<button type="submit" id="resetpassword" name="resetpassword" class="btn btn-primary btn-block">Reset Password</button>
</div>
_self is standard for the target-tag. It opens the link in the same browser window, just what you are describing.
DIVs are not iFrames. (And no one wants iFrames for something like this. Really.)
You have to build your div-structure again at your forgotpassword.php.
I am working on this simple site, and I want to be able to take the information from these fields in a form, and save them to a plain text file (like on the desktop or something).
Here is the form I have so far:
<form id="mainform" class="pure-form pure-form-aligned">
<fieldset style="padding-top: 12px;">
<div class="pure-control-group">
<input id="service" class="pure-input" type="text" placeholder="Service">
</div>
<div class="pure-control-group">
<input id="username" class="pure-input" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<input id="email" class="pure-input" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<input id="password" class="pure-input" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<input id="vpassword" class="pure-inputs" type="password" placeholder="Verify Password">
</div>
<div class="pure-controls" style="margin-left: 0px;">
<button type="submit" class="pure-button pure-button-primary" id="button1" style="
margin-right: 15px; background-color:#99CCFF;">Submit</button>
<button type="submit" class="pure-button pure-button-primary" id="button2" style="
width: 81px;margin-left: 15px;background-color:#99CCFF;">Clear</button>
</div>
</fieldset>
</form>
I know about $POST for after the submit button is pressed but I figured this would be a bit different since it is going to a file. Probably JS I assume, would that be just like saving to a text file in a Java program?