We Keep Coding

The JavaScript function does not apply to the form and the confirmation button

The JavaScript function does not apply to the form and the Submit button in HTML
The 'js' file is inside another folder
I also did the link to the 'js' file correctly
function check_pass() {
if (document.getElementById('password').value == document.getElementById('passwordconfirm').value) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
}
<form name="cForm" id="cForm" method="post" action="php/save.php">
<fieldset>
<div class="form-field">
<input name="username" type="text" id="username" class="full-width" placeholder="نام کاربری" value="">
</div>
<div class="form-field">
<input name="email" type="email" id="email" class="full-width" placeholder="ایمیل" value="">
</div>
<div class="form-field">
<input name="password" type="password" id="password" class="full-width" placeholder="پسوورد" value="" onkeyup="check_pass();">
</div>
<div class="form-field">
<input name="passwordconfirm" type="password" id="passwordconfirm" class="full-width" placeholder="تکرار پسوورد" value="" onkeyup="check_pass();">
</div>
<button type="submit" id="submit" class="submit button-primary full-width-on-mobile" disabled>ثبت</button>
</fieldset>
</form>

can't choose ".value" option for input value

I really cant understand why it's not working, here is my html:
<form>
<h1 class="forms_container_title">Registration form: </h1>
<div class="form_items">
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="form_items">
<input type="text" name="surname" id="surname" placeholder="Enter your surname">
</div>
<div class="form_items">
<input type="email" name="emal" id="email" placeholder="Enter your email">
</div>
<div class="form_items">
<input type="password" name="pw" id="pw" placeholder="Enter password">
</div>
</form>
<div id="submit_form">
<button type="submit">Submit</button>
</div>
and this is simple javascprit, for example:
const fname = document.getElementById("name");
and I want to get its value with ".value", but it's only showing ".nodevalue" option, whyy ???

jquery form submit - show div and submit

I am trying to make jQuery script where after click form submit will make div display:block and after 5 seconds will submit my form.
Code in header code below - not working even for testing submit delay:
<script>
$('#registerform').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 1000); // in milliseconds
});
</script>
This div should become after click submit in form visible:
<div id="gif"><img src="img/digital_signature.gif" /></div>
And after 5 second this form should submit:
<form action="todo.php" method="post" id="registerform">
<div class="input-holder">
<input class="fname" type="text" name="login" placeholder="Firstname">
</div>
<div class="input-holder">
<input class="fname" type="text" name="pass" placeholder="Lastname">
</div>
<div class="input-holder">
<input class="city" type="text" name="pass" placeholder="Postal Adress">
</div>
<div class="input-holder">
<input class="city" type="text" name="pass" placeholder="City">
</div>
<div class="input-holder">
<input class="city" type="text" name="pass" placeholder="Country">
</div>
<div class="input-holder">
<input class="email" type="text" name="pass" placeholder="E-mail">
</div>
<div class="input-holder">
<input class="revenue" type="text" name="pass" placeholder="Your Value">
</div>
<div class="input-holder">
<textarea rows="1" class="baddress" placeholder="Secret address"></textarea>
</div>
<div class="input-holder">
<input type="file" class="custom-file-input" name="SCAN" id="fileToUpload" />
</div>
<input type="submit" value="Login" id="submit">
</form>

http://codepen.io/anon/pen/gPayYe
$('#submit').on('click', function (e) {
alert('button clicked: submitting in 5 seconds')
$('#gif').show();
e.preventDefault();
setTimeout(function () {
$('#registerform').trigger('submit');
}, 5000); // in milliseconds
});
$('#registerform').on('submit', function() {
alert('form submitted')
});

preventDefault doesn't work [duplicate]

