I've been looking for over 2 days for solution to this problem of mine. Went through all the related posts on stack, but no luck. I have a form that accepts data, then passes on to a php procedure to process it which in turn calls on a html thank you page. I am not at all familiar with Javascript or JQuery but can make it work after spending some time. I am posting the codes here along with many suggestions that I tried to no avail. Any help that ends my misery is appreciated. Thanks.
HTML
<form method='post' action='contact-form-proc.php' name='contactform' id='contactform' onsubmit="setTimeout('clear_form()',200);return true">
<p>
<label for='fullname'>Your Name:</label><br/>
<input type='text' name='fullname' />
</p>
<p>
<label for='email' >Email Address:</label><br/>
<input type='text' name='email' />
</p>
<p>
<label for='mobile' >Mobile:</label><br/>
<input type='text' name='mobile' />
</p>
<p>
<label for='checkIndate' >Check in Date:</label><br/>
<input type='text' name='checkIndate'/>
</p>
<p>
<label for='comment' >Comment:</label><br/>
<textarea name='comment' cols='25' rows='3'></textarea>
</p>
<input type="image" src="submit.gif" name="submit"/>
<!--<input type='submit' name='submit' value='' id="submit" />-->
<input type="hidden" name="submit" value="Submit"/>
</form>
PHP
<?php
if(empty($_POST['submit']))
{
echo "Form is not submitted!";
exit;
}
if(empty($_POST["fullname"]) ||
empty($_POST["email"]))
{
echo "Please fill the form";
exit;
}
$name = $_POST["fullname"];
$email = $_POST["email"];
$mobile = $_POST["mobile"];
$checkindate = $_POST["checkIndate"];
$comment = $_POST["comment"];
mail( 'xxx#xxxxxx.com' , 'New form submission' , "New form submission: Name: $name, Email:$email, Mobile: $mobile, CheckIndate:$checkIndate, Comment:$comment" );
header('Location: thank-you.html');
?>
These are what I tried:
<script type="text/javascript">
/*$('#contactform').trigger("reset");*/
function clear_form() {
/* document.contactform.reset();
document.getElementById("contactform").reset();*/
/*$(window).load(function() {
$('#contactform input[type="text"]').val('');*/
$(window).load(function() {
$('#contactform').children('input').val('');
}
});
}
</script>
Thanks a ton for taking time out and trying to help me and all others with a solution to this weird problem.
I found a solution though. I kept everything as it is and additionally,
a. Wrote a function to reset the form(s)and,
b. Added that function to onload and onunload handler of the body element.
As below:
<script>
function clearForms()
{
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
}
}
</script>
<body onload="clearForms()" onunload="clearForms()">
Hope it helps and stops many like me from wasting valuable hours and days. Regards.
try this one.
<script type="text/javascript">
$(document).ready(function(){
$('input').val('');
});
</script>
End you don`t have to call onsubmit action, document.ready would be enough.
Related
I'm fairly new to coding in HTML. After hours of searching the internet for a way to do this, I failed and so I'm here. I was setting up a CSRF Proof of concept page here, I want it to redirect to another page which will execute the payload that the CSRF had implemented.
<html>
<body>
<form action="https://website.com/action.php?" method="POST">
<input type="hidden" name="fullname" value="john" />
<input type="hidden" name="address" value="street 2, 32 ave" />
<input type="submit" value="Submit request" />
</form>
</body>
</html>
So after this form is submitted using, all it does is redirect to this page
But instead of that, I want it to redirect to another URL as well as submit that form.
For anyone else having the same problem, I figured it out myself.
<html>
<body>
<form target="_blank" action="https://website.com/action.php" method="POST">
<input type="hidden" name="fullname" value="Sam" />
<input type="hidden" name="city" value="Dubai " />
<input onclick="window.location.href = 'https://website.com/my-account';" type="submit" value="Submit request" />
</form>
</body>
</html>
All I had to do was add the target="_blank" attribute to inline on form to open the response in a new page and redirect the other page using onclick on the submit button.
You need to use the jQuery AJAX or XMLHttpRequest() for post the data to the server. After data posting you can redirect your page to another page by window.location.href.
Example:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.location.href = 'https://website.com/my-account';
}
};
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
in case you are generating the form programmatically you can add this script at the end of the form
<script type="text/javascript">document.forms["FormId"].submit();</script>
What you could do is, a validation of the values, for example:
if the value of the input of fullanme is greater than some value length and if the value of the input of address is greater than some value length then redirect to a new page, otherwise shows an error for the input.
// We access to the inputs by their id's
let fullname = document.getElementById("fullname");
let address = document.getElementById("address");
// Error messages
let errorElement = document.getElementById("name_error");
let errorElementAddress = document.getElementById("address_error");
// Form
let contactForm = document.getElementById("form");
// Event listener
contactForm.addEventListener("submit", function (e) {
let messageName = [];
let messageAddress = [];
if (fullname.value === "" || fullname.value === null) {
messageName.push("* This field is required");
}
if (address.value === "" || address.value === null) {
messageAddress.push("* This field is required");
}
// Statement to shows the errors
if (messageName.length || messageAddress.length > 0) {
e.preventDefault();
errorElement.innerText = messageName;
errorElementAddress.innerText = messageAddress;
}
// if the values length is filled and it's greater than 2 then redirect to this page
if (
(fullname.value.length > 2,
address.value.length > 2)
) {
e.preventDefault();
window.location.assign("https://www.google.com");
}
});
.error {
color: #000;
}
.input-container {
display: flex;
flex-direction: column;
margin: 1rem auto;
}
<html>
<body>
<form id="form" method="POST">
<div class="input-container">
<label>Full name:</label>
<input type="text" id="fullname" name="fullname">
<div class="error" id="name_error"></div>
</div>
<div class="input-container">
<label>Address:</label>
<input type="text" id="address" name="address">
<div class="error" id="address_error"></div>
</div>
<button type="submit" id="submit_button" value="Submit request" >Submit</button>
</form>
</body>
</html>
For me this one worked pretty well.
=> form target to blank (opens in a new tab) + input id to be recognized in Javascript + script that redirects.
<html>
<body>
<form target="_blank" action="https://website.com/action.php" method="POST">
<input type="hidden" name="fullname" value="Sam" />
<input type="hidden" name="city" value="Dubai " />
<input type="submit" value="Submit request" id="submitBtn"/>
<script>
document.getElementById("submitBtn").addEventListener("click", myFunction);
function myFunction() {
window.location.href="http://programminghead.com";
}
</script>
</form>
</body>
</html>
I found it here: https://programminghead.com/submit-button-redirect-to-another-page-in-html
I have a form in HTML with a submit button:
<button type="submit" class="subscribe-submit" onclick="return foo()">Subscribe</button>
I would like it to have the details written on the form to be sent to my personal email address.
I have searched on Stack Overflow, Google, Bing and Yahoo but I couldn't find the answer
You can't do this with pure HTML. However, with a little PHP you can get your form ready to go.
Here's an example of a form handler PHP code in a separate file called form_handler.php:
<?php
$field_name = $_POST['name'];
$field_email = $_POST['email'];
$field_message = $_POST['comment'];
$mail_to = 'yourPersonalEmail#email.com';
$subject = 'Message from a site visitor '.$field_name;
$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
alert('Thank you for the feedback.');
window.location = 'form.html';
</script>
<?php
}
else { ?>
<script language="javascript" type="text/javascript">
alert('Something went wrong. Please try again or contact at myPersonalEmail#email.com');
window.location = 'form.html';
</script>
<?php
}
?>
And here's the HTML form in a file called form.html:
<html>
<head>
</head>
<body>
<form name="form" action="form_handler.php" method="POST">
<label class="name">Name</label>
<br>
<input name="name" type="text" required="required">
<br>
<label class="email">E-Mail</label>
<br>
<input name="email" type="email" required="required">
<br>
<label class="comment">Comment</label>
<br>
<textarea name="comment"></textarea>
<br>
<input type="submit" name="submit" value="Subscribe" align="center">
</form>
</body>
</html>
I suggest you learn a little bit about PHP and form handing. You might need to change the fields but I think you'll get the idea.
I am trying to make a suggestion box so that way I can see what my viewers think would make my site better. Here is some code that I have.
<form id="form1" name="form1" method="post" action="">
<label>
<textarea name="input" id="input" cols="45" rows="5"></textarea>
</label>
</form>
<form id="form2" name="form2" method="post" action="">
<label>
<input type="submit" name="export" id="export" value="Submit" />
</label>
</form>`
But this is all I have. It seems to work client side but not server side. Can someone tell me what language and if you know the code that I would have to use that would be great.
Post to another HTML file action="myformresults.html"
Post to a server side scripting language like PHP action="myphpformresult.php" which will 'do things' and then render an HTML document or any other thing (like send as email).
You can call a Javascript function to handle the form.
I would recommend PHP.
You can access a post variable in PHP by name:
HTML <input name="postVar">
PHP $myVar = $_POST['postVar'];
all you need is writing a jquery code as follows in your html file: //note that i rewrite your html code as no need for two forms
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
function submitters(){
event.preventDefault();
$.post( "mail.php.txt", $( "#form1" ).serialize(),function( data ) {
$("#formcontainer").fadeOut("slow");
$("#formcontainer").html(data);
} );
}
</script>
</head>
<body>
<div id="formcontainer">
<form id="form1" name="form1" method="post" action="">
<label>
<textarea name="input" id="input" cols="45" rows="5"></textarea>
</label>
<input Onclick="submitters()" type="button" name="export" id="export" value="Submit" />
</form>
</div>
</body>
</html>
then in mail.php file something like
<?php
$input=$_POST['input'];
$to = 'youremail#domain.com';
$subject = 'the subject';
$message = $input;
$headers = 'From: website.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
?>
For my website I'm working on a contact form, which works. But I want the submit button to be like other buttons on my site, meaning I want it to be styled like the code below.
However, I can't get it to submit via a "href" code.
I've tried applying answers on similar questions but haven't had any luck.
Any help would be greatly appreciated!
THE STYLE FOR THE SUBMIT BUTTON I WANT TO USE:
<div class="section-buttons">
<p class="button layer" data-depth="0.10" ><a href = "I WANT THIS TO SUBMIT THE FORM"
class="y1 knop roll swing"><span class="g1">SUBMIT</span><span class="g2">SUBMIT</span>
</a></p>
</div>
THE FORM CODE:
<form action="form.php" method="post" enctype="multipart/form-data">
<label></label>
<input name="name" required placeholder="Name">
<label></label>
<input name="email" type="email" required placeholder="E-mail">
<label></label>
<textarea name="message" cols="20" rows="5" required placeholder="Message">
</textarea>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
EDIT:
Thanks a lot for the quick replies. Really appreciated.
Celt, your solution definitely brings me close to the solution.
It does indeed bring me to the form.php but it doesn't seem to submit the actual data to an email address.
Could it be that my PHP file (forms.php) does something wrong with the new code? I'm guessing the last part "if ($_POST['submit'])" doesn't quite work with this new approach? Any help?
Sorry for the noobness.
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: website.com';
$to = 'email#email.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
?>
<?php
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Thank you for your email!</p>';
} else {
echo '<p>Oops! An error occurred. Try sending your message
again.</p>';
}
}
?>
This should work for you:
i'm not a very good programmer at all but i need a little help with a webpage i'm making.
Here's what I have for a form:
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
What I want it to do is if I put in the name Fred and press submit Button, it will go to a certain page. Any other name will link to another page or popup with an error saying, "tough luck!" or something like that.
Sorry, I couldn't find anything this specific on the web anywhere. I'm sure it's simple, I'm just confused with how this works. Thank you!
using front-end only, i'd be using javascript or jquery. meaning you don't need a form element inside it.
<script>
$("#submitButton").click(function(){
window.location.replace("enter url here")
})
</script>
you can do it with JS/jQuery:
HTML
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name" id="name">
<input type="submit" id="submit-button" value="Submit">
</form>
JS
$("#submit-button").click(function(){
if ($("#name").val() == "Fred")
location.href = "goodurl";
else
location.href = "badurl";
});
There are 2 options to solve this problem.
To use JavaScript for input value's validation and depending on it to redirect user
To use server side language to check the passed value
The first option will be easier for you I guess.
You can do something like:
Name: <input type="text" name="name">
<input type="button" value="Submit" onClick="redirect();">
<script type="text/javascript">
function redirect() {
var value = document.getElementsByName('name')[0].value;
if (value == 'Fred') {
window.location.href='http://url1';
} else {
window.location.href='http://url2';
}
}
</script>
Links: 'url1' and 'url2' must be replaced with your URLs
Just add the following code in your HTML file and try it out:
<script type="text/javascript">
function handleSubmit() {
var name = document.input.name.value;
if(name == 'Fred') {
location.href = "http://www.google.com";
} else if (name == 'Jack') {
location.href = "http://www.yahoo.com";
} else {
alert("Tough Luck");
}
}
</script>
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="button" value="Submit" onclick="handleSubmit();">
</form>