I've got 3 different stages to my application form and have 2 buttons using the <input type="button"> but when submitting the form, using the last button, it'll only save the third part of the application, how do I get the previous 2 parts form elements?!
<form action="" method="post">
<section class="mainSection">
<section class="firstStep">
<header class="firstStepheader">
Step 1: Your Details
</header>
<section class="firstStepDetails">
<div class="left">
<h1>First Name:</h1>
<input name="firstName" id="firstName" tabindex="1">
<h2 id="fNameError">Please enter your first name</h2>
<h1>Email Address:</h1>
<input name="emailAddress" id="emailAddress" tabindex="3">
<h2 id="emailError">Please enter your email address</h2>
</div>
<div class="right">
<h1>Surname:</h1>
<input name="surName" id="surName" text="" tabindex="2">
<h2 id="sNameError">Please enter your surname</h2>
</div>
<input class="nextButton" id="firstNextButton" value="Next >" type="button">
</section>
</section>
<br>
<section class="secondStep">
<header class="secondStepheader">
Step 2: More Details
</header>
<section class="secondStepDetails">
<div class="left">
<h1>Telephone Number</h1>
<input name="telNo" text="" id="telNo" tabindex="1">
<h2 id="telNoError">Please enter your telephone number</h2>
<h1>Gender</h1>
<select id="gender" tabindex="3">
<option id="male">Male</option>
<option id="female">Female</option>
</select>
</div>
<div class="right">
<h1>Date of Birth</h1>
<input name="dOB" text="" id="dOB" tabindex="2"><h3>Format: DD/MM/YYYY</h3>
<h2 id="dOBError">Please enter a valid date</h2>
</div>
<input class="nextButton" id="secondNextButton" value="Next >" type="button">
</section>
</section>
<br>
<section class="thirdStep">
<header class="thirdStepheader">
Step 3: Comments Section
</header>
<section class="thirdStepDetails">
<div class="left">
<h1>Comments</h1>
<textarea name="telNo" text="" cols="50"></textarea>
</div>
<button class="nextButton" id="submitButton" type="submit">Submit ></button>
</section>
</section>
</section>
</form>
If you want multiple buttons, you'll need to use AJAX to process the form in multiple parts. Otherwise, just use one button at the end. The last button will send everything via $_POST and you can capture it and process it however you want.
Found out that I disabled the inputs in my JQuery meaning the elements wouldn't be posted.
Related
The contact form has several text fields and several dropdowns with the ability to select multiple values. The question is how to send these values by e-mail? Text values of type string (one word at a time) are sent fine. But how to send arrays containing multiple values? How to collect them using the $_POST method and put them in a letter?
Form:
<section class="post-content-area pt-20">
<div class="container">
<div class="row">
<div class="col-lg-8 posts-list">
<div class="card card-signin my-5">
<div class="card-body">
<h5 class="card-title text-center" style="font-size: 26px">Test contact form</h5>
<form method="post" action="email-script.php" enctype="multipart/form-data" id="emailForm">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control" placeholder="Name" >
<div id="nameError" style="color: red;font-size: 14px;display: none">nameError</div>
</div>
<div class="form-group">
<input type="text" name="surname" id="surname" class="form-control" placeholder="Surame" >
<div id="nameError" style="color: red;font-size: 14px;display: none">nameError</div>
</div>
<div class="form-group">
<input type="text" name="phone" id="phone" class="form-control" placeholder="Phone" >
<div id="subjectError" style="color: red;font-size: 14px;display: none">subjectError</div>
</div>
<div class="form-group">
<label>First Level Category</label><br />
<select id="first_level" name="first_level[]" multiple class="form-control">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["first_level_category_id"].'">'.$row["first_level_category_name"].'</option>';
}
?>
</select>
</div>
<div class="form-group">
<label>Second Level Category</label><br />
<select id="second_level" name="second_level[]" multiple class="form-control">
</select>
</div>
<div class="form-group">
<label>Third Level Category</label><br />
<select id="third_level" name="third_level[]" multiple class="form-control">
</select>
</div>
<div class="form-group">
<input type="file" name="attachment" id="attachment" class="form-control">
<div id="attachmentError" style="color: red;font-size: 14px;display: none">attachmentError</div>
</div>
<div class="submit">
<center><input type="submit" name="submit" onclick="return validateEmailSendForm();" class="btn btn-success" value="SUBMIT"></center>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Emailing script:
https://pastebin.com/3SR67MUP
There are multiple ways on how to send them via email.
The easiest way is getting them on your form action page and sending them with the php mail() function.
To make the email look better you can create an HTML email template file.
Then get the file data with file_get_contents() and resetting strings with your collected data with the str_replace function and putting the data into your mail funtion.
Hope it helps!
I am using an html with div tag to do a booking system asking user input for city, date, and pet type then check the criteria from users to the SQL database, I know how to deal with just html but I am totally lost when dealing with html div tags.
Can anyone show me how to take the user inputs (city, date, and pet type) using php in the right place so i can pass it to the database to check
<div class="form-group">
<span class="form-label">Where do you work? </span>
<input class="form-control" type="text" placeholder="Please enter your city">
</div>
<!-- date picker -->
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="form-label">Please take care of my pet on</span>
<input class="form-control" type="date", id="pickup" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="form-label">Pet?</span>
<select class="form-control">
<option>Cat</option>
<option>Dog</option>
<option>Others</option>
</select>
<span class="select-arrow"></span>
</div>
</div>
</div>
<div class="form-btn">
<button class="submit-btn">Check availability</button>
</div>
First of all, your inputs ,buttons,select,radio buttons..etc must be inside a form tag
<form method="post/get" action="file.php">
Secondly, all your inputs need to have a name to retrieve their values. For exemple :
<input type="text" name="firstname">
And finally, it's better to giver every option in select tag a value:
<select class="form-control" name="pet">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="others">Others</option>
</select>
Changed work :
<form method="post" action"file.php">
<div class="form-group">
<span class="form-label">Where do you work? </span>
<input class="form-control" type="text" placeholder="Please enter your city" name="city">
</div>
<!-- date picker -->
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="form-label">Please take care of my pet on</span>
<input class="form-control" type="date", id="pickup" name="pickup" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="form-label">Pet?</span>
<select class="form-control" name="pet">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="others">Others</option>
</select>
<span class="select-arrow"></span>
</div>
</div>
</div>
<div class="form-btn">
<button class="submit-btn">Check availability</button>
</div>
</form>
In your file.php you need to retrieve data with $_POST :
<?php
$city=$_POST['city'];
$date=$_POST['pickup'];
$pet=$_POST['pet'];
?>
First of all, you have to wrap all this code in <form></form> tag:
<form method="post" action="path_to_your_php_handler">
<div class="form-group">
<!-- other stuff -->
<button type="submit" class="submit-btn">Check availability</button>
</div>
</form>
Also, all your inputs should have an unique attribute name, like <input class="form-control" type="date", id="pickup" name="date" required>
Than, in your php file, you can find your input values in array $_POST, like $_POST['date'] from the input with name 'date'.
I am trying to embed a Contact Form 7 form in a custom theme page in Wordpress.
My custom theme page is located in /wordpress/wp-content/themes/theme-name/.
All of the HTML markup in the Contact Form 7 form is outputting correctly, including the form tag and all of the hidden inputs generated by CF7. The only elements that are not displaying are the form fields themselves. Is there some setting or something else I need to do to get this to work?
PHP code in theme file:
<?php echo do_shortcode( '[contact-form-7 id="503" title="landing-page-1"]' ); ?>
Contact Form 7 form template:
<div class="container">
<h5 class="modal-title text-white">Get your free quote</h5>
<div class="form-group">
[text* requester-name placeholder "Your name" class:form-control class:form-control-lg class:py-3]
</div>
<div class="form-group">
[email* requester-email placeholder "Your email" class:form-control class:form-control-lg class:py-3]
</div>
<div class="form-group">
[tel requester-phone placeholder "Phone (optional but helpful)" class:form-control class:form-control-lg class:py-3]
</div>
<div class="form-group">
[text* property-address placeholder "Property address + zip code" class:form-control class:form-control-lg class:py-3]
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center">
[submit class:btn class:btn-primary class:green-btn class:py-3 "Click here"]
</div>
</div>
</div>
</div>
Here is the resulting output (note that the inputs are missing):
<div role="form" class="wpcf7" id="wpcf7-f503-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/493-2#wpcf7-f503-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="503" />
<input type="hidden" name="_wpcf7_version" value="5.1" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f503-o1" />
<input type="hidden" name="_wpcf7_container_post" value="0" />
<input type="hidden" name="g-recaptcha-response" value="" />
</div>
<div class="container">
<h5 class="modal-title text-white">Get your free lawn care quote</h5>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<input type="submit" value="Click here" class="wpcf7-form-control wpcf7-submit btn btn-primary green-btn py-3" />
</div>
</div>
</div>
</div><div class="wpcf7-response-output wpcf7-display-none"></div></form>
The answer is... the order of the class attributes matters.
I moved the class attributes to before the placeholder attribute and it worked.
I have Form Like this. I wanted to Save this form Data in my Google Drive (Google Spreadsheet) using Core Php
<div class="form">
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Submit</button>
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->
How can I do that?
You can use the below link
http://farinspace.com/2009/05/saving-form-data-to-google-spreadsheets/
and it is worked for me
I have 2 forms, containing employee information that is readOnly=true
My second form contains, input box to replace and update the data inside the first form. My update is a link tag instead of button.
1st Form
<form class="secondtdr" name="updatein">
<h4 class="ua">Referrer Personal Information</h4>
<div class="referrerid">
<p align="left">Referrer ID</p>
<input type="text" name="cont" value="<?php echo $contact_no; ?>" readOnly="true">
</div>
<div class="empnum">
<p align="left">Employee Number</p>
<input type="number" name="cont" value="<?php echo $empid; ?>" readOnly="true">
</div>
2nd Form
<form class="tabletoedit" method="post">
<br>
<div class="empnum">
<p align="left">Employee Number</p><br>
<input type="number" name="cont" value="">
</div>
<div class="fnamep">
<p align="left">Fullname</p>
<input type="text" name="cont" value="">
</div>
<div class="action_btns">
<div class="one_half">
Update
</div>
</div>
</form>
You can achieve it by writing some javascript codes,like this(codes below are not tested).
<script>
function updateData()
{
document.getElementById('form1_employee_num').value = document.getElementById('employee_num').value;
...
//if you wan to update the new data to database,you can use AJAX
}
</script>
form 1
<form class="secondtdr" name="updatein">
<h4 class="ua">Referrer Personal Information</h4>
<div class="referrerid">
<p align="left">Referrer ID</p>
<input type="text" name="cont" value="<?php echo $contact_no; ?>" readOnly="true" id="form1_referrer_id">
</div>
<div class="empnum">
<p align="left">Employee Number</p>
<input type="number" name="cont" value="<?php echo $empid; ?>" readOnly="true" id="form1_employee_num">
</div>
form2
<form class="tabletoedit" method="post">
<br>
<div class="empnum">
<p align="left">Employee Number</p><br>
<input type="number" name="cont" value="" id="employee_num">
</div>
<div class="fnamep">
<p align="left">Fullname</p>
<input type="text" name="cont" value="" id="fullname">
</div>
<div class="action_btns">
<div class="one_half">
Update
</div>
</div>
</form>