I'm currently creating a dummy site and want to create multiple forms on one page.
So when you click each service you can send a form to request a quote. I got the first form working fine, however, when I send the second form it just sends the data from the first?
For the second form, I just replaced the ID to contactform2 instead of contactform as shown below.
<div id="registerpremium" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header col-md-12">
<img class=" logo_h modallogo" src="img/logo.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body signupmessage">
<img src="img/marketing.svg" alt="" class="img-fluid modalicon">
<h3 class="col-md-12 formtext py-4">eCommerce Premium</h3>
<p class="text-center">Please fill in the form below, we will then send you an email to confirm where to send your products.</p>
<form id="contactform" method="post" name="contactform" onsubmit="return false;">
<div class="form-group pt-3">
<label class="sr-only pt-5" for="name">Name</label>
<input type="text" class="form-control form-control-danger form-control-lg" name="name" id="Name" placeholder="Name*">
</div>
<div class="form-group">
<label class="sr-only" for="mail">Email</label>
<input type="email" class="form-control form-control form-control-lg" name="email" id="mail" placeholder="Email*">
</div>
<div class="form-group">
<label class="sr-only" for="mail">Phone Number</label>
<input type="phone" class="form-control form-control form-control-lg" name="phone" id="phone" placeholder="Phone Number">
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="checkbox" id="gdpr" name="gdpr" class="form-control md-textarea"></textarea>
<label for="gdpr" name="gdprlabel">I have read and consent to my data being collected as outlined in the Disclaimer</label>
</div>
</div>
</div>
<div class="modal-footer py-4">
<button type="submit" class="button button-header bg">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
For the second form, I just replaced the ID to contactform2
$('#contactform2').validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
gdpr: {
required: true
}
},
errorPlacement: function(){
return false;
},
submitHandler: function(){
var contactform = $('#contactform2').serialize();
$.ajax({
type: "POST",
url: 'ajax.php',
data: {
contactform: contactform
},
success: function(data){
$('#contactform2').hide();
$('.signupmessage').html('<p id="successmessage">' + data + '</p>');
},
error: function(xhr,textStatus,err){
console.log("readyState: " + xhr.readyState);
console.log("responseText: "+ xhr.responseText);
console.log("status: " + xhr.status);
console.log("text status: " + textStatus);
console.log("error: " + err);
}
});
}
});
PHP for the second form if you remove the 2 after contact form that is what I am using for the first form. The reason I know the first form sends is because I have test instead of test2 in the subject, title etc.
<?php
if (isset($_POST['contactform2'])) {
parse_str($_POST['contactform2'], $contactformData);
$name = $contactform2Data['name'];
$email = $contactform2Data['email'];
$phone = $contactform2Data['phone'];
$to = 'hello#samuelrhys.com'; //change to desired recepient
$subject = "test2";
$message = "test2". "\n" .$name. "\n" .$email. "\n" .$phone. "\n" .$message;
$headers = "test2" . "\r\n"; //change domain to that of Poppyfields
$result = mail($to, $subject, $message, $headers);
if ($result) {
echo "Thanks for contacting us, we'll be in touch soon!";
} else {
echo "Uh oh. We couldn't deliver your request at this time.";
}
}
?>
My Second form html
<div id="registerstandard" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header col-md-12">
<img class=" logo_h modallogo" src="img/logo.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body signupmessage">
<img src="img/marketing.svg" alt="" class="img-fluid modalicon">
<h3 class="col-md-12 formtext py-4">eCommerce Standard</h3>
<p class="text-center">Please fill in the form below, we will then send you an email to confirm where to send your products.</p>
<form id="contactform2" method="post" name="contactform2" onsubmit="return false;">
<div class="form-group pt-3">
<label class="sr-only pt-5" for="name">Name</label>
<input type="text" class="form-control form-control-danger form-control-lg" name="name" id="Name" placeholder="Name*">
</div>
<div class="form-group">
<label class="sr-only" for="mail">Email</label>
<input type="email" class="form-control form-control form-control-lg" name="email" id="mail" placeholder="Email*">
</div>
<div class="form-group">
<label class="sr-only" for="mail">Phone Number</label>
<input type="phone" class="form-control form-control form-control-lg" name="phone" id="phone" placeholder="Phone Number">
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="checkbox" id="gdpr" name="gdpr" class="form-control md-textarea"></textarea>
<label for="gdpr" name="gdprlabel">I have read and consent to my data being collected as outlined in the Disclaimer</label>
</div>
</div>
</div>
<div class="modal-footer py-4">
<button type="submit" class="button button-header bg">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
You need to change name tag value in HTML for access post request from PHP !!
Related
I have a nav bar with options for signup or login. Once clicked on either it will display a modal window using Bootstrap. What I am trying to do is that when the user is finished with the join modal window (pressed submit button and submitted data to the controller), I want to show the signin modal window right after. Show my idea was when submitting the form data to the controller. The controller would respond back with a display-type equaling "join, signin, nothing" and reinclude the page. In the page it will check what the display-type is then will call either show_join_modal() function if the display-type is signup or call either show_signin_modal() function if the display-type is login.
My idea using JQuery was something like this, Here is code in the startpage.php
<script>
<?php
if (isset($display_type))
if ($display_type == 'signin')
echo 'show_signin_modal();';
else if ($display_type == 'join')
echo 'show_join_modal();';
else
;
?>
function show_signin_modal() {
$("#signinModal").modal("show");
}
function show_join_modal() {
$("#joinModal").modal("show");
}
function hide_all_modal() {
$("#joinModal").modal("hide");
$("#signinModal").modal("hide");
}
</script>
<div class="container">
<div class="modal fade" id="joinModal" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal" method="post" action="controller.php">
<input type='hidden' name='page' value='StartPage'></input>
<input type='hidden' name='command' value='Join'></input>
<h1>Register</h1>
<div class="form-group">
<label class="control-label col-sm-2" for="username"> Username</label>
<div class="col-sm-10">
<input type="text" name="username" placeholder="Enter username.." required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password" required> Password</label>
<div class="col-sm-10">
<input name="password" type="password" placeholder="Enter password..">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email" required> Email</label>
<div class="col-sm-10">
<input type="email" name="email" placeholder="Enter email..">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
<button type="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="modal fade" id="signinModal" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal" method="post" action="controller.php">
<input type='hidden' name='page' value='StartPage'></input>
<input type='hidden' name='command' value='SignIn'></input>
<h1>Login</h1>
<div class="form-group">
<label class="control-label col-sm-2" for="username"> Username</label>
<div class="col-sm-10">
<input type="text" name="username" placeholder="Enter username.." required>
<?php if (!empty($error_msg_username)) echo $error_msg_username; ?>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password"> Password</label>
<div class="col-sm-10">
<input name="password" type="text" placeholder="Enter password.." required>
<?php if (!empty($error_msg_username)) echo $error_msg_username; ?>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
<button type="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
However, I could not get it to work.
Any ideas. Any sample code? Thanks in advance!
Replace this code with the current on your controller.
<script>
function show_login_modal() {
$("#loginModal").modal("show");
}
function show_signup_modal() {
$("#signupModal").modal("show");
}
function hide_all_modal() {
$("#signupModal").modal("hide");
$("#loginModal").modal("hide");
}
</script>
<?php
if (isset($display_type))
if ($display_type == 'signin')
echo '<script type="text/javascript">show_signin_modal();</script>';
else if ($display_type == 'join')
echo '<script type="text/javascript">show_join_modal();</script>';
//echo 'show_join_modal();';
else
;
?>
I found out how to do it with help from "https://codepen.io/elmahdim/details/azVNbN" which he posted on "Bootstrap modal: close current, open new" under username "Mahmoud". So in order to go from the joinModal window to the signinModal window right after the user submits the form on the joinModal window. I updated the submit button in the joinModal window with:
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#signinModal" data-dismiss="modal">Submit</button>
I have created a view as:
<div class="container" style="padding-top:20px">
<div class="row">
#foreach (var item in Model)
{
<div class="col-lg-4" style="padding-top:20px;">
<div class="card" style="width:18rem">
<img src="#Url.Content(item.ImagePath)" class="card-img-top" />
<div class="card-body">
<div class="row">
<h5 class="card-title">#item.ProductName</h5>
<p style="color:crimson"> ( Rs #item.ProductPrice )</p>
</div>
#*Details*#
<button class="btn btn-primary btndetails" data-product-id="#item.Id" #*data-target="#loginModal" data-toggle="modal"*#>Details</button>
</div>
</div>
</div>
}
</div>
when I click the Details button the JavaScript function is invoked in which I am making an ajax call to Admin controller and GetProduct actionMethod which takes an Id, Gets the data with that id and returns a JSON object:
<script>
$(document).ready(function () {
$(".btndetails").on("click", function () {
$.ajax({
method: "POST",
url: "/Admin/GetProduct/" + $(this).attr("data-product-id"),
success: function (response) {
}
});
});
});
</script>
Its all working correct until here, I get the object in success function response object but now I want to display that object in a MODAL that I have created as:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="modal fade" data-backdrop="static" id="loginModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> Details</h4>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
#using (Html.BeginForm())
{
}
</div>
<div class="modal-footer">
<button class="btn btn-success">Save</button>
<button class="btn btn-primary" data-dismiss="modal">Close</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
</div>
So in short I want to display the object I received in JavaScript Response object in MODAL I created.
Wait it looks like you are trying to use ASP.Net rendering engine (which is generated during request on SERVER side) to render a result of an AJAX request which is performed by the client.
Sorry friend but that's just not going to work.
I mean if you really have to use ASP.Net to render that form, I'd suggest creating a separate view which just returns the form (Html.BeginForm()) section, then use jquery to paste that into the modal-body class as a raw html.
$('.modal-body').html(response);
It'd be a really bad solution from a MVC point of view and I'd advise against that, but it'd get the job done.
I am succesful in woring out the solution as :
I used getElementById and value functions to get the MODAL input field and then used value function to set the values in response object to MODAL input fields.
My AJAX Call is :
$(".btndetails").on("click", function () {
$.ajax({
method: "POST",
url: "/Admin/GetProduct/" + $(this).attr("data-product-id"),
success: function (response) {
var pName = document.getElementById("pName");
pName.value = response.ProductName;
var pPrice = document.getElementById("pPrice");
pPrice.value = response.ProductPrice;
var pDPrice = document.getElementById("pDPrice");
pDPrice.value = response.DiscountPrice;
var imgTitle = document.getElementById("imgTitle");
imgTitle.value = response.ImageTitle;
var stock = document.getElementById("stock");
stock.value = response.Stock;
var description = document.getElementById("description");
description.value = response.Description;
var img = document.getElementById("img");
img.value = response.ImagePath;
$("#img").attr("src", img);
}
});
});
And the modal i created below it is :
<div class="modal-body">
<form>
<div class="row">
<div class="form-group">
<label for="exampleInputEmail1">Product Name</label>
<input id="pName" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div>
<img src="" id="img" width="150px" height="150px" style="float:right" />
</div>
</div>
<div class="row">
<div class="form-group col-lg-6">
<label for="exampleInputEmail1">Product Price</label>
<input id="pPrice" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group col-lg-6">
<label for="exampleInputEmail1">Discount Price</label>
<input id="pDPrice" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</div>
<div class="row">
<div class="form-group col-lg-6">
<label for="exampleInputEmail1">Image Title</label>
<input id="imgTitle" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group col-lg-6">
<label for="exampleInputEmail1">Quantity in stock</label>
<input id="stock" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</div>
<div class="row">
<div class="form-group col-lg-6">
<label for="exampleInputEmail1">Description</label>
<input id="description" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group col-lg-6">
<div class="col-lg-6">
<label for="exampleInputEmail1">Category</label>
#Html.DropDownList("Category", new SelectList((System.Collections.IEnumerable)ViewData["Category"], "Id", "CategoryName"), new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
</div>
</form>
</div>
Anfinal outpur is like :
This is My Model When i click my model
<div class="modal fade" id="checkoutModal" tabindex="-1" role="dialog" aria-labelledby="checkoutModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="checkoutModalLabel">Shipping Address</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row">
<form action="thankYou.php" method="post" id="payment-form">
This tag tall every problem and there is background color call passed
<p class="bg-danger" id="payment-errors"></p>
This is the problem
There was Step 1 div open wher i click next then not going next div in step 2 as like pill type
<div id="step1" style="display: block;">
<div class="from-group col-md-6">
<label for="full_name">Full Name:</label>
<input class="form-control" id="full_name" name="full_name" type="text">
</div>
<div class="from-group col-md-6">
<label for="email">Email :</label>
<input class="form-control" id="email" name="email" type="email">
</div>
<div class="from-group col-md-6">
<label for="street">Street Address:</label>
<input class="form-control" id="street" name="street" type="text">
</div>
<div class="from-group col-md-6">
<label for="street2">Street Address 2:</label>
<input class="form-control" id="street2" name="street2" type="text">
</div>
<div class="from-group col-md-6">
<label for="city">City :</label>
<input class="form-control" id="city" name="city" type="text">
</div>
<div class="from-group col-md-6">
<label for="state">State :</label>
<input class="form-control" id="state" name="state" type="text">
</div>
<div class="from-group col-md-6">
<label for="zip_code">Zip Code:</label>
<input class="form-control" id="zip_code" name="zip_code" type="text">
</div>
<div class="from-group col-md-6">
<label for="country">Country:</label>
<input class="form-control" id="country" name="country" type="text">
</div>
</div>
When click next this div not open some error and this error up
<div id="step2" style="display: none;"></div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="check_address();">Next >></button>
</div>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
This is the button function work i think may help you
<script>
function check_address(){
var data = {
'full_name' : jQuery('#full_name').val(),
'email' : jQuery('#email').val(),
'street' : jQuery('#street').val(),
'street2' : jQuery('#street2').val(),
'city' : jQuery('#city').val(),
'state' : jQuery('#state').val(),
'zip_code' : jQuery('#zip_code').val(),
'country' : jQuery('#country').val()
};
jQuery.ajax({
url : '/ecommerce/admin/parsers/check_address.php',
method : 'POST',
data : data,
success : function(data){
if(data != 'passed'){
jQuery('#payment-errors').html(data);
}
if(data == 'passed'){
alert('Passed!');
}
},
error : function (){alert("Something Went Wrong");}
});
}
</script>
This is another page link and this is check file for java script file
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/ecommerce/connection/init.php';
$name = sanitize($_POST['full_name']);
$email = sanitize($_POST['email']);
$street = sanitize($_POST['street']);
$street2 = sanitize($_POST['street2']);
$city = sanitize($_POST['city']);
$state = sanitize($_POST['state']);
$zip_code = sanitize($_POST['zip_code']);
$country = sanitize($_POST['country']);
$errors = array();
$required = array (
'full_name' => 'Full Name',
'email' => 'Email',
'street' => 'Street Address',
'city' => 'City',
'state' => 'State',
'zip_code' => 'Zip Code',
'country' => 'Country',
);
//All field is Required
foreach($required as $f => $d){
if(empty($_POST[$f]) || $_POST[$f] == ''){
$errors[] = $d.' is required.';
}
}
// Valid Email Address
if(!filter_var($email,FILTER_VALIDATE_EMAIL)){
$errors[] = 'Please Enter a valid Email.';
}
if(!empty($errors)){
echo display_errors($errors);
}else{
echo 'passed';
}
I have written a code to pass values from a form using ajax but the values passed to another php page is not getting displayed there. I want to display the values passed in email.php file and send it as a mail to a email-id.
My script :
$(function() {
$('#send_message').on('click', function(e) {
var name = $('#exampleInputName1').val();
var email = $('#exampleInputEmail1').val();
var tel = $('#exampleInputTelephone1').val();
var cn = $('#exampleInputCountry1').val();
var message = $('#exampleInputMessage1').val();
e.preventDefault();
$.ajax({
type: 'post',
url: 'php/email.php',
data: {
name: name,
email: email,
tel: tel,
cn: cn,
message: message
},
success: function(data) {
alert(message);
}
});
});
});
html page:
<form name="contactForm1" id='contact_form1' method="post" action='php/email.php'>
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName1" placeholder="name">
</div>
<div class="form-group col-sm-12 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail1" placeholder="email address">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="telephone" id="exampleInputTelephone1" placeholder="phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="Country" id="exampleInputCountry1" placeholder="Country">
</div>
<div class="form-group col-sm-12 padd">
<textarea class="form-control" name="message" rows="3" id="exampleInputMessage1" placeholder="message"></textarea>
</div>
</div>
<div class="form-group col-xs-12 padd">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div>
<!-- success message -->
<div id='mail_fail' class='error' style="display:none;">Sorry, error occured this time sending your message.
</div>
<!-- error message -->
</div>
<div class="form-group col-xs-8 padd" id="recaptcha2"></div>
<div class="form-group col-sm-4 padd" id='submit'>
<input type="submit" id='send_message' name="sendus" class="btn btn-lg costom-btn" value="send">
</div>
</form>
email.php
<?php
$temp = $_POST['name'];
echo $temp;
?>
Can anyone suggest how to do this ?
I'm trying to use this plugin and I'm not getting anything back when I click submit on the form.
This is the form that is inside a modal. I'm using bootstrap.
<form id="myForm" action="#" method="post" enctype="multipart/form-data">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="closeModalTimes">
×
</button>
<h4 class="modal-title">Upload New Document</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Name *</label>
<input class="form-control" type="text" id="name" name="name" required />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Subject *</label>
<textarea name="subject" id="subject" class="form-control" required></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="inputFile">Document File *</label>
<input type="file" name="inputFile" id="inputFile" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn" id="closeModalButton">
Close
</button>
<button type='button' id="submitFile" class='btn'>
Send
</button>
</div>
</div><!-- /.modal-content -->
<input name="myId" type="hidden" id="myId" value="393839334034933">
<input name="user" type="hidden" id="user" value="339">
<input name="page" type="hidden" id="page" value="test">
</form>
This is the jquery on the bottom of the page
$("#inputFile").fileinput({
overwriteInitial: false,
maxFileSize: 4000,
showPreview: false,
showUpload: false,
uploadAsync: true,
allowedFileExtensions: ["jpg", "jpeg", "gif", "png"],
browseClass: "btn btn-info",
elErrorContainer: "#documentErrorBlock",
msgSizeTooLarge: "File exceeds size",
msgInvalidFileExtension: "Invalid extension",
uploadURL: "upload.php",
uploadExtraData: function() {
return {
id: $("#myId").val(),
userId: $("#user").val(),
page: $("#page").val(),
name: $("#name").val(),
subject: $("#subject").val()
};
}
});
$('#inputFile').on('filebatchuploadsuccess', function(event, data, previewId, index) {
alert('success: '+data.response);
});
$('#inputFile').on('filebatchuploaderror', function(event, data, previewId, index) {
alert('error: '+data.response);
});
$("#submitFile").click(function(e) {
$('#inputFile').fileinput('upload');
});
And this is the PHP file:
$output = array();
$output['message'] = 'Reached PHP';
$output['success'] = true;
echo json_encode($output);
When I click nothing happens at all... not an error message or anything...
Thanks for your help!
The reason for not submitting came from your "uploadURL" which is spelt wrongly according to the documentation.
Change this
uploadURL: "upload.php",
to
uploadUrl: "upload.php",
that solves your problem.
http://plugins.krajee.com/file-input#option-uploadurl