As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm working on the following page:
http://mockingbirdagency.com/thebox/bettercss/login-1.html
and would like for the right part of the first sign up box to appear only once "Register with your email address" is clicked on.
I know very little Javascript but I'm guessing that's what I'll need to do that, can somebody point me to a tutorial ?
Cheers
(Edit: The reason I am asking for a link is that I wouldn't know what to look for on Google)
Assuming you'll add an id to these 2 elements:
<div class="form-step-1-container" id="myForm"> <!-- <-- ID here -->
<h1>Register with your email address</h1>
<div style="display:none;" id="targetDiv"> <!-- <-- ID here -->
<input id="username" type="text" placeholder="Choose a Username" required="required" name="username">
<input id="email" type="text" placeholder="Enter your Email" required="required" name="email">
<input id="password" type="text" placeholder="Enter your Password" required="required" name="password">
<input id="password" type="text" placeholder="Re-Enter your Password" required="required" name="password">
</div>
</div>
With native JavaScript:
document.getElementById('myForm').addEventListener('click', function(){
document.getElementById('targetDiv').style.display = "block";
});
This adds a "click" event listener to the "form-step-1-container" div, that displays the div containing the input elements, when clicked.
So, what does this actually do?
document.getElementById('myForm') "Gets" the DOM elements with id="myForm".
.addEventListener() adds an event listener to this object. It's first parameter ('click') specifies what event it should listen ("react") to, it's second parameter is a function to execute when the event happens. This function can be defined in the addEventListener(), like I did up here, but you can also define the function elsewhere in the code, and just use the function name in the addEventListener().
.style.display = "block" sets the element's display CSS style to the value "block", to display the inputs fields again.
Your code would look like this :
HTML
<div class="form-step-1-container">
<h1>Register with your email address</h1>
<div style="display:none;">
<input id="username" type="text" placeholder="Choose a Username" required="required" name="username">
<input id="email" type="text" placeholder="Enter your Email" required="required" name="email">
<input id="password" type="text" placeholder="Enter your Password" required="required" name="password">
<input id="password" type="text" placeholder="Re-Enter your Password" required="required" name="password">
</div>
</div>
JS
$(document).ready(function() {
$('.form-step-1-container h1').click(function() {
$('.form-step-1-container div').css('display', 'block');
});
});
Put the HTML element which contains the elements you want to hide into a common HTML element like a <div>. Then assign a CSS class to it which includes the style "display:none". You can do that in the HTML code, but a better solution would be to assign it with Javascript when the document loads, because in that case the input will be visible for those who have Javascript disabled.
Then add a onclick handler to the the div which replaces the CSS class with one which has dispay:block.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 11 months ago.
Improve this question
I want the submit button's to call the function only if the input fields meet the requirements set. Is there an easier way to do it than making an if statement for each input element?
<div class="container">
<form>
<input id="inputname" type="text" name="name" required placeholder="Your Name">
<input id="email" placeholder="Your E-mail" type="email" name="email" required>
<input id="phone" type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required>
<textarea type="text" rows="4" placeholder="Add comments(optional)" id="comments"></textarea>
<button type="submit" onclick="submitted()"> Reserve a Table</button>
</form>
</div>
<script>
const container = document.querySelector('.container');
function submitted() {
container.innerHTML = `<i class="fa-regular fa-circle-check"></i><br>
Thank you, the form has been submitted!`
}
</script>
Yes. See this tutorial for more details on form validation.
In particular, under the header Using built-in form validation:
When an element is invalid, the following things are true:
...
If the user tries to send the data, the browser will block the form and display an error message.
See also the note under the constraint validation process to learn more about when this happens.
The originally posted sample is shown this Fiddle but lacked a dot at the start of the container selector.
As a solution here, you can move the function call to the onsubmit handler of the form, instead of the click handler of the submit button. That fiddle is here and includes just the following changed tags: <form onsubmit="submitted()"> and <button type="submit">.
Fairly new to this. I read a bunch of answers with people having a similar problem. I tried all the solutions offered (using e.stopPropagation, using e.stopImmediatePropagation, using id instead of tag...) but nothing worked. I deployed a single html page through firebase.
I wrote the script directly in the html. Here's my code:
function onclick(e) {
/*e.stopPropagation() and e.preventDefault() --YIELDD SAME RESULT*/
e.stopImmediatePropagation()
console.log("hello")
}
<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
<label>Email:</label>
<input name="email" type="email" placeholder="#">
<label>New Password:</label>
<input name="password" type="password">
<label>Confirm Password:</label>
<input name="second-password" type="password">
<button id="submit-button" type="button" onclick="onclick()">Update</button>
</form>
</div>
</body>
Desired behavior: on click, button with id logs a message in the devtools console.
p.s. I'm sure there's a basic mistake I'm making but I am not able to find which one. Please help!
onclick is the name of a common DOM property. When a function with this name exists in the Global scope (as yours does), it essentially becomes a property of the window object and can overwrite the Global one. Call your callback function something else or move it out of the Global scope and it will work.
Also, e.stopImmediatePropagation() is most likely not required for your use case.
Finally, nothing can come after </body> except </html>. <script> elements are allowed in the head and body, but no where else.
<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
<label>Email:</label>
<input name="email" type="email" placeholder="#">
<label>New Password:</label>
<input name="password" type="password">
<label>Confirm Password:</label>
<input name="second-password" type="password">
<button id="submit-button" type="button" onclick="onclick1()">Update</button>
</form>
<script>
function onclick1(e) {
console.log("hello")
}
</script>
Now, since you are just learning all this, let's make sure you get off on the right foot. There is soooo much bad HTML and JavaScript floating around and bad habits are still used today because most people don't know any better so they just copy/paste someone else's code that seems to work.
Don't use inline HTML event handlers (onclick, onmouseover, etc.) in the first place. Separate your JavaScript from your HTML and follow modern, standards based code. There are many reasons to not use inline HTML event handlers. Instead, use the .addEventListener() method.
Next, the <label> element is a semantic element that works in one of two ways:
It has a for attribute that has a value that is identical to the
form field that it is the label "for":
<label for="txtFirstName">First Name:</label>
<input id="txtFirstName">
It contains the form field element that is is a label for:
<label>First Name: <input id="txtFirstName"></label>
In either case, you are telling the client that there is a relationship between the label and the form field it is a label for. This allows a user to click or touch the label and activate the form field. It is also very helpful to those who rely on assistive technologies (like screen readers) to use the web.
So, putting all this together, your code reworked would look like this (I've added just a little CSS to make the page a little cleaner to look at, but none of that is required):
label { display:block; width:200px; margin-bottom:.5em; }
button { margin-top: 1em; font-size:1.2em; padding:5px; }
<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
<label>Email: <input name="email" type="email" placeholder="#"></label>
<label>New Password: <input name="password" type="password"></label>
<label>Confirm Password: <input name="second-password" type="password"></label>
<button id="submit-button" type="button">Update</button>
</form>
<script>
// get a reference to the DOM element you want to work with
let btn = document.getElementById("submit-button");
// configure the event handler in JavaScript, not in HTML
btn.addEventListener("click", logToConsole);
// give your functions meaningful names
function logToConsole(e) {
console.log("hello")
}
</script>
<button id="submit-button" type="button"
onclick="onclick()">Update</button> causes an infinite loop. You're overriding the onclick method which basically makes your code say "When I'm clicked, click me" ad infinitum.
Change the name of function onclick() to anything else, like function hello() and it'll work.
Here's a working codepen you can play with. https://codepen.io/anon/pen/mzajGd
I think it's best to change which event your stopping, which seems to be the form submit. Unsure why you're getting the range issue, but this should work.
<!DOCTYPE html>
<html>
<body>
<form id="login-form" class="reset-form" >
<label>Email:</label>
<input name="email" type="email" placeholder="#">
<label>New Password:</label>
<input name="password" type="password">
<label>Confirm Password:</label>
<input name="second-password" type="password">
<input type="submit">Update</button>
</form>
<script>
document.getElementById("login-form").addEventListener("submit", function(event){
event.preventDefault();
alert('boogy');
});
</script>
</body>
</html>
Hi Steve and welcome to Stack Overflow.
First place your Button, there are several ways to acomplish this:
<button class="ui-btn" id="cmdHello">Push Me</button>
Yet another Button
Now react to it's Click event:
<script type="application/javascript">
$(document).bind("pageinit", function() {
$(document).on("click", "#cmdHello", function(evt) {
console.log("Hello World");
});
});
</script>
That should do the trick.
This question already has answers here:
Update Angular model after setting input value with jQuery
(12 answers)
Closed 5 years ago.
I have created a content script extension to auto fill user and password fields on webpage. It works OK in normal form like below -
<input name="userId" class="form-field" id="userId" placeholder="Username" autocomplete="off" tabindex="1" type="text">
<input name="password" class="form-field" id="password" placeholder="Password" autocomplete="off" tabindex="2" type="password">
<input name="signIn" class="btnBlue" id="signIn" value="Sign In" tabindex="4" onclick="checkIECompat()" type="button">
However, when it comes to Angular-generated form, no matter how hard I try to play with those ng-xxxxxx classes, it does not work.
<input type="text" class="form-control text-center modal-header ng-valid-maxlength ng-touched ng-dirty ng-valid-parse ng-invalid ng-invalid-required" name="idCard" placeholder="User Name" maxlength="20" autocomplete="off" ng-model="request.userName" required="">
<input type="password" class="form-control text-center ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-required" name="password" placeholder="Password" aria-describedby="" autocomplete="off" ng-model="request.password" style="margin-top:15px" required="">
<button type="submit" class="btn btn-blue btn_login" value="Log In" ng-click=" login('/payment')" ng-disabled="loginForm.$invalid" disabled="disabled">เข้าสู่ระบบ <span class="glyphicon glyphicon-log-in" style="font-size:14px" aria-hidden="true"></span></button>
Above is the code when page is first loaded. I manually key in the form and inspect the code when all validity have been checked and the submit button is enabled. Then, I use my program to change those classes and other details to make them identical (except its order). I even force enable the button by removing disabled attribute but it does not help. The button can be clicked but nothing happens.
My question is "is it possible to achieve this?". Are there any limitations concerning Angular that prevent the content script running successfully? Or it is just the coding issue that I have not been able to make it work.
One more problem is I do not own Angular code. It belongs to a website that I wan to use my extension with.
As guided by #wOxxOm, after add the following lines to trigger the event after setting input value (to update Angular model), my problem is solved.
document.getElementsByName("idCard").item(0).value = 'XXXXX';
document.getElementsByName("idCard").item(0).dispatchEvent(new Event("input"));
I'm using HTMLunit (tried both 2.43.1 and 2.46.0). I'm having a problem where it appears HTMLunit is actually rendering/changing the HTML during the load.
If I inspect the HTML from within Chrome, the field looks like this:
<div class="field">
<input id="password" name="password" placeholder="Password" type="password">
</div>
Pretty easy in that I should be able to select the field by id="password", right? Well, when I load the page through HTMLunit:
driver.setJavascriptEnabled(true);
driver.get(baseUrl + "/");
String foo = driver.getPageSource();
System.out.println("======\n" + foo + "\n==========\n");
Looking at the output, the field looks like this:
<div class="field">
<input id="password" type="text" placeholder="Password" class="placeholder" value="Password"/>
<input name="password" placeholder="Password" type="password" style="display: none;"/>
</div>
Now, one more thing, this div is only made visible by a click on a JavaScript button. So to do that, I execute:
driver.findElement(By.cssSelector("button.js-login-widget-button")).click();
foo = driver.getPageSource();
System.out.println("======\n" + foo + "\n==========\n");
Now the field looks like this:
<div class="field">
<input id="" type="text" placeholder="Password" class="placeholder" value="Password"/>
<input name="password" placeholder="Password" type="password" style="display: none;"/>
</div>
So, now, I have no id to select the field with. I could select by name, but that input is invisible, so I get an ElementNotVisibleException.
But my big question is WHY is HTMLunit changing the HTML and breaking me?
Help, please!
Thanks,
David
This is a follow on question for this question:
Server-side validation form Angular.js
So using that answer you could write some HTML in a template that would display a specific error for each error you give $setValidity. For example here is one:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.required">Required</span>
However, if I wanted to add one for last names must be 4 or more characters long I'd have:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.minRequired">Last name must be at least 4 characters long</span>
My question is how could I write a generic handler for all errors on a field. Something like:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.required">{{myProfile.lastName.$error.required}}</span>
Is that possible?
Do you mean that you just want to indicate the validity of the form element?
Then, you can do:
<span ng-show="myProfile.lastName.$invalid">Input field is invalid.</span>
If you need to be more specific, you can use ng-repeat to iterate through
myProfile.lastName.$error object and display all the errors.
In this case, you'll have to have some error-name to error-message translation for
readability.