I have a question and I think I know the answer.
Have some html code where im using the action="mailto: function.
My question is can I assign the Subject to the generated email from the selection in the code below? E.g. Subject: Urgent; when urgent is selected.
<head>
<title></title>
</head>
<body>
<form enctype="text/plain" method="post" id="orderform" action="mailto:randomeemail#gmail.com?subject" >
<table border="1" align="left" style="width: 100%">
<tbody>`enter code here`
<tr>
<td style="text-align: justify;"><label for="element_10" class="Deliverys">What
Type of Delivery is required?</label></td>
<td style="text-align: justify;">
<select name="Urgency Required">
<option value="Standard">Standard Delivery</option>
<option value="Fast">Fast</option>
<option value="Urgent">Urgent</option>
<option value="Required in 4 hours">Required in 4 hours</option>
<option value="Required in 2 hours">Required in 2 hours</option>
<option value="Pick-up">Pick-up</option>
</select>
</td>
</tr>
<input type="submit" value="Submit" name="Submit" />
</form>
</body>
</html>
If you don't mind using Javascript, you can do the following:
<script>
function myFunction(){
window.location.href = 'mailto:randomeemail#gmail.com?subject=' + document.querySelector('select[name="Urgency Required"]').value
return false
}
</script>
<form enctype="text/plain" method="post" id="orderform" onsubmit="return myFunction();" >
<table border="1" align="left" style="width: 100%">
<tbody>`enter code here`
<tr>
<td style="text-align: justify;"><label for="element_10" class="Deliverys">What
Type of Delivery is required?</label></td>
<td style="text-align: justify;">
<select name="Urgency Required">
<option value="Standard">Standard Delivery</option>
<option value="Fast">Fast</option>
<option value="Urgent">Urgent</option>
<option value="Required in 4 hours">Required in 4 hours</option>
<option value="Required in 2 hours">Required in 2 hours</option>
<option value="Pick-up">Pick-up</option>
</select>
</td>
</tr>
<input type="submit" value="Submit" name="Submit"></input>
</tbody>
</table>
</form>
Bascially, when the form submits, it'll dynamically generate the mailto link, and open it. It then returns false, which stops the form from actually submitting (i.e. redirecting to the action).
Related
I have this HTML code :
<table>
<tr>
<td colspan="2">
<input type="radio" name="lineChoice" id="lineChoiceA" value="A"><label for="lineChoiceA">Line A</label>
<input type="radio" name="lineChoice" id="lineChoiceB" value="B"><label for="lineChoiceB">Line B</label>
</td>
</tr>
<tr id="lineA" style="display: none;">
<td>List A : </td>
<td>
<select name="mySelect" id="mySelect">
<option value=""></option>
<option value="A0">A0</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</td>
</tr>
<tr id="lineB" style="display: none;">
<td>List B : </td>
<td>
<select name="mySelect" id="mySelect">
<option value=""></option>
<option value="B0">B0</option>
<option value="B1">B1</option>
<option value="B2">B2</option>
</select>
</td>
</tr>
</table>
And I have this JQuery code :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
// If Click on Radio
$('[id^="lineChoice"]').click(function(){
// Hide Line
$("#lineA").hide();
$("#lineB").hide();
// Display Line
if($(this).val()=="A") $("#lineA").show();
if($(this).val()=="B") $("#lineB").show();
});
// If Change on List
$('#mySelect').change(function(){
// Just Display in Console
console.log($(this).val());
});
});
</script>
Both lines are basically hidden.
And by selecting the radio button I display the corresponding line. I voluntarily simplified the name of the lines (it is more complex in my initial code).
If I select row A. Display in JQuery works fine. But I get nothing if I select line B. I know that my "select" have the same name but that's precisely the goal for me. Have only one "select" to process but only the displayed one.
Hoping to be clear in my question which is "Why no display when selecting line B while it works with line A...?
You cannot have two elements with the same id within one page. Hence I update your code using different Ids for the two selects.
In order to register the event using the name, you can use the attribute selector instead. [name="mySelect"] would do the trick.
The reason why the change event is not working on line B is because $('#mySelect').change(function(){}) only register the event on the first select which turn out is the Line A <select>
$(document).ready(() => {
$('input[type="radio"]').on('change', (e) => {
$("#lineA").hide();
$("#lineB").hide();
if (e.currentTarget.id === 'lineChoiceA') {
$("#lineA").show();
} else {
$("#lineB").show();
}
})
// If Change on List
$('[name="mySelect"]').change(function() {
// Just Display in Console
console.log($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td colspan="2">
<input type="radio" name="lineChoice" id="lineChoiceA" value="A"><label for="lineChoiceA">Line A</label>
<input type="radio" name="lineChoice" id="lineChoiceB" value="B"><label for="lineChoiceB">Line B</label>
</td>
</tr>
<tr id="lineA" style="display: none;">
<td>List A : </td>
<td>
<select name="mySelect" id="mySelect1">
<option value=""></option>
<option value="A0">A0</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</td>
</tr>
<tr id="lineB" style="display: none;">
<td>List B : </td>
<td>
<select name="mySelect" id="mySelect2">
<option value=""></option>
<option value="B0">B0</option>
<option value="B1">B1</option>
<option value="B2">B2</option>
</select>
</td>
</tr>
</table>
I am creating a vehicle lookup service for visitors to my employer's website. By entering their vehicle details either manually or by entering their reg, the site products will be filtered to match fitment for that specific vehicle.
If the customer enters their reg and clicks submit, the results are captured in a hidden table on the same page. I want the manual selector values to update according to such hidden values.
How would I get the search data to show in the appropriate selector option? (I understand that none of the results is an option but if it was then how would I do it)
Here is the manual vehicle details code:
<div class="block-content">
<div class="level">
<select class="ymm-select" name="_make">
<option value="">-- Make --</option>
<option value="BMW">BMW</option>
</select>
</div>
<div class="level">
<select class="ymm-select disabled" name="_model" disabled="disabled">
<option value="">-- Model --</option>
</select>
</div>
<div class="level">
<select class="ymm-select disabled" name="_year" disabled="disabled">
<option value="">-- Year --</option>
</select>
</div>
<div class="ymm-clear"> </div>
<div class="ymm-extra" style="display:none">
<div class="ymm-category-container">
<div class="ymm-clear"> </div>
</div>
</div>
<button type="button" title="Search" class="button ymm-submit-any-selection">Search</button>
</div>
Here is the vehicle result data:
<table class="table" hidden="">
<tbody>
<tr>
<td>Make:</td>
<td id="dvla-search-make">FORD </td>
</tr>
<tr>
<td>Model:</td>
<td id="dvla-search-model">FOCUS</td>
</tr>
<tr>
<td>Year:</td>
<td id="dvla-search-year">2009</td>
</tr>
<tr>
<td>Engine:</td>
<td id="dvla-search-engine">1753cc</td>
</tr>
<tr>
<td id="dvla-search-fuel">Fuel Type:</td>
<td>DIESEL</td>
</tr>
</tbody>
</table>
You mean something like this?
window.addEventListener("load",() => { // when the page loads
document.querySelectorAll("[id^=dvla-search]").forEach(entry => { // find all table cells with ids starting with dvla-search
const val = entry.innerText.trim();
const name = entry.id.replace("dvla-search-","_"); // find the name of the
const elem = document.querySelector("[name="+name+"]") // select associated with the cell id
if (elem) { // if found
let vals = [...elem.querySelectorAll("option")].map(opt => opt.value)
if (!vals.includes(val)) { // only add if not already there
const opt = new Option(val,val,true,true); // make an option and select it
elem.appendChild(opt); // add the option
elem.removeAttribute("disabled"); // allow selection
}
else elem.value=val; // IF already there, select it
}
})
});
Here is the manual vehicle details code:
<div class="block-content">
<div class="level">
<select class="ymm-select" name="_make">
<option value="">-- Make --</option>
<option value="FORD">FORD</option>
</select>
</div>
<div class="level">
<select class="ymm-select disabled" name="_model" disabled="disabled">
<option value="">-- Model --</option>
</select>
</div>
<div class="level">
<select class="ymm-select disabled" name="_year" disabled="disabled">
<option value="">-- Year --</option>
</select>
</div>
<div class="ymm-clear"> </div>
<div class="ymm-extra" style="display:none">
<div class="ymm-category-container">
<div class="ymm-clear"> </div>
</div>
</div>
<button type="button" title="Search" class="button ymm-submit-any-selection">Search</button>
</div>
Here is the vehicle result data:
<table class="table" hidden="">
<tbody>
<tr>
<td>Make:</td>
<td id="dvla-search-make">FORD </td>
</tr>
<tr>
<td>Model:</td>
<td id="dvla-search-model">FOCUS</td>
</tr>
<tr>
<td>Year:</td>
<td id="dvla-search-year">2009</td>
</tr>
<tr>
<td>Engine:</td>
<td id="dvla-search-engine">1753cc</td>
</tr>
<tr>
<td id="dvla-search-fuel">Fuel Type:</td>
<td>DIESEL</td>
</tr>
</tbody>
</table>
I am using Bootstrap 3 and I have a table with some inputs and selects.
The inputs are about 1px lower than the select:
and no matter what I do I cant seem to get them to line up on the same level.
This rows HTML is like so:
<tr id="other-license-row-new" data-other-license-id="-1">
<td class="text-center">
Attach File
</td>
<td>
<select class="form-control other-license-class">
<option>C - Car</option>
<option>LR - Light Rigid</option>
<option>MR - Medium Rigid</option>
<option>HR - Heavy Rigid</option>
<option>HC - Heavy Combination</option>
<option>MC - Multi Combination</option>
</select>
</td>
<td class="expiry-date-row">
<input type="text" class="form-control other-license-expiryDate date-picker" data-position="top left">
</td>
<td>
<select type="text" class="other-license-state form-control">
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="VIC">VIC</option>
<option value="ACT">ACT</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="NT">NT</option>
<option value="TAS">TAS</option>
</select>
</td>
<td>
<input type="text" class="other-license-number form-control">
</td>
<td class="action-column">
...dropdown button html removed for brevity...
</td>
</tr>
I would like to know how I can align the inputs and select so it doesnt have he 1px difference.
I have tried:
select, input{
vertical-align: middle; //as well as all options in web inspector
}
I have a list of values that I only want to be allowed to be entered into a text box within an html form for the action to take place. The action is taking the end user to a certain web page. But I want the end user to only enter certain values. They can be allowed to enter something else but they'll receive a notice/warning that they've entered an incorrect code.
Three of the predetermined list of values let's say would be something like this
GGG01, OOO03 and MTM02
As I said, and end user should be allowed to enter anything but only when they enter one of those three codes should they be taken to the specific web page. I've tried validation scripts and nothing seems to be working. I'm missing something here and I bet it's so easy.
Here's what I tried but the password field isn't working properly. Please help. Thank you in advance.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Example for Validator
</title>
<style type="text/css" xml:space="preserve">
BODY, P,TD{ font-family: Arial,Verdana,Helvetica, sans-serif; font-size: 10pt }
A{font-family: Arial,Verdana,Helvetica, sans-serif;}
B { font-family : Arial, Helvetica, sans-serif; font-size : 12px; font-weight : bold;}
.error_strings{ font-family:Verdana; font-size:10px; color:#660000;}
</style><script language="JavaScript" src="gen_validatorv4.js"
type="text/javascript" xml:space="preserve"></script>
</head>
<body>
<form action="" name="myform" id="myform">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td align="right">
First Name
</td>
<td>
<input type="text" name="FirstName" />
</td>
</tr>
<tr>
<td align="right">
Last Name
</td>
<td>
<input type="text" name="LastName" />
</td>
</tr>
<tr>
<td align="right">
EMail
</td>
<td>
<input type="text" name="Email" />
</td>
</tr>
<tr>
<td align="right">
Password
</td>
<td>
<input type="text" name="pwd1" />
</td>
</tr>
<tr>
<td align="right">
Address
</td>
<td>
<textarea cols="20" rows="5" name="Address"></textarea>
</td>
</tr>
<tr>
<td align="right">
Country
</td>
<td>
<select name="Country">
<option value="" selected="selected">
[choose yours]
</option>
<option value="008">
Albania
</option>
<option value="012">
Algeria
</option>
<option value="016">
American Samoa
</option>
<option value="020">
Andorra
</option>
<option value="024">
Angola
</option>
<option value="660">
Anguilla
</option>
<option value="010">
Antarctica
</option>
<option value="028">
Antigua And Barbuda
</option>
<option value="032">
Argentina
</option>
<option value="051">
Armenia
</option>
<option value="533">
Aruba
</option></select>
</td>
</tr>
<tr>
<td align="right"></td>
<td>
<div id="myform_errorloc" class="error_strings">
</div>
</td>
</tr>
<tr>
<td align="right"></td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form><script language="JavaScript" type="text/javascript"
xml:space="preserve">//<![CDATA[
//You should create the validator only after the definition of the HTML form
function DoCustomValidation()
{
var frm = document.forms["myform"];
if(frm.pwd1.value != frm.pwd2.value)
{
sfm_show_error_msg('The Password and verified password does not match!',frm.pwd1);
return false;
}
else
{
return true;
}
}
frmvalidator.setAddnlValidationFunction(DoCustomValidation);
//]]></script>
</body>
</html>
I'm taking it that we're looking for options without connecting to a database (that would make the answer longer). To start you off on a direction and one particular option (which might not be the most favorable or efficient option for your situation):
Firstly, form tag should have a method attribute.
<form action="confirm.php" method="POST" name="myform" id="myform">
then you can access it and make conditional statements later on. For example, if a person typed in a certain word that you wanted in the LastName section and submitted it, you can let it go confirm.php which would include the following script (which would evaluate if the user put in a certain value or not, and depending on the value, the user would be redirected to a different page):
if ($_POST['LastName']=="GGG01"){
header("nameofnewwebsite.php");
}else{
header("nameofanotherwebsite.php");
}
I have an HTML form but some of the inputs in it are not submitted, even though they are active. Live example at http://jsfiddle.net/hbw3/qzcTS/2/.
The form clearly contains a number of divs but only the inputs in one div are submitted. Why is this?
The HTML source:
<form accept-charset="UTF-8" action="whatever" id="map_form" method="post">
<table>
<tr>
<td>
<select id=1 name=col_1 class="column_select">
<option value="0">None</option>
<option value="1">id (integer)</option>
<option value="2">name (string)</option>
</select>
</td>
<td>
<select id=2 name=col_2 class="column_select">
<option value="0">None</option>
<option value="1">id (integer)</option>
<option value="2">name (string)</option>
</select>
</td>
</tr>
</table>
<div class="span4" id="default_values">
<label for='id' class='control-label'>id (integer)</label>
<input type='text' id='id' />
<label for='name' class='control-label'>name (string)</label>
<input type='text' id='name' />
</div>
<input name="commit" type="submit" value="Upload Table" />
</form>
<div id='result'></div>
The JS to display the submitted inputs:
$('form#map_form').submit(function () {
$('div#result').text($(this).serialize());
return false;
})
You're missing name attributes on the inputs in your last div. I tried adding some to your sample and that seems to have fixed it.