Comparing two fields in a form in Javascript - Not working - javascript

Can anyone tell me what I am doing wrong? my comparePasswords() is not working...
<script>
function comparePasswords()
{
if (post-form.password.value != post-form.password2.value)
{
$('passwordShow').innerHTML = '';
}
else
{
$('passwordShow').innerHTML = 'Passwords do not match';
}
}
</script>
<form id="post-form" action="signup.php" method="post" >
<input type="password" id="password" name="password" onkeyup="testPassword(this.value);" maxlength="50" size="25" tabindex="102" value="">
<input type="password" id="password2" name="password2" onkeyup="comparePasswords();" maxlength="50" size="25" tabindex="104" value="">
</form>

you need to use
document.getElementById('password').value
and
document.getElementById('password2').value
Also, your logic is wrong. The first conditional block will fire if the passwords do not match.
EDIT
seems you are using jQuery, so simply use
$('#password').val()
to get the field's value.
You should also set the innerHTML using jQuery (may as well) with the html() method

The problem is with how you're accessing the form object.
post-form.password
To the javascript engine, this is the same as this:
post - (form.password)
Also, you'd have to give your form a name attribute (not just an id) to access it that way. If you wanted to access it by name, you'd use something like this:
document['post-form'].password
Or by id:
document.getElementById("post-form");

The test in your if is backwards. The first branch is testing if the two passwords are NOT equal to each other.

Related

How do I add pre-set text in form for Angular 2?

I was watching this video here to create a form in Angular 2 with validation, but I really want to know how this person included the beginning of the url in the input field already. I've followed his same code and can't get the "http://" section to show by default.
This is what I have
<label>Company URL <span class="required">*</span></label>
<input class="form-control" [(ngModel)]="company.company_url" name="url" #url="ngModel" type="url" pattern="https?://.+" id="url" required maxlength="255">
<div *ngIf="companyErrors?.url" class="alert alert-field alert-danger">
{{companyErrors.url}}
</div>
Looks like the company.company_url value had been initialized before component's first render. You may try to do an assignment on the component's constructor:
constructor(/*...*/) {
// ...
company.company_url = "http://";
}
or maybe better on NgInit:
ngOnInit() {
// ...
company.company_url = "http://";
}
Another approach would be utilising placeholder attribute on your input tag.
Something like this
<input class="form-control" [(ngModel)]="company.company_url" name="url" #url="ngModel" type="url" pattern="https?://.+" id="url" required maxlength="255" placeholder="http://">
would render the same effect.

Why this code is not generating any alert message

Here i have written some that is for validation on form in html and javascript
<!DOCTYPE html>
<html>
<body>
<form name="registration">
<input style="font-size:16px;" type="text" name="Name" placeholder="Full Name" onchange="checkName()" required />
</form>
<script>
function checkName()
{
var uname=document.registration.Name.value;
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
alert('fg');
}
else
{
alert('Username must have alphabet characters only');
//uname.focus();
}
}
</script>
</body>
</html>
Please describe why it is not working?
The problem is that you're trying to get the value property TWICE. Like such:
var uname=document.registration.Name.value;
if(uname.value.match(letters))
Your uname variable already contains the value, so you don't need to get it again. Change your if statement to this...
if (uname.match(letters))
And it works just fine :)
Using onchange with input type = "text" is quite uncommon
onchange event usually occurs only after you leave (blur) the control.
onchange is mainly associated with change of select element.
For your case it is better to use keydown, keyup and keypress events as well.
HTML
<input style="font-size:16px;" type="text" name="Name" placeholder="Full Name" onkeyup="checkName()" required />
Jsfiddle

Reset Polymer paper-input-container value and label

