I´m building a mobile app in Jquery Mobile using phonegap to compile it to a native app.
Inside that app is a contact form and I can´t get it to work. I found this solution in stack overflow but even after doing exactly what the solution said, it throws back "Please fill all fields" alert.
Following are the codes i'm using.
HTML
<form action="#" method="get">
<div class="form-element">
<label for="FirstName">Firstname</label>
<input id="FirstName" name="FirstName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="LastName">Lastname</label>
<input id="LastName" name="LastName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="Email">Email</label>
<input id="Email" name="Email" type="email" placeholder="optional" />
</div>
<div class="form-element">
<label for="MessageText">Message</label>
<textarea id="MessageText" name="MessageText" placeholder="required" rows="5" required ></textarea>
</div>
<input type="button" value="submit"/>
</form>
javascript
// When the document has loaded...
$(document).ready(function(){
$('input[type="button"][value="submit"]').click(function() {
$.post('http://cafedeweb.com/www/handler.php', {
FirstName: $('#FirstName').val(),
LastName: $('#LastName').val(),
Email: $('#Email').val(),
MessageText: $('#MessageText').val()
// HTML function
}, function (html) {
// Place the HTML in a astring
var response=html;
// PHP was done and email sent
if (response=="success") {
alert("Message sent!");
} else {
// Error postback
alert("Please fill all fields!");
return false;
}
});
});
});
Your post url returns a 404 (http://cafedeweb.com/www/handler.php).
Make sure that you post your form to a webserver with a working php handler.
Related
I'm new to javascript and need some help lol. I have done a form that is supposed to disappear onClick and be replaced with a text. It works... but only after the second time I click submit. How do I make it work the first time?
<div class="subscribe" id="subscribe">
<h1>SUBSCRIBE</h2>
<p>Be in the know and sign up for our email list.</p>
<form class="form" id="form">
<input type="text" id="fname" name="fname" placeholder="First Name" required>
<input type="text" id="lname" name="lname" placeholder="Last Name" required>
<input type="email" id="email" placeholder="Email" required>
<input type="submit" id="submit" onClick="replaceForm()">
</form>
</div>
<div id="replacement">
<p>Thank you for signing up!</p>
</div>
//in js file
function replaceForm() {
var form = document.getElementById("form");
form.style.display = 'none';
document.getElementById("replacement").style.display = "block";
}
Pass the implicit event object into replaceForm and then call e.preventDefault().
Also, consider using form.hidden = true; instead of form.style.display = 'none';.
Like so:
<input type="submit" id="submit" onclick="replaceForm(event)">
function replaceForm(e) {
e.preventDefault();
const form = document.getElementById("form");
form.hidden = true;
document.getElementById("replacement").style.display = "block";
}
Submit is use to submit your form data to particular URL, which get the data from form and process it further.
i.e example : login page - after adding user name password your are sending it to backend to process the user login credential.
In this code snippet you are not submitting data to any location so better you use button as input type.
Once you click on submit it send data to action location but in you have not mention action location so it will simple refresh the page with same URL.
<input type="button" id="submit" onClick="replaceForm()"/ >
HTML :
<div class="subscribe" id="subscribe">
<h1>SUBSCRIBE</h2>
<p>Be in the know and sign up for our email list.</p>
<form class="form" id="form">
<input type="text" id="fname" name="fname" placeholder="First Name" required>
<input type="text" id="lname" name="lname" placeholder="Last Name" required>
<input type="email" id="email" placeholder="Email" required>
<input type="button" id="submit" onClick="replaceForm()">
</form>
</div>
<div id="replacement">
<p>Thank you for signing up!</p>
</div>
function replaceForm() {
var form = document.getElementById("form");
form.style.display = 'none';
document.getElementById("replacement").style.display = "block";
}
So I am trying to add validation to a form. Initially, for the button, I had the type as submit, but when I would click on the button the error message for an empty name input would display briefly. I did some research and saw that in order to get the error message to display longer, I needed to change the type to button, which I did. Now, no error messages are showing. I checked the console and there are no errors displaying. Can someone tell me why this is happening and how to fix it?
function printError(elemId, message) {
document.getElementById(elemId).innerHTML = message;
}
function validateForm() {
var name = document.regForm.FullName.value;
var nameError = true;
if (name == "") {
printError("nameError", "Please enter your name")
}
};
.error {
color: red;
font-size: 90%;
}
<div class="container">
<form name="regForm" class="form" onsubmit="return validateForm()">
<fieldset>
<div class="row">
<label>Full Name</label></br>
<input name="FullName" type="text" placeholder="John Doe" id="FullName" />
<div class="error" id="nameError"></div>
</div>
<div class="row">
<label>Email</label></br>
<input name="email" type="email" placeholder="johndoe#email.com" id="Email" />
<div class="error" id="emailError"></div>
</div>
<div class="row">
<label>Phone Number</label></br>
<input name="phone" type="tel" placeholder="(123) 456-7890" id="PhoneNumber" />
</div>
<div class="row">
<label>Password</label></br>
<input name="Password" id="Password" type="Password" placeholder="Password" onchange='passConfirm();' />
</div>
<div class="row">
<label>Confirm Password</label></br>
<input name="ConfirmPassword" id="ConfirmPassword" type="Password" placeholder="Confirm Password" onchange='passConfirm();' />
</div>
<span id="Message"></span>
<button type="button" value="submit">Sign Me Up!</button>
</fieldset>
</form>
</div>
When the button type is submit the form gets submitted automatically and the function called validation is executed. But when you change the type to button the function will not be called. You have to add click event listener to the sign me up button to call the validate function.
jsFiddle
I created a registration page, and each field requires entry and validation. I used the onsubmit event to call my js function to validate the form if the field is empty, however it still submits even though it has not been validated properly.
function validate() {
var streetName = document.getElementById("sN").value;
if (streetName == "" || streetName == null || streetName == undefined) {
window.alert("Sorry");
return false;
}
}
<form name="myForms" action="https://httpbin.org/post " method="post" class="form" onsubmit="return validate()">
<div id="fN">
<label>First Name</label>
<input type="text" name="firstName" placeholder="Enter first name" required>
</div>
<br>
<div class="lN">
<label>Last Name</label>
<input type="text" name="lastName" placeholder="Enter last name" required="">
</div>
<br>
<div class="sN">
<label>Street name</label>
<input type="text" name="streetname" placeholder="Enter your street name">
</div>
// Somemore inputs
<input class="buttons" type="submit" name="submit" value="Sign up" onclick="validate()">
</form>
I expect a window to pop up saying "this entry is wrong and for this reason", but it submits anyway
EDIT: I apologize I should've been clearer in my post. I will use required in some of the inputs, however I will eventually need to write js code to ensure a phone number is all digits and password = passwordconfirm and a postal code is an actual postal code. In the JS file I just showed what I basically tried doing.
Several things
You have validate on the submit AND on the form submit
You should NEVER call anything in a form "submit" since it will hide the submit event/method
You need to get the correct field
Give the form an ID and use unobtrusive code like this
window.addEventListener("load", function() {
document.getElementById("myForm").addEventListener("submit", function(e) {
var errors = false;
var streetName = this.streetname.value.trim(); // no more action needed
if (!streetName) errors = true;
// more validations
if (errors) {
window.alert("Sorry");
e.preventDefault();
}
});
});
<form id="myForm" action="https://httpbin.org/post " method="post" class="form">
<div id="fN">
<label>First Name</label>
<input type="text" name="firstName" placeholder="Enter first name" >
</div>
<br>
<div class="lN">
<label>Last Name</label>
<input type="text" name="lastName" placeholder="Enter last name" >
</div>
<br>
<div class="sN">
<label>Street name</label>
<input type="text" name="streetname" placeholder="Enter your street name">
</div>
<input class="buttons" type="submit" name="SubmitButton" value="Sign up">
</form>
var streetName = document.getElementById("sN").value;
There is no element with that id in the document.
There is an element with sN as its class name, but getElementById won't find an element by its class and the value of <div class="sN"> will always be undefined. It is the input that will have a value.
I'm coding a signup website, the layout is finish with html and css but I don't know how to get the user name, email and password from the html code and combine them to create a JSON file to send to the server.
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="biker" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="biker#gmail.com" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="Register" id="registerbtn" />
</li>
<li>
<a class="signup__link" href="#">I am already a member</a>
</li>
</ul>
</div>
</form>
I heard using javascript and jquery can do this but I have not learned Javascript yet, so I do all the search but still no luck.
Did you try googling your case?
There are multiple similar treads on Stack Overflow too, e.g. https://stackoverflow.com/a/22195193/6108936
Long story short, if you add id to your form
<form action="#" id="myForm">
then you can simply serialize whole form. This requires includind jQuery though.
<script>
var formData = JSON.stringify($("#myForm").serializeArray());
$.ajax({
type: "POST",
url: "yourRoute",
data: formData,
success: function(){},
dataType: "json",
contentType : "application/json"
});
</script>
Side note. As you have signup form there, I strongly suggest adding
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="subject" autofill="off" tabindex="-1" value="">
</div>
inside your form. Then, before validation (either before posting everything as JSON of already in backend) check if subject has content. If yes, congrats, you can avoid the spamming.
Why it works? Bots do not understand whenever the field is hidden and fills all the fields. Only exception when the spam is submitted by a real person, not a bot.
And, unless you have your project under firewall, trust me, you want to do this or any other bot prevention.
I am using javascript to check whether username and password are not empty. If one of these is empty, javascript alert is displayed and PHP script should not work, that is username and password validation should not occur and login page should be displayed once again. Is there any simple code to do this?
Nobody need to build whole form. I have already build login form and PHP script for its validation, I just want to know is there any method or function in PHP to stop script on entering empty username/password and submitting
Try This
Php Code :
<p>
<label for="first">User Name:</label>
<input type="text" name="First Name" id="first" />
</p>
<p>
<label for="last">Password:</label>
<input type="text" name="Last Name" id="last" />
</p>
<input type="submit" name="Submit" id="button2" value="Submit" onClick="javascript:verify()"/>
JavaScript Code :
function verify() {
if (document.getElementById('first').value=="") {
alert("Please Enter Your Name");
return false;
}
else if (document.getElementById('last').value=="") {
alert("Please Enter Your Password");
return false;
}
else {
document.form.submit();
}
}
Working Model : http://jsfiddle.net/NWWL4/24/
It took me awhile to get this right. I have my form in my html index
page. On a closed question here, I read this couldn't be done.
This php works VERY well with my form.
It generates a Javascript alert for good and bad results and
links back to the index page in either instance.
If you look at the 2nd echo, you'll see where you can redirect to
another page. I just loaded same page to clear form.
If you want to see the ccs, just ask.
PHP:
<?php
if(isset($_POST['submit'])) {
$to = "admin#blahblah.com";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$subject_field = $_POST['subject'];
$message = $_POST['message'];
$body = "From: $name_field\n E-Mail: $email_field:\n Subject: $subject_field\n Message: $message\n";
}
if(empty($name_field) || empty($email_field) || empty($subject_field) || empty($message)) {
echo '<script type="text/javascript">alert("There is a problem, please check the fields");window.history.go(-1);</script>';
}
else {
if(mail($to, $subject_field, $body)) {
echo '<script type="text/javascript">alert("Message successfully sent");window.location = "https://www.blahblah.com/";</script>';
}}
exit;
?>
html:
<div class="clear"></div>
<div class="container">
<div class="row">
<div class="col-md-3">
<form role="form" action="php\mailer.php" method="post" id="form">
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" placeholder="Your Name" maxlength="30">
</div>
<div class="form-group">
<input name="email" type="text" class="form-control" id="email" placeholder="Your Email" maxlength="30">
</div>
<div class="form-group">
<input name="subject" type="text" class="form-control" id="subject" placeholder="Your Subject" maxlength="40">
</div>
<div><input type="submit" name="submit" class="btn btn-primary" value="Send Message"></input></div>
</div>
<div class="col-md-9">
<div class="txtarea">
<textarea name="message" rows="10" class="form-control" id="message"></textarea>
</form>
<div class="clear"></div>
<div class="col-lg-12" style="text-align:center">
<a class="btn btn-large btn-contact-link" href="#blahblah_home">Home</a>