I am working on a booking page form. I want a single form where clients fill out their info, and two submit buttons at the bottom: one that holds their reservation for 72 hours, and another that allows them to book now and continue on to a checkout page. The first button should send the data to me via email, then redirect the user to a static html page. The second button should also send the data to me via email, then redirect the user to a checkout page.
First, is having two submit buttons in this manner even possible? I've seen posts about having Agree/Disagree buttons, where the disagree button more or less cancels out the form, and the agree button passes on the data. I need both buttons to pass on data, but with different post actions.
Second, I have a free captcha inserted into my form; I'm sick of getting bot form returns in my email inbox. I have the captcha working lovely with 1 submit button. But I'm at a complete loss for how to impliment the captcha with two submit buttons.
Here's my code, with the captcha and one working submit button (the other button is not yet "hooked up" and working):
<h2>Traveler Information</h2>
<form action="http://www.SnapHost.com/captcha/send.aspx" method="post" id="mpNOV">
<input type="hidden" id="skip_WhereToSend" name="skip_WhereToSend" value="my#email.com" />
<input type="hidden" id="skip_Subject" name="skip_Subject" value="Reservation" />
<input type="hidden" id="skip_WhereToReturn" name="skip_WhereToReturn" value="confirm.shtml" />
<input type="hidden" id="skip_SnapHostID" name="skip_SnapHostID" value="xxx" />
<!-- form start -->
<table width="558" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="214" align="right"># of Travelers</td>
<td width="344">
<select name="travelers" id="travelers">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td align="right">Room type</td>
<td valign="top">
<select name="room" id="room">
<option value="" selected="selected">Select...</option>
<option value="single">Single (1 bed)</option>
<option value="double">Double (2 beds)</option>
<option value="doublePlus">Superior Double (2 beds)</option>
</select>
</td>
</tr>
</table>
<!-- form end -->
<!-- captcha start -->
<table border="0" align="center" cellpadding="2" cellspacing="0" style="background-color:#b9558b;">
<tr valign="bottom">
<td style="padding: 0 4px 8px 8px;">
reload image<br />
<img id="CaptchaImage" alt="Captcha Code" style="border-width:0px;" title="This Captcha image is intended to prevent spam. The Captcha code is generated by an online form processor. To submit this form, enter the code into the text field. For more information click on the Captcha image." src="http://www.SnapHost.com/captcha/CaptchaImage.aspx?id=PR64FH7HK8F7" />
</td>
<td style="padding: 0 8px 8px 4px;">
<span style="color: #fff;"><i>Enter security code:</i></span><br />
<input id="skip_CaptchaCode" name="skip_CaptchaCode" type="text" style="width:130px; height:64px; font-size:38px;" maxlength="6" />
</td>
</tr>
<tr>
<td colspan="2" align="center" style="background-color: #fff;">
This web form is protected from SPAM by <span style="text-decoration:underline;">SnapHost.com</span></td>
</tr>
</table>
<script type="text/javascript">
function ReloadCaptchaImage(captchaImageId)
{
var obj = document.getElementById(captchaImageId);
var src = obj.src;
var date = new Date();
var pos = src.indexOf('&rad=');
if (pos >= 0)
{
src = src.substr(0, pos);
}
obj.src = src + '&rad=' + date.getTime();
return false; }
</script>
<!-- end captcha -->
<!-- start submit buttons -->
<table width="558" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="55%" align="right" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
<input type="submit" name="bookMP-nov" value="Hold my reservation" class="submit" />
</td>
<td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
<input type="submit" name="bookMP-nov" value="Book Now!" class="submit" />
</td>
</tr>
</table>
<!-- end submit buttons -->
The captcha can be used multiple times on the same page, according to their website. I really like the images used on SnapHost.com, many of my clients will be older, and these are the easiest images to read that I've come across, so I'm hoping I can keep using SnapHost and still accomplish my double submit button needs.
If anyone has any ideas on (A) if this is do-able and (B) where to begin to code the double submit button/captcha that will work together, I'd really appreciate the help!! I'm not sure if I need php (which I know nothing of) or javascript or jQuery (of which I know a little) or something else completely. Thank you!!
UPDATE
I tried this code, and while it redirects to the correct page, the captcha doesn't validate, AND my form results don't get sent back to me. Got my hopes up for a moment, only to come crashing back down to earth!
<input type="submit" onclick="var e = document.getElementById('mpNOV'); e.action='mp-NOVconfirm.shtml'; e.submit();" value="Hold my reservation" class="submit"></td>
<td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
<input type="submit" onclick="var e = document.getElementById('mpNOV'); e.action='../../index.shtml'; e.submit();" value="Book Now!" class="submit">
I also deleted this
input type="hidden" id="skip_WhereToReturn" name="skip_WhereToReturn" value="http://www.happywivestravel.com/tours/machupicchu/mp-NOVconfirm.shtml"
code from the top of the form, thinking it'd be replaced with the onClick function in the input tag, but clearly that's not the answer here.
I was hoping for a nice simple fix, but this wasn't it. Anyone with any other ideas?
Update:
Checking your code, question and answer again I came up with this:
Javascript :
<head>
<script type='text/javascript' >
function validateReservation()
{
//You can validate your captcha here
document.forms['mpNOV'].submit(); //this submits the form
}
function validateBooking()
{
//You can validate your captcha here
document.forms['mpNOV'].submit(); //this submits the form
}
</script>
</head>
This part of the code goes on the page where your form lies, I'm not used to working with captcha's so I hope you can figure out the validation yourself.
Original code :
<form action="http://www.SnapHost.com/captcha/send.aspx" method="post" id="mpNOV">
Changed :
<form action="http://www.SnapHost.com/captcha/send.aspx" method="post" name="mpNOV" id="mpNOV">
I've added a name to your <form> element in order to interact with it using document.forms .
Further I've noticed that your action in your <form> goes to SnapHost.com. Which means your site will get redirected to SnapHost.com and that you should get the information using $_POST there. Since this is probably not your website, you should figure out another way to use the SnapHost images on your site without redirecting to SnapHost.com
If this IS your website, then you could use this PHP code to get the Data filled in the form :
<head>
<?php
if($_SERVER['REQUEST_METHOD'] === 'POST') //This if statement checks wether there's been a $_POST request...
{
if(isset($_POST['Reservation']) //Is the Reservation button clicked?
{
//You can get your data here using $_POST
}
if(isset($_POST['Booking']) //Is the Booking button clicked?
{
//You can get your data here using $_POST
}
}
?>
</head>
The isset statement checks wether a variable, or in this case a button has been "set". So if you would click your "Reservation" button the if statement sees that the "Reservation" button has been set.
The PHP part of the code goes into the <head> of the page where your <form action> redirects to.
HTML :
<td>
<input type="button" onClick="validateReservation();" value="Hold my reservation" class="submit" name="Reservation" />
</td>
<td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
<input type="button" onclick="validateBooking();" value="Book Now!" class="submit" name="Book />
</td>
Note that I've added a name to the above submit buttons, also note that you should always close <input> elements with the /> tag. This is W3C Standard I believe.
Also, so far I've read a submit button can't have a Click function, but I'm not quite sure about this.
If you need any help on getting data using PHP & the $_POST method look here : Here .
Note that stackoverflow.com is not for writing you complete code's, searching the web and using google goes first, if you can't figure it out after that, ask here.
I hope this helps you.
If you have any questions, feel free to ask!
Related
I have placed my input type reset button inside form but its still not working.
<form method='post' action='process/update_news_action.php' >
<tr>
<td colspan='2' class="col-md-4">Update News Content</td>
</tr>
<tr >
<td colspan='2' class="col-md-8"><textarea name="news" id="text"><?php echo $rows["news"] ; ?></textarea></td>
</tr>
<tr>
<td class="col-md-4"><input name='submit' type="submit" value='Publish' class="btn btn-success" /></td>
<td class="col-md-4"><input name='reset' type="reset" value='Reset' class="btn btn-primary" /></td>
</tr>
</form>
I have also tried <button type="reset" value="Reset">Reset</button>
If you're expecting the reset button to empty out the form, that's not the way reset works. It will reset the form fields to what they were when the page was loaded. In this case, you have pre-filled content in your form, so clicking reset will simply undo any user changes since the page-load.
To reset all form fields to blank/nothing, you will need javascript. First get the form DOM object, then iterate over all the input types you want to reset, and set each field.value = '' (input text types / textarea), or modify attributes (for select, radio, checkbox etc.) to deselect and so on. Turn that into a function (there's probably a ready piece somewhere out there, I seem to have lost mine), and attach it to your reset button's click event -- or your form's reset event.
Edit: On a quick search, here's a basic example of how to clear a form to empty values.
Edit: If you're not concerned over anything but text fields, here's a simple way to do this. We add a "reset" event listener to the form, and when it fires, all fields are set to empty string.
function setFormCleanReset(formId) {
let formEl = document.querySelector(formId);
// Add event listener for reset event
formEl.addEventListener('reset', function(e) {
// Iterate all non-hidden fields, set values to ''
for(const fieldEl of formEl.querySelectorAll('input:not([type=hidden])')) {
// #todo check input type and handle "select" etc.
fieldEl.setAttribute('value', '');
}
});
}
// usage: setFormCleanReset('my_form_id');
I think you forgot to insert form tag in your html. It should be work if you insert button code into <form>..button code here..</form>.Something like this:
<form>
<input type="text">
<td class="col-md-4">
<input name='reset' type="reset" value='Reset' class="btn btn-primary" />
</td>
</form>
You should place the <input type="reset"> in a form like this,it will definitely work
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<style>
</style>
</head>
<body>
<form>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type=reset></input>
</form>
</body>
</html>
You just need to put your reset button inside form. In following code I have taken one input box also an an example. I hope it helps.
<form>
<input type="text" />
<table>
<td class="col-md-4">
<input name='reset' type="reset" value='Reset' class="btn btn-primary" />
</td>
</table>
</form>
can you please try without echo anything inside textarea
try this
<form method='post' action='process/update_news_action.php' >
<tr>
<td colspan='2' class="col-md-4">Update News Content</td>
</tr>
<tr >
<td colspan='2' class="col-md-8"><textarea name="news" id="text"></textarea></td>
</tr>
<tr>
<td class="col-md-4"><input name='submit' type="submit" value='Publish' class="btn btn-success" /> </td>
<td class="col-md-4"><input name='reset' type="reset" value='Reset' class="btn btn-primary" /> </td>
</tr>
</form>
I think reset button is working fine.
Excuse Me! You are using default value in input attribute. Remove default value from it. Then type anything then click rest it will make your text box empty.
I have a form submitting variables to another PHP file. In the second file, there is a button that leads back to the first file for eventual correction od submitted values. The values are retained in the form by $_POST. The "Reset" button works only when the form is used the first time (empty). After submitting and return from the second PHP file, the "Reset" doesn't do anything, no values are cleared. The button seems to be fully inactive.
<button title="<?php echo $lang['reset-button-hint']; ?>" alt="TOOLTIP 1" type="reset" name="reset"><?php echo $lang['reset-button']; ?></button>
#Jaspreet Kaur You need to add form tag outside the table. Please check my previous comment for it.
I am building a simple application that will allow the users to add rows to a table and generate that table so the user can type in data into the rows and columns.
So far I have managed to create the rows dynamically jsfiddle
Now what I need to do is when the user hits generate (I am using PHP for this), the table must be shown in a html text area.
I did try the below code but didn't work
<form action="1.php" method="post">
<?php
echo $table = '<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
<tr><td colspan=3>sdsdsdsds</td></tr>
<tr><td colspan=1>fsdfsf</td><td colspan=2>sdffsdfsf</td></tr>
</table>';?>
<textarea name="thetable" style="display:none"><?php echo $table ?></textarea>
<input type="button" name="add" value="Add 1 Column" id="addrows1" style="color:#3300FF; font-size:16px; " />
<input type="submit" name="gen" value="Generate Table" style="color:#3300FF; font-size:16px; " />
</form>
<?php
if(isset($_POST['gen']))
{
var_dump($_POST['thetable']);
}
?>
Any help on how i can fix this?
From yous jsfiddel, I've add <input> in your code.
$('#maintable tr:last').after('<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr>');
Why didn't try to add <input>? Hope this help you
You can enable the contenteditable when generating your rows to make them editable instantly. You won't be needing to hit the generate button anymore but if you really want it to clicked first, then please feel free to edit this in any way you want. Here's an example:
HTML - It's still the same. I did nothing in here.
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
<tr>
<th align="center"> Roll No </th>
<th align="center"> First Name </th>
<th align="center"> Last Name </th>
</tr>
<tbody>
<tr><td>1</td><td>John</td><td>Sample</td></tr>
</tbody>
</table>
<input type="button" name="add" value="+Add" id="addrows" style="color:#3300FF; font-size:16px; " />
<input type="button" name="add" value="Generate table to edit" id="" style="color:#3300FF; font-size:16px; " />
SCRIPT - Put the additional code in every <td>. Put id too so you can get their values and save them into your database.
var counter = 1;
$("#addrows").click(function(){
$('#maintable tr:last').after('<tr><td id="col1'+counter+'" contenteditable="true">...</td><td id="col2'+counter+'" contenteditable="true">...</td><tdid="col3'+counter+'" contenteditable="true">...</td></tr>');
});
NOTE - If you want the generate table button to be clicked, you need to use jQuery ajax and a database (if you want to save the values you're going to create). I gave you some links that could help you. Hope I gave you a good start about your concern.
About contenteditable
About jQuery.ajax()
About serialize()
Tutorial on how to use contenteditable with PHP, MySQL, and jQuery
Ajax
The form that I'm trying to work has two buttons:
1: for viewing the submitted information and
2: for saving the confirmed information.
Part of my form:
$sql="INSERT INTO applicant_information
(entrepreneur_name,enterprise_name,.....) values
('".$_POST['entrepreneur_name']."','".$_POST['enterprise_name']."','".$_POST['address']."'...)
<form method="post" action="business_form.php">
<table width="70%" cellspacing="2px" cellpadding="5px"style="border:1px solid black;border-collapse:collapse;">
<th colspan="8"align="left" style="border:1px solid black;"><b>Personal
Information</th>
<tr>
<td width="18" rowspan="2" style="border:1px solid black;">1</td>
<td width="142" rowspan="2"style="border:1px solid black;" >Name</td>
<td style="border:1px solid black;" colspan="2">Entrepreneur</td>
<td colspan="2"style="border:1px solid black;"><?php echo $_POST['entrepreneur_name']?>
<input id="entrepreneur_name" name="entrepreneur_name" type="hidden" value="<?php echo $_POST['entrepreneur_name']?>" />
</td>
</tr>.....
//rest of the form
<input type="submit" name="edit" style="width:10%"value="Back to edit" />
<input type="submit" name="reg"style="width:10%"value="Submit" />
What I'm trying to do is to run the query when the user hit the submit button. Any idea how to do that?
What I usually do is just have one button change the form's destination on click, then submit it. So for example:
<form action="login.php" method="POST" id="myform">
<input name="username">
<input type="password" name="password">
<input type="submit" value="Login">
<button id="js-register">Register</button>
</form>
With
$('#js-register').click(function() {
$('#myform').attr('action', 'register.php').submit();
});
Or you could have both buttons be Javascript'd and bind both of them for consistency's sake - up to you.
HTML
<form action="handle_user.php" method="POST />
<input type="submit" value="View" name="view" />
<input type="submit" value="Submit" name="submit">
</form>
Check condition in php as following way...
if($_POST["view"]) {
//User hit the view button, handle accordingly
}
if($_POST["submit"]) {
//User hit the Submit information , handle accordingly
}
You need to track the button named "reg". So right after the $sql string, you can put the following:
<?php
if (isset($_POST['reg'])) {
mysql_query($sql);
if (mysql_affected_rows() > 0) {
echo "REgistration completed";
}
else {
echo "System could not process the registration";
}
}
?>
Hope that will help you.
You could make the "edit" be a plain button, instead of a submit type. And bind a click event to it, which could either redirect to the editable form or make the form editable (which ever suits you best). Then the "reg" submit could work as it does currently to save the data.
<FORM METHOD=POST NAME="WMLogon" ACTION=<?php echo "$_SERVER[PHP_SELF]?s=$s&t=$t"; ?>
<INPUT TYPE="hidden" NAME="current_page" value=0>
<table class="bar-status" width="70%" border="0" cellspacing="1" cellpadding="2" align="center">
<tbody>
<tr>
<td class="bar-search" align="center" bgcolor="#cddeff">
<input tabindex="102" type="Submit" name="Login" align="top" border="0" value="Login"/> </td></tr>
</tbody></table>
</FORM>
i want to click on login button how can i do that please help me.......
i am not able to do this by using following code
Then /^I enter login details and press login button/ do
fill_in "AUTH_USER", :with => "wmmpw#localhost"
fill_in "AUTH_PW", :with => "wmmpw"
click_button("Login")
end
If you say it has to be an automated click then you have to go for javascript.
Just include this code after form.
<script type='text/javascript'>
document.WMLogon.submit();
</script>
** One more thing, you didn't close form in line 1
<FORM METHOD=POST NAME="WMLogon" ACTION=<?php echo "$_SERVER[PHP_SELF]?s=$s&t=$t"; ?> >
I don't have a PHP/Cucumber env set up right now to check this, but I think you may need to add an id attribute to your submit button and use that in your step definition.
At the moment, Webrat can't find the button you are trying to click.
We've inherited a php/CodeIgniter app. Without going into all the reasons why, I need to feed values into a textarea field so I can group a bunch of data together and send it to a field in another app/outside vendor. This is the first time we have encountered this issue, but I don't think it is the last, so I want to prepare for it.
The specifics:
Web form with a bunch of fields on it. It's a self generating php/CodeIgniter app that the client controls, so fields are different from client to client.
Certain clients may need to send data from 3, 5, 7, etc., of the field within their form to an external vendor who receives all the data in one field on their end. So in short, using jQuery, I want to send data from certain fields to a textarea field.
For example, I want to send Center Title, Full Name, and Fruits to the textarea field with a line break at the end of each. Of course, if the user empties a field, that line item would be removed from the textarea field.
Click here to view my jsFiddle demo.
HTML Example:
<form method="post">
<br />
<br />
<fieldset name="Group1" style="border: thin; border-color: green">
<legend>General Information</legend>
<table style="width: 100%">
<tr>
<td style="width: 249px">Center Title:</td>
<td>
<select name="centers" id="centers">
<option value="Corp 1">Corp 1</option>
<option value="Shamrock Gold">Shamrock Gold</option>
<option value="Hensin Way">Hensin Way</option>
</select>
</td>
</tr>
<tr>
<td style="width: 249px">Full Name:</td>
<td>
<input name="fullname" id="fullname" type="text" size="20" />
</td>
</tr>
<tr>
<td style="width: 249px">Job Title:</td>
<td>
<input name="jobtitle" id="jobtitle" type="text" />
</td>
</tr>
<tr>
<td style="width: 249px">Known Alergies:</td>
<td>
<input name="knownAllergies" id="knownAllergies" type="checkbox" value="Yes" />Yes
<input name="knownAllergies" id="knownAllergies" type="checkbox" value="No" />No
</td>
</tr>
<tr>
<td style="width: 249px; height: 102px;">How Many?:</td>
<td style="height: 102px">
<select multiple="multiple" name="Select2">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</td>
</tr>
<tr>
<td style="width: 249px">Fruits:</td>
<td>
<input name="Fruit[]" id="Fruit[]" type="radio" checked="checked" value="Apple" />Apple<br />
<input name="Fruit[]" id="Fruit[]" type="radio" value="Orange" />Orange<br />
<input name="Fruit[]" id="Fruit[]" type="radio" value="Fruit" />Fruit
</td>
</tr>
</table>
<label>Complete Info:</label>
<textarea name="allVendorInfo" id="allVendorInfo" cols="50" rows="7"></textarea><br />
<br />
</fieldset>
</form>
You can access selections/user-input using following code
$(document).ready(function(){
$("input").change(function(e){
if($(this).is(':checked')){
}else{
};
var old = $('#allVendorInfo').val();
$('#allVendorInfo').val(old+ "%" + $(this).attr('name') + '|'+$(this).val() + "%");
});
$("select").change(function(e){
var old = $('#allVendorInfo').val();
$('#allVendorInfo').val(old+ "%" + $(this).attr('name') + '|'+$(this).val() + "%");
});
});
EDIT: Original fiddle was broken for some reason, have updated the link
I was thinking something along the lines of this: http://jsfiddle.net/JRwzz/3/
The 'trigger' for this could be something other than the Run JS button of course, that's just there for example, i'd imagine it'd be on submit or other user action.
It clears the textarea first, then loops all of the input's and selects, depending on the type of element - checkbox, radio, select etc.. it uses slightly different methods to get the values (e.g. if it's a checkbox it only wants to get the value from a checked one)
It'll need a bit of polish in order to have a checkbox group's values all on one line and things like that, but hopefully this is enough for you to get the idea.
Then on each thing it finds it appends it to the textarea and puts a linebreak on the end.
It wouldn't be too hard to add a condition to check for another atribute (e.g. data-export="yes") to check for before including it in the textarea.
Just to note, I thought of it this way because you said all of the forms are dynamic, so I tried not to need to rely on ID's or names for things, it'll just apply to any form. If you can get the code that generates your forms to output an attribute in the html on the ones you want included in your textarea (and perhaps some method of your client selecting which ones that'll apply to in their administration area) then that'd be spot on, would save having to fiddle JS for every client.
Try something like this:
$("select, input").bind("change keyup", function() {
var form = $("<form>");
var data = new Object();
form.append($(":checked").clone());
$.each($("select"), function(i, item) {
if ($(item).val() != null) {
form.append(($(item).clone()));
}
});
$.each($("input[type='text']"), function(i, item) {
if ($(item).val().length > 0) form.append(($(item).clone()));
});
$("#allVendorInfo").val(form.serialize());
}).first().trigger("change");