I have a site that has two contact forms (One is avaliable in a modal and the other is on the bottom of the page). Both forms have the same structure e.g same inputs and names etc... they both also have the same action method.
My question is - how can I use the same action method on both forms where the $_POST variables are dependant on what form is submitted? For example if I fill out the second contact form, the action gets the data from the first contact form.
I thought that one way would be to give both forms different id's e.g firstForm and secondForm and then pass the id of the form as a parameter to the action method. Although this could work I am not sure if it is an efficient way or if there is an easier way?
I have completely disregarded the fact that I could actually make two separate action methods but that is just ridiculous and a lot of redundant programming when I know I can just have one action method to serve both forms, but I'm just at a loss of how to implement it properly.
This is the first one:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Flick me an email!</h3>
<p>I will get back to you ASAP!</p>
</div>
<div class="modal-body">
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="assets/php/sendemail.php">
<div class="form-group"><input class="form-control required" type="text" name="name" placeholder="Name" data-placement="top"></div>
<div class="form-group"><input class="form-control email" type="email" name="email" placeholder="example#email.com" data-placement="top" ></div>
<div class="form-group"><textarea class="form-control" name="message" placeholder="Your message here.." data-placement="top" style="height: 200px;" ></textarea></div>
<div class="form-group"><button type="submit" id="modal-submit" class="btn btn-danger btn-lg">Send Message</button><button class="btn" data-dismiss="modal" aria-hidden="true" style="float: right;">Cancel</button> </div>
</form>
</div>
</div>
</div>
</div>
And the second one:
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="assets/php/sendemail.php">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="name" class="form-control" required="required"
placeholder="Name">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="email" name="email" class="form-control" required="required"
placeholder="Email address">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<textarea name="message" id="message" required="required" class="form-control"
rows="8" placeholder="Message"></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-danger btn-lg">Send Message
</button>
</div>
</div>
</div>
</form>
In each of your forms you can add a hidden input element between your <form>...</form> tags to indicate which form is being submitted.
In your first form you could have this element:
<input type="hidden" name="type" value="form1">
Then in your second form add this element
<input type="hidden" name="type" value="form2">
When your form is submitted, the receiving PHP script can read the type value as a post variable that could you act on, e.g.,
if ($_POST['type']=='form1') {
// Do this
} else if ($_POST['type']=='form2') {
// Do this instead
}
Maybe you don't want to add a hidden input and you could add a parameter to the GET string of your form's action.
So, in your first form you can do this - add ?type=form1 to the end of your action:
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="assets/php/sendemail.php?type=form1">
And, in your second form you can do this - add ?type=form2 to the end of your action:
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="assets/php/sendemail.php?type=form2">
In the sendmail.php script you can access the value using the $_GET variable:
if ($_GET['type']=='form1') {
// Do this
} else if ($_GET['type']=='form2') {
// Do this instead
}
Place a:
<input type="hidden" name="formPosted" value="1">
inside every form that has action to specific php file, and for each form change input value, then in php use if else to see which form is submitted :) and then your code... :)
Related
This side sumit and my question is how to received customer order details in my email id when customer fill the checkout page and click on order now button using JavaScript and PHP i add my cart code below please check it i am new in developing please help.
"How to get customer details and order in mail using javascript and php?"
thanks in advance.
This is how my cart look
<section id="" class="container-fluid">
<article id="" class="row">
<div id="mask"></div>
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cart</h5>
</div>
<form name="contactform" method="post" action="payscript.php">
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-6 order-md-4 mb-6">
<table id="cartents" class="show-cart table">
</table>
<div>Total price: <span class="total-cart" id="cartContent"></span></div>
<br>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Order now</button>
</div>
</div>
<div class="col-md-6 order-md-1">
<h4 class="mb-3">Billing address</h4>
<form class = "needs-validation" novalidate method="post" action="payscript.php">
<div class="mb-3">
<label for="fullname">Full name</label>
<div class="input-group">
<input type="text" class="form-control" id="phonenumber" placeholder="Enter your full name" required>
<div class="invalid-feedback" style="width: 100%;">
Your full name is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="username">Phone no.</label>
<div class="input-group">
<input type="text" class="form-control" id="phonenumber" placeholder="Enter your phone no." required>
<div class="invalid-feedback" style="width: 100%;">
Your Phone no. is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="Enter your address" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
</div>
</div>
</form>
</article>
</section>
The form
You have a form that is being used in order to submit some data. Inside your form you have some input tags. Presumably you intend to submit the values of your inputs. In order to do so, edit your input tags and add a name attribute, like
<input type="text" class="form-control" id="fullname" name="fullname" placeholder="Enter your full name" required>
Receiving the values
You need to have a PHP code corresponding to the path that is being requested when the form is being submitted. In this case that would be payscript.php. Since you have method="post", in payscript.php you can refer to the received parameters via $_POST, like $_POST["fullname"].
The template
You will need to build a template. One way to do it is to generate via PHP a text, like
$message = "Hello {$_POST["fullname"]}";
Sending the email
For this purpose you can use the mail function, like:
mail(
"foo#bar.lorem", //To
"Hello", //Subject,
$message
);
Email support
In order to be able to support email sending, you will need to prepare your server to do so. Read more here: https://www.tutorialspoint.com/php/php_sending_emails.htm
How do I give an error message inside modal after clicking update?
In my example here I gave a required attribute on the input field.
I want to change the error message based on Form Validation Best Practices.
(This code is part of CRUD PHP file for updating data in a table I had)
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form-update" action="proses_edit.php" name="modal_popup" enctype="multipart/form-data" method="POST">
<div class="form-group" style="padding-bottom: 20px;">
<label for="Name">Name</label>
<input type="hidden" name="modal_id" id="edit-id" class="form-control" value="<?php echo $r['modal_id']; ?>"/>
<input type="text" name="modal_name" id="edit-name" class="form-control" value="<?php echo $r['modal_name']; ?>" required />
</div>
<div class="form-group" style="padding-bottom: 20px;">
<label for="Description">Age</label>
<input type="text" id="edit-description" class="form-control" value="<?php echo $r['description']; ?>" required />
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit">
Update
</button>
<button type="reset" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
Here’s how form validation works with Bootstrap, taken from the documentation:
HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
To achieve somewhat of what you're trying to do, taken from the example here you can use custom styles and create tooltips for each input and display a response based on the validation result. You will need to add the novalidate property to your <form> in order to prevent the default browser validation for this to work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">#</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
More information on Bootstrap Validation: https://getbootstrap.com/docs/4.0/components/forms/#validation
I have a simple login form, at the top of this page i check for the form being submitted to i can process the login if it's been submitted.
if (!empty($_POST)) {
echo "form submitted";
}
else {
?>
<form style="margin-bottom: 0px !important;" class="form-horizontal" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="content">
<h4 class="title">Login Access</h4>
<div class="form-group">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" placeholder="Username" id="username" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="password" placeholder="Password" id="password" class="form-control">
</div>
</div>
</div>
</div>
<div class="foot">
<button class="btn btn-primary" data-dismiss="modal" type="submit">Log in</button>
</div>
</form>
<?php } ?>
I've tested with a var_dump($_POST);, but it doesn't display any post variables when submitted. I'm using XAMPP in my production enviroment, so i'm wondering if thats the issue?
The form doesn't have method="post", so you are making a GET request and $_POST will be empty.
Even if that wasn't the case, none of your form controls have name attributes, so they cannot be successful (so won't generate any data to put in the form).
By default forms submit their values via GET. To change this you need to set the method attribute of the <form> tag to POST
<form method="post" style="margin-bottom: 0px !important;" class="form-horizontal" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
^^^^^^^^^^^^^^^
HERE
As Quentin pointed out already, you are also missing the name attribute in your form elements. So even your $_GET would be empty if you checked it.
I am new with AJAX, I have to make a modal contact form that pops up. I have everything the html the css the validation etc. Only the AJAX not, I don't know where to start, please can you help me out. I just want to preventDefault it and without pageload sending the e-mail.
This is the Javascript ( i think only the id is needed I wont post the whole code )
form id = #contact-form
The HTML
<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 style="color:#31708f" class="modal-title" id="myModalLabel">Contact</h4>
</div>
<div class="modal-body">
<div class="col-lg-6">
<form role="form" name"contact-form" id="contact-form" method="post" action="contactengine.php">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" id="name" type="text" name="name" />
</div>
<div class="form-group">
<label for="e-mail">E-mail adres</label>
<input class="form-control" id="email" type="email" name="email" />
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input class="form-control" id="subject" type="text" name="subject" />
</div>
<div class="form-group">
<label for="bericht">Message</label>
<textarea class="form-control" id="message" name="message" placeholder="" cols="30" rows="5"></textarea>
</div>
<div class="form-group">
<input class="btn btn-info" id="submit" type="submit" value="Send" />
</div>
</form>
</div>
First, this is not JavaScript: form id = #contact-form.
Basically what you want to do is first making it work without AJAX and JavaScript. You need to have the PHP stuff working on the server.
Then, you use some JavaScript to prevent the Form from being sent (this is with jQuery):
$('#contact-form').on('submit', function(e) {
e.preventDefault();
//Here you send the ajax-request to the php-script.
$.ajax('send.php', {
data: $(this).serialize(),
type: 'POST',
success: function(data) {
alert(data); //for testing
}
});
});
See for example the jQuery documentation about ajax for further information about how to send the request.
I am using a form in a bootstrap modal window to post data to another page. However when i try to print the post values on the other page all I am getting is an empty array.
Here's my modal code:
<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
X</button>
<h3 id="myModalLabel">
Enter your Credentials</h3>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" accept-charset="UTF-8" method="POST" action="login.php" data-remote="true">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="email" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="passwd" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<input type="submit" class="btn btn-primary" value="Submit"/>
Sign up
</div>
</div>
</form>
</div>
</div>
Here's the command I'm giving in login.php:
echo "Email is:";
echo $_POST["email"];
echo "Password is:";
echo $_POST["passwd"];
However all I'm getting is an empty array.
Is there some sort of special way I'm supposed to do this?
You have't define name in input just change two line from your code. add name of that input.
<input type="email" id="email" name="email" placeholder="Email" />
<input type="password" id="passwd" name="passwd" placeholder="Password" />