I'm not sure what I'm trying to do is possible without php or some other scripting language so I would be grateful for some advice.
We have a webserver which can only serve static HTML so we're a bit limited. We want to post e-mail sign up data from a form on this site using JavaScript off to a dataHandler.php script on another domain which will save it to a DB. When the customer clicks submit I don't want the page to navigate away to dataHandler.php though on the other domain I want it to refresh in some way (I don't know how) and say thanks for joining our e-mail list. An example of the code I am thinking about is below.
Any advice on how it might be achieved would be gratefully appreciated or any comments saying stop wasting your time would also be helpful.
<script type="text/javascript">
<!--
function validate() {
if (document.emailForm.email.value.length==0) {
alert("You forgot to enter your email address");
return false;
}
if (document.emailForm.email.value.length>0) {
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.emailForm.email.value;
if(reg.test(address) == false) {
alert('Invalid email address');
return false;
}
}
document.emailForm.submit()
return true;
}
//-->
</script>
<form id="emailForm" name="emailForm" action="http://www.otherdomain.com/dataHandler.php" method="post">
<input size="30" id="email" name="email" maxlength="200" />
<input onclick="validate();" type="button" value="Submit" />
</form>
You should have a look at the jQuery form plugin (http://jquery.malsup.com/form/) . it does exactly what your looking for and can be implemented with one line of code.
Related
i made a script that is basicly just a form where you have to put in a password to go to the admin page. when i was doublechecking everything i noticed that can see the script including the password with inspect element. Im still learning php, javascript, html and css and i cant figure out how to put that password in a seperate .js file and link it back to my password code.
This is the code i wrote. i was hoping if someone could learn me how to store the password in a seperate file and link it back
<h3>admin<h3>
<form>
<label for="pswd">Enter your password: </label>
<input type="password" id="pswd">
<input type="button" value="Submit" onclick="checkPswd();" />
</form>
<!--Function to check password the already set password is Kra5313-->
<script type="text/javascript">
function checkPswd() {
var confirmPassword = "kra5313";
var password = document.getElementById("pswd").value;
if (password == confirmPassword) {
window.location="/admin/Stored Ips.php";
}
else{
window.location="/sub pages/you_tried.php";
}
}
</script>
Everything inside the script tags is client-side, and the user will see it. That is why there is a backend and a database. To hide things from the user.
I am new to HTML and Javascript, but I have tried to do research on how to get a form to send its information to an e-mail address when the submit button is selected. Most of my research showed that PHP is needed, but when I asked my professor, he said it can be done using only javascript and the assignment needs to be submitted that way. Below is what I am trying to get to work.
<SCRIPT LANGUAGE="JavaScript">
function mailMe(form){
Subject=document.Registry.name.value;
location = mailto:XXXXXX#yahoo.com?subject="+Subject;
return true;
}
</SCRIPT>
<FORM NAME=“Registry” onSubmit="return mailMe(this.form)" >
<h3><font size=6pt> Visitor Registration </font></h3>
</br>
Name <input type="text" name=“name”><br>
<br>
E-Mail Address <input type="text" name=“mail”><br>
<br>
<INPUT TYPE="submit"><br>
</FORM>
It can't be done using only javascript or client-side technologies.
But you can probably open a new window with a mailto link.
Please note this won't send an e-mail, but instead open your local e-mail application to send an e-mail.
This is a really bad idea. You should use AJAX and PHP, this is really the better method.
If you really want your code, you have a few errors. This is correct:
var Subject = document.getElementById("name").value;
window.location = "mailto:XXXXXX#yahoo.com?subject=" + Subject;
Then you have to add an ID to the name field:
<input type="text" name=“name” id="name"><br>
But let me say that you really should use PHP mail(), because then not the client email program is used to send the mail and all is done in background.
I just tried the example below which I found at Microsoft and it worked fine. Can even be done without Javascript by simply adding the "mailto:" to the form action attribute. Also note that the form element names correspond to mailto query string parameters, i.e., "subject" and "body".
References: Microsoft mailto Protocol and RFC2368:The mailto URL scheme
Micosoft SharePoint, Adobe LiveCycle, and other middleware are able to process the emailed forms on the back end. Or one could roll their own using Java, C#, PHP, etc. Yet, that wasn't part of the class assignment ... er ... I mean question.
<html>
<body>
<form action="mailto:user#example.com" method="get">
<input name="subject" type="hidden" value="Message Title">
Feedback:<br/>
<textarea name=body cols="40">
Please share your thoughts here
and then choose Send Feedback.
</textarea>
<input type="submit" value="Send Feedback">
</form>
</body>
</html>
So i'm working on form validation for a website.
What i have accomplished so far is when the form is submitted, validate.php checks if the email is in the correct format.
If it is, it proceeds in calling the sendMail() function included in the validate.php which proceeds in sending the email and then redirects the user back to the home page after 5 seconds. (This part works <-)
If it isn't, that's where i'm stuck.
What i'm trying to accomplish at this stage, is somehow get PHP to send a script tag, <script> emailError(); </script>, to the current page (contact.html) and execute the script which simply appends a paragraph saying that the email is incorrect. What i am getting, however is the validate.php has its own error in the else statement simply saying Error in a blank page (which is what i don't want, i put it there to see if the validation was working correctly).
I tried to add this (the script mentioned above) in the else statement in validate.php:
validate.php
<?php
include "mail.php";
$email = $_POST['email'];
if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
sendMail();
}else {
echo("<script> emailError(); </script>");
}
?>
So what i was hoping it would do, is echo it into the page executing the JavaScript function but it didn't work and i think i know why.
PHP, to my knowledge, executes on request of user interaction (press button, click something, etc...) or upon page loading (Correct me if i'm wrong, still learning).
To make sure that the echo did not work, i inspected the page in real-time while using the form and didn't see any sign of the script tag being inserted into the HTML.
At this point, i have tried many alternative solutions, i don't even know where to begin. I could really use some help and any tips for improving my form.
This is the contact page that i'm working on. Feel free to try it out and see the results for yourself but Please don't spam!
Click Here
emailError.js
This is what i wanted to echo into the page with PHP.
function emailError(){
var targetElement = document.getElementById("emailform");
var errorElement = document.createElement("P");
var errorMessage = document.createTextNode("Invalid Email");
errorElement.appendChild(errorMessage);
errorElement.setAttribute("id","error");
document.body.appendChild(errorElement);
}
contact.html
This is just a segment of contact.html showing my form.
<form action="validate.php" method="post" id="emailform">
<required>* - Required</required><br>
<name>Name:* <input type="text" name="name" id="name" required /></name><br>
<email>Email:* <input type="text" name="email" id="email" required /></email> <br>
<message>Message:*<br><textarea rows="5" name="message" id="message" maxlength="1000" required></textarea></message><br>
<submit><input type="submit" value="Send" name="send" id="send" /></submit>
</form>
I'm not asking for something to copy n' paste, simply something to push me in the right direction.
Well, first of all, You are submitting your form to validate.php, and then never redirect back to contact.html, that's why you dont see the script tag appended. And from whay i see, that string 'Error' does not appear to be in your code, so I'm guessing that you did not paste the entire code. My suggestion, is to redirect to the contact form back again if the condition fails, and change contact.html to contact.php in order to be able to do a validation. Here is some rough code:
<?php
include "mail.php";
$email = $_POST['email'];
if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
sendMail();
}else {
header('Location: contact.php?error=1');
}
?>
and then, in your contact.php file:
<form action="validate.php" method="post" id="emailform">
<required>* - Required</required><br>
<name>Name:* <input type="text" name="name" id="name" required /></name><br>
<email>Email:* <input type="text" name="email" id="email" required /></email> <br>
<message>Message:*<br><textarea rows="5" name="message" id="message" maxlength="1000" required></textarea></message><br>
<submit><input type="submit" value="Send" name="send" id="send" /></submit>
</form>
if ($_GET['error']) {
echo "<script> emailError(); </script>";
}
This is just a rough example, it can be more robust, with this solution, if somebody enters your contact form with the query param "error" he will get the javascript executed. But as I said, this is a concept and a rough solution to explain how you could solve your problem.
You can't execute java function like you are trying to.
If you use ajax, than in the success response function, set the respone to a div.
For example, if you have a success function that gets the data in an argument called data, than set an empty div with an ID like "emailResponse" in your page, and use this in the function:
var responseDiv = document.getElementById("emailResponse");
responseDiv.innerHtml = data;
Add this to your html:
<form action="validate.php" method="post" id="emailform">
<required>* - Required</required><br>
<name>Name:* <input type="text" name="name" id="name" required /></name><br>
<email>Email:* <input type="text" name="email" id="email" required /></email> <br>
<message>Message:*<br><textarea rows="5" name="message" id="message" maxlength="1000" required></textarea></message><br>
<submit><input type="submit" value="Send" name="send" id="send" /></submit>
<div id="emailResponse"></div>
</form>
And in your PHP, change to this:
if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
sendMail();
echo "Your message was sent!";
}else {
echo "You email was invalid!";
}
UPDATE:
If you are not using ajax - you need to redirect to the contact page with some parameter in GET, or set some SESSION variable.
I just started learning PHP and WAMP. Before that I created a set of webpages using HTML,CSS, and JS. The JS is for validating the form, and if everything goes well it will jump to a php page that insert data into sql database.
The simplified form.html and validation.js are:
function validation() {
var emailCheck = email.search(/^[a-zA-z0-9_]+\#[a-zA-z0-9_]+\.[a-zA-z]{2,3}$/);
if (emailCheck==-1) alert("Please enter a valid email address");
else document.getElementById("signup").action = "success.php";
}
The Form code
<form id="signup" class = "signup" method="POST">
.....
<input type="text" name="email" id="email" required/>
....
<button class = "button3" onclick = "validation()">Submit</button>
</form>
The success.php is simply to insert data to the mySQL database.
Now I run the form.html without using the localhost, the javascript works perfectly. The alert window shows up if I enter wrong stuff.
If I run localhost/form.html with WAMP, when I enter wrong stuffs, the javascript doesn't work. The alert window doesn't show up. BUT when I pass the validation, it successfully jumps to the success.php.
Therefore, I consider the Javascript is working but somehow part of it doesn't since the javascript is the only connection between the form.html and success.php.
Any idea?
variable "email" is undefined, so you can't using search function on a undefined variable. You need get the email value first.
function validation() {
var emailCheck = document.getElementById("email").value.search(/^[a-zA-z0-9_]+\#[a-zA-z0-9_]+\.[a-zA-z]{2,3}$/);
if (emailCheck==-1) alert("Please enter a valid email address");
else document.getElementById("signup").action = "success.php";
}
Let me Clear what title means:
In my code for a validation purpose of one field dependent on field "t1" I need to auto submit my form once (Just Once). But my below code is submitting it infinite times and I know the reason why its happening.
I guess Reason is everytime the form submits again JS in header runs. Please help me avoid this. Following is my code:
<html>
<head>
<script>
window.onload = function()
{
var f = document.getElementById("CheckForm");
var temp = document.getElementById("CheckForm.t1");
if(f.name == "CheckForm")
{
var temp1 = document.getElementById("t1");
temp1.value = "Task";
}
document.CheckForm.submit();
}
</script>
</head>
<body>
<form name="CheckForm" id="CheckForm" method="Post">
<input type="text" id="t1" name="t1"/>
</form>
</body>
</html>
I tried stopping it using variable like flag and static variables like arguments.callee.count = ++arguments.callee.count || 1 and placing my CheckForm.submit() line in if clause. But nothing worked. Any advice or help is appreciable.
<html>
<head>
<script>
window.onload = function()
{
var f = document.getElementById("t1");
var temp = document.getElementById("CheckForm.t1");
if(f.name == "CheckForm")
{
var temp1 = document.getElementById("CheckForm.t1");
temp1.value = "Task";
}
if(window.location.search=="")document.CheckForm.submit();
}
</script>
</head>
<body>
<form name="CheckForm">
<input type="text" id="t1"/>
</form>
</body>
</html>
Surely your form is more complex than:
<form name="CheckForm">
<input type="text" id="t1">
</form>
That will not submit anything to the server since there are no successful controls (the only control doesn't have a name).
Since the form is just submitting to the same page, you can submit a hidden value like:
<form name="CheckForm">
<input type="text" id="t1">
<input type="hidden" name="hasBeenSubmitted" value="yes">
</form>
Now when the form submits the URL of the new page will include ...?hasBeenSubmitted=yes so you can look for that value in the URL, e.g.
if (/hasBeenSubmitted=yes/.test(window.location.search)) {
// this page loaded because the form was submitted
}
If it exists, don't submit the form again.
So since you are using a post method the easiest way's to handle this is to ubmitted to a new url , however you seem set on keeping the form submitted to the same url in which case is you are using php (or really any other language) you can check if the http request has a post attribute with a value t1
<?php
if(isset($_POST['t1']){
$your_text=$_POST['t1'];
/*do some string checking to make safe and the throw into your database or mdo whatever you please with data
if you wanted to include the ip address of the user you can get a basic and most likely client ip address like so
$ip_address= $_SERVER['REMOTE_ADDR'];
if you are handing a mulitpage form look into php session or similar tech ... cookies is kind of over kill for this scenario
then include a succes page as the form has been submitted
or you could end php with this tag ?> and then have your html and start again with <?
*/
include 'form_submitted.php';
}else{
//this would be the html page that you included in your question and can be handle in same ways as form submitted
include 'my_form.php'
}
?>
Ip address may not be best included as it would stop 2 user from filling out the form if they are in the same LAN for eg. 2 people in same office or same house (if your page is acttual on the worldwide web).
I would take a look at #RobG answer as it he is basically suggesting the same type of thing with a get instead of post
ANyways hope this helps