jQuery Form Processing troubles - javascript

I have a problem to process the data from my html form with jQuery. I have this simple form:
<form id="singup">
<input type="text" placeholder="Full Name" id="signup-name">
<input type="email" placeholder="Email Address" id="signup-email">
<input type="password" placeholder="Password" id="signup-pass">
<input type="password" placeholder="Retype Password" id="signup-retype-pass">
<button class="button-hover" type="submit" id="signup-submit">Create account now</button>
</form>
Now I want to get the value of the inputs with jQuery.
$("#singup").submit(function (e) {
var email = $('#singup-email').val();
console.log(email);
e.preventDefault(e);
});
But the browser console tells me the var email is undefined. Why?
Thanks for help!

Typo mistake. use signup-email not singup-email
$("#singup").submit(function (e) {
var email = $('#signup-email').val();
console.log(email);
e.preventDefault(e);
});

$("#signup-submit").on('click', function (e) {
var email = $('#signup-email').val();
console.log(email);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="singup">
<input type="text" placeholder="Full Name" id="signup-name">
<input type="email" placeholder="Email Address" id="signup-email">
<input type="password" placeholder="Password" id="signup-pass">
<input type="password" placeholder="Retype Password" id="signup-retype-pass">
<button class="button-hover" type="button" id="signup-submit">Create account now</button>
</form>

Related

Submit button calls the javascript function even though the fields are empty and not followed the pattern

I am new to JavaScript. I have a form in an html file that has some text fields. When someone click the submit button, a JavaScript function is called to do some work (in this case, a simple alert). It works as I wanted, when I fill the text fields and click the submit button it calls the JavaScript function and the function shows an alert. However, the problem is, when a user clicks the submit button keeping some fields empty and/or not following the pattern of an email address, it calls the JavaScript function (even though HTML 5 has shown warnings in the form). I want the JavaScript function should only be called if there are no HTML warnings, I mean no empty fields and the user must follow the email pattern. Thank you for your help.
HTML code:
<form id="myForm" method="post" role="form" class="contactForm">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea>
<button id="submitFormData" onclick="SubmitFormData();" type="submit" class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="alert.js"></script>
Javascript Code (alert.js):
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
alert("SHOW SOMETHING HERE");
}
you can use required attribute in the input and one more thing you can call the SubmitFormData() onsubmit form here's your modified code :
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
alert("SHOW SOMETHING HERE");
}
<form id="myForm" method="post" role="form" class="contactForm" onsubmit="SubmitFormData();">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required/>
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" required/>
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message" required></textarea>
<button id="submitFormData" type="submit" class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
You just need to add the required attribute to your fields, see
Here is the best working solution for what you want to achieve by using the
form validation JS plugin.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<style>
form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
.error {
color: red;
margin-left: 5px;
}
label.error {
display: inline;
}
</style>
<script>
$(document).ready(function() {
$('form[id="second_form"]').validate({
rules: {
name: 'required',
user_email: {
required: true,
email: true,
},
message: {
required: true,
}
},
messages: {
name: 'This field is required',
user_email: 'Enter a valid email',
message: 'This field is required'
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h2>Example 2:</h2>
<form id="second_form" method="post" action="">
<div>
<label for="name">Name:</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
</div>
<div>
<label for="email">Email</label>
<input type="email" class="form-control" name="user_email" id="user_email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
</div>
<div>
<label for="message">message:</label>
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
The easiest way was to provide an HTML only solution based on a form element's required attribute since the browser will take over the validation of required elements also by their element/control type ...
<form id="myForm" method="post" role="form" class="contactForm" action="https://stackoverflow.com/">
<input
required
type="text" name="name" id="name"
class="form-control" placeholder="Your Name"
/>
<input
required
type="email" name="email" id="email"
class="form-control" placeholder="Your Email"
/>
<textarea
required
name="message" id="message"
class="form-control" rows="5" placeholder="Message"></textarea>
<button
type="submit" id="submitFormData"
class="button button-a button-big button-rouded">Send Message</button>
</form>
A generic custom validation is much more complex and labour-intensive ...
function validateControValue(elm) {
let isValid = true;
const elmType = elm.type;
if (elmType !== 'button' && elmType !== 'submit') {
const $elm = $(elm);
const isEmpty = ($elm.val().trim() === '');
if (isEmpty) {
$elm.val('');
$elm.addClass('validation-error');
} else {
$elm.removeClass('validation-error');
}
// non empty is valid, empty is invalid.
isValid = !isEmpty;
}
return isValid;
}
function handleValidFormSubmit(/* evt */) {
const isValidSubmitData = Array
.from(this.elements)
.every(validateControValue);
return isValidSubmitData;
}
function main() {
$('#myForm').on('submit', handleValidFormSubmit)
}
$(document)
.ready(main);
.validation-error {
border: 1px solid #f00;
}
<form id="myForm" method="post" role="form" class="contactForm" action="https://stackoverflow.com/">
<input
type="text" name="name" id="name"
class="form-control" placeholder="Your Name"
/>
<input
type="email" name="email" id="email"
class="form-control" placeholder="Your Email"
/>
<textarea
name="message" id="message"
class="form-control" rows="5" placeholder="Message"></textarea>
<button
type="submit" id="submitFormData"
class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- <script src="alert.js"></script> //-->

No output is displayed in my Javascript code

I am a beginner at javascript and i am stuck with this piece of code. Syntactically the code seems to have no error but when it is executed there is no output, both in the webpage and the console. Hence I am confused and am unable to understand where the error lies.
function SubMit() {
var userName = document.getElementById("user").value;
document.getElementById("out").innerHTML = userName;
var fName = document.getElementById("firstName").value;
var lName = document.getElementById("lastName").value;
var eMail = document.getElementById("email").value;
var p1 = document.getElementById("pass1").value;
var p2 = document.getElementById("pass2").value;
console.log(userName);
console.log(fName);
console.log(lName);
console.log(eMail);
console.log(p1);
console.log(p2);
}
function click() {
document.getElementById("c").innerHTML = "HELLO WORLD";
console.log("hello world");
}
<form>
<input type="text" placeholder="Username" id="user" required>
<input type="text" placeholder="First Name" id="firstName" required>
<input type="text" placeholder="Last Name" id="lastName">
<input type="email" placeholder="Email" id="email" required>
<input type="password" placeholder="Password" id="pass1" required>
<input type="password" placeholder="Confirm Password" id="pass2" required>
<button type="submit" onclick="SubMit()">SUBMIT</button>
</form>
<output id="out"></output>
<button type="button" onclick="click()">click me</button>
<p id="c"></p>
click() is already defined as a javascript method
function SubMit() {
var userName = document.getElementById("user").value;
document.getElementById("out").innerHTML = userName;
var fName = document.getElementById("firstName").value;
var lName = document.getElementById("lastName").value;
var eMail = document.getElementById("email").value;
var p1 = document.getElementById("pass1").value;
var p2 = document.getElementById("pass2").value;
console.log(userName);
console.log(fName);
console.log(lName);
console.log(eMail);
console.log(p1);
console.log(p2);
}
function myClick() {
document.getElementById("c").innerHTML = "HELLO WORLD";
console.log("hello world");
}
<form>
<input type="text" placeholder="Username" id="user" required>
<input type="text" placeholder="First Name" id="firstName" required>
<input type="text" placeholder="Last Name" id="lastName">
<input type="email" placeholder="Email" id="email" required>
<input type="password" placeholder="Password" id="pass1" required>
<input type="password" placeholder="Confirm Password" id="pass2" required>
<button type="submit" onclick="SubMit()">SUBMIT</button>
</form>
<output id="out"></output>
<button type="button" onclick="myClick()">click me</button>
<p id="c"></p>
Change output tag with div tag as.
<div id="out"></div>
rename click() to any other name. click() is predefined js function and you have to override the function before using it preventing the click event.

In javascript how to send data to php file using post method

In javascript i want to know how to send data to php file using post method.
I have tried diffewrent method. But i didn't get any output so please help me.
My code is shown below.
index.php
<form method="post" name="form" enctype="multipart/form-data">
<input type="text" name="name" id="name" placeholder="Name" required/>
<input type="email" name="email" id="email" placeholder="Email" required/>
<input type="password" name="pass" id="pass" placeholder="Password" required/>
<input type="submit" name="submit" value="Send" onclick="myFunction()"/>
</form>
<script>
function myFunction() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
//// I want post the values to profile.php
}
</script>
profile.php
if (isset($_POST['submit'])) {
$name = $_POST['name'];
}
Do something like this and pass your values like this and you can check in your profile.php page....Here you cannot check if(isset($_POST['submit'])), but you you can check if(isset($_POST['name']))
<form method="post" name="form" enctype="multipart/form-data">
<input type="text" name="name" id="name" placeholder="Name" required/>
<input type="email" name="email" id="email" placeholder="Email" required/>
<input type="password" name="pass" id="pass" placeholder="Password" required/>
<input type="submit" name="submit" value="Send" onclick="myFunction()"/>
</form>
<script>
function myFunction() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
$.ajax({
type : "POST", //type of method
url : "profile.php", //your page
data : { name : name, email : email, password : password },// passing the values
success: function(res){
//do what you want here...
}
});
}
</script>
Do some thing like this. Send ajax request on profile.php file.
ON profile.php file print_r($_REQUEST) you will get all your form indexes.
$(document).ready(function() {
$("form").on("submit", function(event) {
$.ajax({
type: 'POST',
url: 'profile.php',
data: $( this ).serialize(),
success: function(data) {
//success code
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="form" enctype="multipart/form-data" onSubmit="return false;">
<input type="text" name="name" id="name" placeholder="Name" required/>
<input type="email" name="email" id="email" placeholder="Email" required/>
<input type="password" name="pass" id="pass" placeholder="Password" required/>
<input type="submit" name="submit" value="Send" />
</form>
profile.php
print_r($_REQUEST);
First I need to say that, you can post your data by ajax (without page reloading) or by direct post (reload your page).As your question doesn't tag jquery, so i'm leaving ajax.
Here is the example for post a form data, I mean reload the current page and post the form data in profile.php
Hence your enctype will be enctype="multipart/mixed" instead of enctype="multipart/form-data" because you didn't want to send any file input in your form.
<form method="post" action="profile.php" name="form" id="your_form_id" enctype="multipart/mixed">
<input type="text" name="name" id="name" placeholder="Name" required/>
<input type="email" name="email" id="email" placeholder="Email" required/>
<input type="password" name="pass" id="pass" placeholder="Password" required/>
<input type="button" name="btnsubmit" value="Send" onclick="myFunction()"/>
</form>
<script>
function myFunction() {
//you didn't need to get the data by `document.getElementById()`. just submit your form
//var name = document.getElementById("name").value;
//var email = document.getElementById("email").value;
//var password = document.getElementById("password").value;
document.getElementById('your_form_id').submit();
}
</script>

How to send alert using inputted text

I'm trying to create a simple sign in/sign up form that sends an alert to the user once they've hit the submit button. The alert will show the user all the info they have put in (name, email, password). When I run the app the alert comes up as "undefined".
Here's my code:
HTML:
<form>
<h2>Sign In</h2>
<label>User Name:</label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password:</label>
<input type="password" placeholder="Enter Password" name="password" required>
<input type="submit" class="submit-button si-submit" value="Sign In">
<div id="remember"><input type="checkbox" checked="checked"><span>Remember me</span></div>
</form>
</div>
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
JS:
var userInfo = document.getElementById("name");
document.getElementById("myButton").addEventListener("click", function() {
alert(userInfo.value);
});
Your code seems to work...
var userName = document.getElementById("name"),
userEmail = document.getElementById("email"),
userPassword = document.getElementById("password");
document.getElementById("myButton").addEventListener("click", function() {
alert(userName.value);
alert(userEmail.value);
alert(userPassword.value);
});
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
</div>

I am trying to check whether the password input fiels of the two field are same or not

i have tried the Jquery and Javascript as well nothing wrk. Please tell me what need to be done, If I Click on submit Button then the password of the two input fields must be compared and checked.
<div class="registration-details">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" />
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" />
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" />
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required />
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" />
<input type="password" name="Password" required placeholder="Enter Password" />
<input type="password" name="ConfirmPassword" required placeholder="Confirm Password" />
<input type="submit" value="Submit" name="Submit" />
</div>
$('#form').submit(function() {
var id1 = $(#Password).text();
var id2 = $(#ConfirmPassword).text();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
Try below code:
1.add Ids to input fields:
<input type="password" id="Password" name="Password" required placeholder="Enter Password" />
<input type="password" id="ConfirmPassword" name="ConfirmPassword" required placeholder="Confirm Password" />
2. check in jquery
$('#form').submit(function() {
var id1 = $("#Password").val(); // use .val()
var id2 = $("#ConfirmPassword").val();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
Incorrect syntax in your code:
$('#form').submit(function() {
var id1 = $("#Password").val); //this is the right syntax
var id2 = $("#ConfirmPassword").val();//this too
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
As other users have rightly mentioned:
.text() is for elements containing text, it won't work on input elements.
.val() is to obtain input element texts.
missing form tag and
missing id in password
try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert("hi");
$('form').submit(function() {
var id1 = $('#Password').val();
var id2 = $('#ConfirmPassword').val();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
});
<div class="registration-details">
<form action="#" id="form">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" />
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" />
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" />
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required />
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" />
<input type="password" id="Password" name="Password" required placeholder="Enter Password" />
<input type="password" id="ConfirmPassword" name="ConfirmPassword" required placeholder="Confirm Password" />
<input type="submit" value="Submit" name="Submit" />
</form>
</div>
$(document).ready(function(){
$("#btnsubmit").on('click', function(){
var password=$('#password').val();
var confirmpassword=$('#confirmpassword').val();
if(password == confirmpassword)
{
alert('Password and confirm password are Equal');
}
else
{
alert('Password and confirm password are not Equal');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="registration-details">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" /><br/>
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" /><br/>
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" /><br/>
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required /><br/>
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" /><br/>
<input type="password" id="password" name="Password" required placeholder="Enter Password" /><br/>
<input type="password" id="confirmpassword" name="ConfirmPassword" required placeholder="Confirm Password" /><br/>
<input type="submit" value="Submit" id="btnsubmit" name="Submit" />
</div>

Categories

Resources