This question already has answers here:
JS & jQuery can't detect html elements, and say's they are undefined
(4 answers)
Closed 7 years ago.
I have a problem with preventDefault function. It doesn't work. Here is my JS file:
(function() {
var app = {
initialize : function () {
this.setUpListeners();
},
setUpListeners: function () {
$('form').on('submit', app.submitForm);
},
submitForm: function(e){
e.preventDefault();
}
}
app.initialize();
}());
My HTML code has 2 confirm button. Second step is hidden and should be display, when first step will be done. But I can't at least add preventDefault for first step.
Here is my HTML:
<form id="login">
<!-- #first_step -->
<div id="first_step">
<h1>Registration Form</h1>
<fieldset id="inputs">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Create a username" required="">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Create a password" required="">
</div>
<div class="form-group">
<label for="cpassword">Password</label>
<input type="password" name="password" id="cpassword" class="form-control" placeholder="Confirm your password">
</div>
</fieldset>
<fieldset id="actions">
<div class="form-group">
<input type="submit" class="submit" name="submit_first" id="submit_first" value="Next">
</div>
</fieldset>
</div>
<!-- #second_step -->
<div id="second_step">
<h1>Registration Form</h1>
<fieldset id="inputs">
<label>Name</label>
<input type="text" name="name" id="firstname" class="form-control" placeholder="Enter your name" autofocus="" required="">
<label>Surname</label>
<input type="text" name="surname" id="lastname" class="form-control" placeholder="Enter your last name" required="">
<label>Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your email" required="">
</fieldset>
<fieldset id="actions">
<input class="submit" type="submit" name="submit_second" id="submit_second" value="Next">
</fieldset>
</div>
</form>
I'm sorry. I'm just a beginner in js and will be very thankful if someone help me

$(function() {
var app = {
initialize : function () {
this.setUpListeners();
},
setUpListeners: function () {
$('form').on('submit', app.submitForm);
},
submitForm: function(e){
e.preventDefault();
}
}
app.initialize();
});

Javascript failing to validate form

I am having trouble pinpointing why my javascript code is failing to validate the form on the bottom. Any help is appreciated. I'm new and learning when in comes to javascript.
Here's the javascript:
<script type="text/javascript" language="javascript">
function validate(){
//Initialize array
var field = new Array;
var field = [document.getElementById('first_name'),document.getElementById('last_name'),document.getElementById('address'),document.getElementById('eadress'),document.getElementById('city'),document.getElementById('state'),document.getElementById('telephone'),document.getElementById('comments')];
//Error tracker
var error = 0;
//Validation Loop
for (i=0;i<field.length;i++)
{
if (field[i].value == "")
{
error++;
}
}
//If no errors are present, submit
if (error == 0)
{
document.contact-form.submit();
}
//Else, display alert
else {
alert("One or more fields are empty.");
return false;
}
}
Here's the form:
<div id="registration">
<form action="" method="post" onsubmit="return validate();" id="contact-form">
<h2>Contact Us
</h2>
<div>
<label for="first_name">First Name:</label>
<input id="first_name" name="first_name" type="text" class="required" />
</div>
<div>
<label for="last_name">Last Name:</label>
<input id="last_name" name="last_name" type="text" class="required" />
</div>
<div>
<label for="address">Address:</label>
<input id="address" name="address" type="text" />
</div>
<div>
<label for="city">City:</label>
<input id="city" name="city" type="text" />
</div>
<div >
<label for="state">State:</label>
<input id="state" name="state" type="text" />
</div>
<div >
<label for="zip">Zip:</label>
<input id="zip" name="zip" type="text" />
</div>
<div>
<label for="eaddress">Email address:</label>
<input id="eaddress" name="eaddress" type="text" class="required"/>
</div>
<div>
<label for="telephone">Telephone:</label>
<input id="telephone" name="telephone" type="text" />
</div>
<div>
<label>Comments:</label>
<textarea rows="4" cols="4" name="comments" id="comments" ></textarea>
</div>
<div>
<label></label>
<input id="submit" type="submit" value="Submit" />
<input id="reset" type="reset" value="Reset" />
</div>
</form>

I just corrected your code. it seems that in the array you are asking for eadress and the field is eaddress with 2 d's

In the script, you misspelt eaddress as eadress :)

You misspelled one of the fields ids in your array definition document.getElementById('eadress') is eaddress in HTML id attribute