I'm having trouble resetting the label inside a paper-input-container after submitting a form. The form is a simple login form. If a user logs in, out, and back in again without a page refresh (from the browser), the label appears to be stuck as if there were a value in the input.
Here's an image to show the difference:
Here's the form inside the element:
<form is="iron-form">
<paper-input-container id="email_container">
<paper-input-error>E-mail or Password is incorrect</paper-input-error>
<label>E-Mail Address</label>
<input is="iron-input" id="email" on-blur="validateEmail" value="{{emailInput::input}}">
</paper-input-container>
<paper-input-container id="password_container">
<label>Password</label>
<input is="iron-input" id="password" type="password" value="{{passwordInput::input}}">
</paper-input-container>
<paper-button raised dialog-dismiss>Cancel</paper-button>
<paper-button raised on-tap="handleCsrf">Login</paper-button>
</form>
These two approaches both get the form to the "after login" state the same:
//
this.emailInput = null;
this.passwordInput = null;
//
this.emailInput = "";
this.passwordInput = "";
I thought this would reset the entire container somehow, but it does nothing:
this.$.email_container = null;
this.$.password_container = null;
iron-input
bindValue
String
Use this property instead of value for two-way data binding.
<paper-input-container id="email_container">
<paper-input-error>E-mail or Password is incorrect</paper-input-error>
<label>E-Mail Address</label>
<input is="iron-input" id="email" on-blur="validateEmail" bind-value="{{emailInput::input}}">
</paper-input-container>
<paper-input-container id="password_container">
<label>Password</label>
<input is="iron-input" id="password" type="password" bind-value="{{passwordInput::input}}">
</paper-input-container>
With bindValue apparently both this.emailInput = null and this.set('emailInput, null) do the trick.
I'm not sure why the first form didn't work (I'm using a paper-input, not iron-input, and it worked there), it's possible the problem is somewhere in the code not shown. But something else to try is directly setting the value:
this.$.email.value = null; // where 'email' is the ID of the iron-input
I'm not entirely sure how this will interact with bind-value, but the docs do say
iron-input adds the bind-value property that mirrors the value
property
You can reset a complete iron-form by calling the reset() method:
document.getElementById('idOfForm').reset();

Validating Form with Javascript (Simple Test)

var name = document.getElementById('contact-name'),
email = document.getElementById('contact-email'),
phone = document.getElementById('contact-phone'),
message = document.getElementById('contact-message');
function checkForm() {
if (name.value == '') {
alert('test');
}
}
I was simply trying to make sure everything was working before I began learning actual client-side validation.
Here is the HTML
<form role='form' name='contactForm' action='#' method="POST" id='contact-form'>
<div class="form-group">
<label for="contact-name">First and Last Name</label>
<input type="text" class="form-control" id="contact-name" name="contactName" placeholder="Enter your name.." pattern="[A-Za-z]+\s[A-Za-z]+">
</div>
<div class="form-group">
<label for="contact-email">Email address</label>
<input type="email" class="form-control" id="contactEmail" name="contactEmail" placeholder="Enter Email" required>
</div>
<div class="form-group">
<label for="contact-phone">Phone Number</label>
<input type="number" class="form-control" id="contactPhone" name="contactPhone" placeholder="Enter Phone Number" required'>
</div>
<div class="form-group">
<label for='contactMessage'>Your Message</label>
<textarea class="form-control" rows="5" placeholder="Enter a brief message" name='contactMessage' id='contact-message' required></textarea>
</div>
<input type="submit" class="btn btn-default" value='Submit' onclick='checkForm()'>
</fieldset>
</form>
I took the required attribute off, and if I leave the name field empty it goes right to the other one when i click submit. To check whether javascript was working at all, i did an basic onclick function that worked.
Maybe someone can explain to me what is wrong with the checkForm function. Thanks in advance.
P.S The form-group and form-control classes belong to bootstrap
Change your javascript to this:
var contactName = document.getElementById('contact-name'),
email = document.getElementById('contact-email'),
phone = document.getElementById('contact-phone'),
message = document.getElementById('contact-message');
function checkForm() {
if (contactName.value === '') {
alert('test');
}
}
Okay, Hobbes, thank you for editing your question, now I can understand your problem.
Your code faces three two issues.
Your control flow. If you want to validate your field, you have to obtain its value upon validation. You instead populate variable name when the page loads, but the user will enter the text only after that. Hence you need to add var someVariableName = document.getElementById(...); to the beginning of the checkForm() function.
global variables. Please do not use them like that, it is a good design to avoid global variables as much as possible, otherwise you bring upon yourself the danger of introducing side effects (or suffering their impact, which happens in your situation). The global context window already contains a variable name and you cannot override that. See window.name in your console. You can of course use var name = ... inside the function or a block.
Even if you fix the above, you will still submit the form. You can prevent the form submission if you end your checkForm() function with return false;
For clarity I append the partial javascript that should work for you:
function checkForm() {
var name = document.getElementById('contact-name');
if (name.value == '') {
alert('test');
return false;
}
}
EDIT: As Eman Z pointed out, the part 1 of the problem does not really prevent the code from working as there's being retrieved an address of an object (thanks, Eman Z!),

Requesting specific values from an html input via Javascript

I'm trying to find a way to be able to do the following. I want to be able to get certain things from a form. In this case, I only want the "value" field and NOT the "name" field.
<div class="searchbox_team" style="margin: 0 0 10px 0; z-index: 50;">
<script type="text/javascript">
function customSearch()
{
var x = document.customSearch;
x.replace("customSearch=", "");
return x;
}
</script>
<form name="leSearch" action="/search/node/" onsubmit="return customSearch()" id="search-block-form" class="search-form">
<input type="text" name="customSearch" value="" id="edit-search-block-form-1" class="searchbox_input" title="Enter the terms you wish to search for." />
<input type="submit"/>
</form>
</div>
I have tried using the following in my function.
var x = document.customSearch.value;" but that is not working.
Can anyone shed some light on this?
It sounds like you want the value of the input for customSearch. If so then just use the following
var value = document.getElementById('edit-search-block-form-1').value;
Your input tag already has an id value hence the most efficient and simplest way to search for it is using getElementById.
hmm, so to get things from the form, you'll want to specifiy like so:
document.forms.leSearch.elements["customSearch"].value;
EDIT:
try adding a hidden field that stores the value onclick and then get that from the post or get array in your action file.. I think onsubmit call is to blame
<form name="leSearch" action="/search/node/" onclick="document.getElementById('myhiddenfield').value = customSearch()" id="search-block-form" class="search-form" method="post">
<input type="text" name="customSearch" value="" id="edit-search-block-form-1" class="searchbox_input" title="Enter the terms you wish to search for." />
<input type="hidden" value="" id="myhiddenfield" />
<input type="submit"/>
</form>
EDIT 2:
I think I figured it out.. the url was appending the field names because it was defaulting to "get" method mode.. set the action=/node/search/" and method="post"
<form method="post" action="/search/node/" onsubmit="this.action = '/search/node/' + document.getElementById('edit-search-block-form-1').value;">

Categories

Resources