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();
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
I made a validation form and I didn't use (required) attribute. I want to use only Javascript, but I try many scripts, Any scripts not working. Anyone write script which script worked please explain.
<div class="card-body">
<h2 class="text-center color-blue">Simple Form</h2>
<form class="myForm">
<div class="form-group">
<label>Name</label>
<input type="text" name="fname" class="form-control" placeholder="Enter Your Name" title="Enter Your Name">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Enter Your Email">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" id="phone" name="phone" class="form-control" oninput="validateNumber(this)" placeholder="Enter Your Number">
<!-- pattern="[0-9]{11}" -->
</div>
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" placeholder="Enter Your Username">
</div>
<div class="form-group">
<button class="btn btn-primary float-right">Save Info</button>
</div>
<div>
<p>Already have an acount? Login here</p>
</div>
</form>
</div>
const handleFormSubmit = event => {
event.preventDefault();
const data = form.elements;
console.log(data);
// your custom validation
// on fields
const isNumberValid = true
if(data.fname.value != "" && data.fname.vaue != "" && isNumberValid) {
form.submit();
alert(data.fname);
} else {
alert("ko");
}
return false;
};
const form = document.forms['myForm'];
form.addEventListener('submit', handleFormSubmit);
<div class="card-body">
<h2 class="text-center color-blue">Simple Form</h2>
<form id="myForm" action="/" method="post" accept-charset="utf-8">
<div class="form-group">
<label>Name</label>
<input type="text" name="fname" class="form-control" placeholder="Enter Your Name" title="Enter Your Name">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Enter Your Email">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" id="phone" name="phone" class="form-control" oninput="validateNumber(this)" placeholder="Enter Your Number">
<!-- pattern="[0-9]{11}" -->
</div>
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" placeholder="Enter Your Username">
</div>
<div class="form-group">
<button class="btn btn-primary float-right">Save Info</button>
</div>
<div>
<p>Already have an acount? Login here</p>
</div>
</form>
</div>
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>
I have a simple form created and that having one function to console.log all the field values. How can I get these logs to appear on AWS Cloudwath ?
My form -
<form role="form" id="form" name="form" method="POST">
<div class="form-group">
<label for="name">Enter Name</label>
<input ng-model="data.name" type="text" class="form-control" id="name" aria-describedby="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="age">Age</label>
<input ng-model="data.age" type="text" maxlength="3" class="form-control" id="age" placeholder="Enter Age">
</div>
<div class="form-group">
<label for="address">Address</label>
<input ng-model="data.address" type="text" class="form-control" id="address" placeholder="Enter Address">
</div>
<button type="submit" class="btn btn-primary" ng-click="reqCalling()">Submit</button>
</form>
Please Help I have no idea what to do
I want to add some html elements dynamically using jQuery inside a form tag but it is not working .
$(document).ready(function() {
var requirements = 0;
var container = $(document.createElement('div').addClass('form-group'));
$('#add-req').click(function() {
if (requirements <= 15) {
requirements = requirements + 1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post">
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
when I click add requirement button it should create another div tag and input element inside form element.
Just replace the code $(document.createElement('div').addClass('form-group')); to $(document.createElement('div')).addClass('form-group');
Try the following
We can directly Insert a html element to the targer Element as follow
$(document).ready(function(){
var requirements=0;
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$('#requirement-div').after('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
you mixing between JS and JQuery, where document.createElemet('div') is a JS function while addClass is a JQuery function.
$(document).ready(function(){
var requirements = 0;
var container=$('<div>').addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
container.append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$(this).before(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
Replace the Below Code
<script>
$(document).ready(function(){
var requirements=0;
var container=$(document.createElement('div')).addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
</script>
I wrote a script here (Adding html elements dynamically using jquery) that you can test
<form action="#" method="post">
<div class="form-group">
<input type="text" class="form-control test" placeholder="Your Name" name="Course name" required="">
</div>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<div class="styled-input">
<input type="button" class="btn btn-primary" value="Add Requirements" id="add-req">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
JQuery Code
$(function() {
var requirements=0;
$('#add-req').click(function(e){
e.preventDefault();
$('.test').val('Okay');
if(requirements <= 15) {
$('.styled-input').prepend('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
requirements++;
} else {
alert('Max requirement has been reached');
}
});
});
I've recently been working on a website's user registration system and I just finished the front end, it is using parsleyjs to validate the values in the form.
The problem I have is when the form is submitted no values are passed, is there any reason for this happening?
Form Code
<form role="form" method="get" data-validate="parsley" id="register" action="register/2/">
<div class="form-group">
<label for="userFirstName">Frist Name</label>
<input type="text" class="form-control" id="userFirstName" placeholder="John" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="userLastName">Last Name</label>
<input type="text" class="form-control" id="userLastName" placeholder="Newman" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="NewJohn101" data-required="true" data-trigger="change" data-usernamecheck="true">
</div>
<div class="form-group">
<label for="userEmail">Email address</label>
<input type="email" class="form-control" id="userEmail" placeholder="Email" data-trigger="change" data-required="true" data-type="email">
</div>
<div class="form-group">
<label for="userPassword">Password</label>
<input type="password" class="form-control" id="userPassword" placeholder="Password" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="userPasswordRetype">Re-Type Password</label>
<input type="password" class="form-control" id="userPasswordRetype" placeholder="Re-Type Password" data-required="true" data-equalto="#userPassword" data-trigger="change">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Both POST and GET assign values to keys that are equivalent to the name attribute of your inputs. For example:
<input type="text" name="input1" value="test">
Will build the array
"test" => $_GET["input1"]
No name attribute. No array.