Multiple Select boxes with JS function, doesn't work with array - javascript

I have the following code which creates two multiple selects that use js to move values between each other. The code as it is below functions but I wish to use the POST data values for the items in the select. I wish to change to so that I can get the array of values of post in PHP but when I change it to an array[] it doesn't function moving the values between the two select boxes.
<html>
<body>
<script>
function SelectMoveRows(SS1,SS2)
{
var SelID='';
var SelText='';
// Move rows from SS1 to SS2 from bottom to top
for (i=SS1.options.length - 1; i>=0; i--)
{
if (SS1.options[i].selected == true)
{
SelID=SS1.options[i].value;
SelText=SS1.options[i].text;
var newRow = new Option(SelText,SelID);
SS2.options[SS2.length]=newRow;
SS1.options[i]=null;
}
}
SelectSort(SS2);
}
function SelectSort(SelList)
{
var ID='';
var Text='';
for (x=0; x < SelList.length - 1; x++)
{
for (y=x + 1; y < SelList.length; y++)
{
if (SelList[x].text > SelList[y].text)
{
// Swap rows
ID=SelList[x].value;
Text=SelList[x].text;
SelList[x].value=SelList[y].value;
SelList[x].text=SelList[y].text;
SelList[y].value=ID;
SelList[y].text=Text;
}
}
}
}
</script>
<form name="example" method=post action=test.php >
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<select multiple name="left" size="9">
<option value="1">Row 1</option>
<option value="2">Row 2</option>
<option value="3">Row 3</option>
<option value="4">Row 4</option>
<option value="5">Row 5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.example.left,document.example.right)"><br>
<br>
<input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.example.right,document.example.left)">
</td>
<td>
<select multiple name="right" size="9">
</select>
</td>
</tr>
</table>
<br><input type='submit' value='Submit'>
</form>
</body>
</html>

If you change it to name="left[]" then you have to change document.example.left to document.example['left[]'] to match it.
function SelectMoveRows(SS1, SS2) {
var SelID = '';
var SelText = '';
// Move rows from SS1 to SS2 from bottom to top
for (i = SS1.options.length - 1; i >= 0; i--) {
if (SS1.options[i].selected == true) {
SelID = SS1.options[i].value;
SelText = SS1.options[i].text;
var newRow = new Option(SelText, SelID);
SS2.options[SS2.length] = newRow;
SS1.options[i] = null;
}
}
SelectSort(SS2);
}
function SelectSort(SelList) {
var ID = '';
var Text = '';
for (x = 0; x < SelList.length - 1; x++) {
for (y = x + 1; y < SelList.length; y++) {
if (SelList[x].text > SelList[y].text) {
// Swap rows
ID = SelList[x].value;
Text = SelList[x].text;
SelList[x].value = SelList[y].value;
SelList[x].text = SelList[y].text;
SelList[y].value = ID;
SelList[y].text = Text;
}
}
}
}
<form name="example" method=post action=test.php>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<select multiple name="left[]" size="9">
<option value="1">Row 1</option>
<option value="2">Row 2</option>
<option value="3">Row 3</option>
<option value="4">Row 4</option>
<option value="5">Row 5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.example['left[]'],document.example['right[]'])"><br>
<br>
<input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.example['right[]'],document.example['left[]'])">
</td>
<td>
<select multiple name="right[]" size="9">
</select>
</td>
</tr>
</table>
<br><input type='submit' value='Submit'>
</form>
You could also give them IDs, and then use document.getElementById().

Related

Filter table using dropdown

I'm making a website here: https://opportunities.sarahlim3.repl.co/discover.html
How can I change the JavaScript functions so that the filter by location dropdown and the filter by category dropdown work together so that table values will show up according to these two conditions if a user clicks on two? The other problem is that internships with categories of computer science and political science also show up when you click the "science" in the dropdown. How can I make it be the exact word?
Here's the code for the page:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<link rel="stylesheet" href="style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="discover.css">
<script src="script.js">
</script>
</head>
<body>
<nav>
<div class="nav-bar">
Home
Find high school internships
Resume and CV Template
</div>
</nav>
<h2>Add a High School Internship Listing</h2>
<p>*The five fields are required to add (paid internships only)</p>
<form>
<div class="search-box">
<input class="search-txt" type="text" name="" id="searchList" onkeyup="searchFunction()" placeholder="Search by name..."> <a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<table id="input-table">
<thead>
<tr>
<th>Internship name</th>
<td><input type="text" name="fname" id="fname" required></td>
</tr>
</thead>
<tbody>
<tr>
<th>Internship location</th>
<td><select id="location">
<option value="Remote">Remote</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
</select></td>
</tr>
<tr>
<th>Internship category</th>
<td> <select id="category">
<option value="Computer Science">Computer Science</option>
<option value="Science">Science</option>
<option value="Political Science">Political Science</option>
<option value="Business/Marketing">Business/Marketing</option>
<option value="Music">Music</option>
<option value="Art">Art</option>
<option value="All STEM fields">All STEM fields</option>
</select></td>
</tr>
<tr>
<th>Internship link</th>
<td><input type="text" name="link" id="link" required></td>
</tr>
<tr>
<th>Internship deadline</th>
<td><input type="text" name="deadline" id="deadline" required></td>
</tr>
<tr id="btna">
<td colspan="2"><input type="button" name="button" id="btn" value="Add" onclick="onSubmit()"></td>
</tr>
</tbody>
</table>
</form>
<select id="mylist" onchange="locationFunction()" class='form-control'>
<option value="">Filter by location</option>
<option value="Remote">Remote</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
</select>
<select id="categorylist" onchange="myFunction()" class='form-control'>
<option value="">Filter by category</option>
<option value="Computer Science">Computer Science</option>
<option value="Science">Science</option>
<option value="Political Science">Political Science</option>
<option value="Business/Marketing">Business/Marketing</option>
<option value="Music">Music</option>
<option value="Art">Art</option>
<option value="All STEM fields">All STEM fields</option>
</select>
<table id="show" style="padding:30px; width:90%;" class="internshipInfo">
<thead>
<tr>
<th>Internship name</th>
<th>Internship location</th>
<th>Internship category</th>
<th>Internship link</th>
<th>Internship deadline</th>
</tr>
</thead>
</table>
<script>
function searchFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("searchList");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
function locationFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("mylist");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
function myFunction() {
var input, filter, table, tr, td, i, test;
input = document.getElementById("categorylist");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
var list1 = [];
var list2 = [];
var list3 = [];
var list4 = [];
var list5 = [];
var n = 1;
var x = 0;
function AddRow(data1,data2,data3,data4,data5){
var AddRown = document.getElementById('show');
var NewRow = AddRown.insertRow(n);
list1[x] = data1;
list2[x] = data2;
list3[x] = data3;
list4[x] = data4;
list5[x] = data5;
if(list1[x]== "" ||list3[x]== ""||list4[x]== ""||list2[x]== ""||list5[x]==""){
}else{
var cel1 = NewRow.insertCell(0);
var cel2 = NewRow.insertCell(1);
var cel3 = NewRow.insertCell(2);
var cel4 = NewRow.insertCell(3);
var cel5 = NewRow.insertCell(4);
cel1.innerHTML = list1[x];
cel2.innerHTML = list2[x];
cel3.innerHTML = list3[x];
cel4.innerHTML = list4[x];
cel5.innerHTML = list5[x];
n++;
x++;
}
}
async function onPageLoad() {
let data = await fetch("https://db.neelr.dev/api/6912ef27259834e665455b74d2f5ae43");
let internships = await data.json()
Object.values(internships).forEach(v => AddRow(v.name, v.location, v.category,v.link, v.deadline ))
}
onPageLoad()
</script>
</body>
</html>
I present a naive solution.
Remove onchange from both the select and Create a new button and set up an onclick listener on that.
In that listener implementation. You would code combining both
functions (locationFunction and myFunction)
This way you will be checking both filters together for both the select elements and on a single click
For instance the current condition
if (txtValue.toUpperCase().indexOf(filter) > -1)
would become
if (txtValue1.toUpperCase() === filter1 && txtValue2.toUpperCase() === filter1)
P.S You need to combine such that the matching condition would check for filter1 and filter2 together.

dropdown menu that requires selection

I am trying to figure this one out, but I need some help. a drop down menu with add to cart button that doesn't submit without selecting any options, what I would love to have is a pop up that prompts to select one from each drop down options (required). this is what i'm trying to do http://ccaples.com/index.php/basic-scripts/examples-i/dropdown-menus-that-require-selection , the question is how to implement this to my code thank you very much.
<SCRIPT TYPE="text/javascript">
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
if (val < .995) rnd = 1; // for old Netscape browsers
str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
pos = str.indexOf (".");
if (pos > 0) str = str.substring (rnd, pos + 3);
return str;
}
function ReadForm (obj1) { // process un-named selects
var i,j,amt,des,obj,pos,tok,val;
var ary = new Array ();
amt = obj1.baseamt.value*1.0; // base amount
des = obj1.basedes.value; // base description
for (i=0; i<obj1.length; i++) { // run entire form
obj = obj1.elements[i]; // a form element
if (obj.type == "select-one" && // just get selects
obj.name == "") { // must be un-named
pos = obj.selectedIndex; // which option selected
val = obj.options[pos].value; // selected value
ary = val.split (" "); // break apart
for (j=0; j<ary.length; j++) { // look at all items
// first we do single character tokens...
if (ary[j].length < 2) continue;
tok = ary[j].substring (0,1); // first character
val = ary[j].substring (1); // get data
if (tok == "#") amt = val * 1.0;
if (tok == "+") amt = amt + val*1.0;
if (tok == "%") amt = amt + (amt * val/100.0);
if (tok == "#") { // record item number
if (obj1.item_number) obj1.item_number.value = val;
ary[j] = ""; // zap this array element
}
// Now we do 3-character tokens...
if (ary[j].length < 4) continue;
tok = ary[j].substring (0,3); // first 3 chars
val = ary[j].substring (3); // get data
if (tok == "s1=") { // value for shipping
if (obj1.shipping) obj1.shipping.value = val;
ary[j] = ""; // clear it out
}
if (tok == "s2=") { // value for shipping2
if (obj1.shipping2) obj1.shipping2.value = val;
ary[j] = ""; // clear it out
}
}
val = ary.join (" "); // rebuild val with what's left
if (des.length == 0) des = val; // 1st storage?
else des = des + ", " + val; // nope, accumulate value
}
}
obj1.item_name.value = des;
obj1.amount.value = Dollar (amt);
if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}
</SCRIPT>
<FORM id=viewcart name=viewcart action=https://www.paypal.com/cgi-bin/webscr
method=post>
</FORM>
<FORM onSubmit="this.target = 'paypal';
ReadForm (this.form);"
action=https://www.paypal.com/cgi-bin/webscr method=post>
<P>
<INPUT type=hidden value=_cart name=cmd>
<INPUT type=hidden value=1 name=add>
<INPUT type=hidden value=my#email.com name=business>
<INPUT type=hidden name=item_name>
<INPUT type=hidden name=item_number>
<INPUT type=hidden name=amount>
<INPUT type=hidden value=USD name=currency_code>
<INPUT type=hidden value=USD name=lc>
<INPUT type=hidden value=00 name=shipping>
<INPUT type=hidden value=00.00 name=baseamt>
<INPUT type=hidden VALUE="itemname" name=basedes>
<INPUT TYPE="hidden" NAME="on0" VALUE="Details">
<INPUT TYPE="hidden" NAME="os0" VALUE="moredetails" MAXLENGTH="800">
<BR>
<BR>
</P>
<TABLE WIDTH="400px" BORDER="0" CELLPADDING="0" CELLSPACING="0" align="right">
<TR>
<TD ALIGN="left">
<p class="heading"> </p>
<p class="main"> dropdown1</p>
<p class="heading"> </p>
</TD>
<TD>
<SELECT STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
<OPTION selected>Please select </OPTION>
<OPTION VALUE="option1 +125.00">option1</OPTION>
<OPTION VALUE="option2 +90.00">option2</OPTION>
<OPTION VALUE="option3 +40.00">option3</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD ALIGN="left">
<p class="heading"> </p>
<p class="main"> dropdown2</p>
<p class="heading"> </p>
</TD>
<TD>
<SELECT STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
<OPTION selected>Please select </OPTION>
<OPTION VALUE="option1 +55.00">option1</OPTION>
<OPTION VALUE="option2 +99.00">option2</OPTION>
<OPTION VALUE="option3 +44.00">option3</OPTION>
</SELECT>
</TD>
</TR>
<tr>
<TR>
<TD ALIGN="left">
<p class="main"> </p>
<p class="main"> Price</p>
<p class="main"> </p>
</TD>
<TD ALIGN="left">
<INPUT class=nbor size=8 value=00.00 name=tot>
</TD>
</TR>
<TD align="left">
<label for="submit"></label>
<TD align="left">
<input type="image" src="/addtocart2.png" name="submit" id="submit" value="submit" >
</div>
</div></td>
</tr>
</table>
</table>
</form>
</TABLE>
</FORM>
</div>
You just have to add a form validation function and give the elements some IDs so your validation function knows what to validate.
First, add this function under your <script> tag.
function validate_first() {
var msg1 = "Please select from first dropdown\n";
var msg2 = "Please select from second dropdown";
var first = document.getElementById('select1').value;
var second = document.getElementById('select2').value;
if(first=="" || second=="") {
alert(((first == "") ? msg1 : "") + ((second == "") ? msg2 : ""));
return false;
}
return true;
}
Then change onsubmit value from the form definition as follows:
<FORM onSubmit="this.target = 'paypal';
return validate_first();" action=https://www.paypal.com/cgi-bin/webscr method=post>
Finally, give the dropdowns some IDs, and add real values to the "Please Select" options.
For first dropdown:
<SELECT id="select1" STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
<OPTION value="" selected>Please select </OPTION>
<OPTION VALUE="option1 +125.00">option1</OPTION>
<OPTION VALUE="option2 +90.00">option2</OPTION>
<OPTION VALUE="option3 +40.00">option3</OPTION>
</SELECT>
Second one:
<SELECT id="select2" STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
<OPTION value="" selected>Please select </OPTION>
<OPTION VALUE="option1 +55.00">option1</OPTION>
<OPTION VALUE="option2 +99.00">option2</OPTION>
<OPTION VALUE="option3 +44.00">option3</OPTION>
</SELECT>
That's it.
Here is an example with a few different ideas that may be helpful:
jsFiddle Demo
HTML:
<div id="msg">Please select from each of the following:</div>
Model:
<select id="car">
<option value="">Select One</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Color:
<select id="color">
<option value="">Select One</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
Transmission:
<select id="tran">
<option value="">Select One</option>
<option value="manual">Manual</option>
<option value="auto">Automatic</option>
</select>
<br />
<input type="button" id="mybutt" value="Submit" />
jQuery/javascript:
var chkFld, arrAll = {'Vehicle Model':'car','Vehicle Color':'color','Transmission':'tran'};
$('select').change(function(){
$('#msg').slideUp();
});
$('#mybutt').click(function() {
var errMsg='', badFlds='', firstBad='';
for(var key in arrAll){
chkFld = '#'+arrAll[key];
$(chkFld).removeClass('error');
if ($(chkFld).val() ==''){
$(chkFld).addClass('error');
//alert('Please complete field ' + arrAll[key] );
errMsg += '* ' + key + '\n';
if (firstBad=='') firstBad=chkFld;
}
}
if (errMsg != '') {
$('#msg').slideDown();
alert('Please complete: '+"\n"+errMsg);
$(firstBad).focus();
}
}); //END mybutt.click
CSS:
#msg{background:wheat;padding:10px;text-align:center;color:darkcyan;margin-bottom:10px;}
.error{border:1px solid red;background:yellow;}
#mybutt{margin-top:10px;}

javascript/jquery clone not working in dropdown list

I asked a question in the last post that i want rows to be dynamically generated and the data should be copied in the new row. it is working fine but only for text fields. but i also have dropdown in my form and it isn't showing the last row's selected options in new row.
this was my question
add previous row data to dynamically generated row
i have html code :
<form>
<table border="1" id="engagements">
<tr>
<th>
<input type="checkbox" onclick="checkAll(this)" />
</th>
<th>Organization</th>
<th>Project</th>
<th>Product</th>
<th>Activity</th>
</tr>
<tr>
<td>
<input type="checkbox" onclick="checkAll(this)" />
</td>
<td>
<select>
<option value = "1">One</option>/>
<option value = "1">two</option>/>
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<select name="mode" id="mode">
<option value="">Add More Rows with Same Data as Above</option>
<option value="1">1 More</option>
<option value="2">2 More</option>
<option value="3">3 More</option>
<option value="4">4 More</option>
<option value="5">5 More</option>
</select>
</form>
and script code :
$("#mode").on('change', function () {
var rows = parseInt(this.value);
console.log(rows);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});
JS fiddle: http://jsfiddle.net/jW6eL/3/
for performance reasons, jquery doesn't keep selection while making clone of an element. However, you can try using
.clone(true)
this will copy all evens and data with drop down. this way you may use events and and select last option in the drop down.
try this
http://jsfiddle.net/jW6eL/7/
$("#mode").on('change', function () {
var rows = parseInt(this.value);
console.log(rows);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().html();
$('#engagements tr:last').after('<tr>'+lastRow+'</tr>');
$('#engagements tr:last').find('select').each(function(){
var this_select=$(this);
this_select.val(this_select.closest('tr').prev().find('td:eq('+this_select.closest('td').index()+')').find('select').val())
})
}
});

Set different option selected option on refresh of the page -- JAVASCRIPT

so i have a table as follows:
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
on default, 'select layout' is what is displayed. on the click of a button, i need the select box to display 'custom'. i tried searching around SO, but I'm trying to do this without Jquery..
Try this... Its simple... Really Works..
<script type="text/javascript">
function fun()
{
document.getElementById("CellLayout").selectedIndex = 4;
}
</script>
<form name="f1">
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" >
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" onclick="fun()"/>
</form>
You can just change the selects value, like so :
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" value="change" onclick="change()" />
<script type="text/javascript">
function change() {
document.getElementById('CellLayout').value = 'custom';
}
</script>
FIDDLE
You can try it:
<select id="CellLayout" style="color:#000; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option value="0">select layout</option>
<option value="1">blinker</option>
<option value="2">glider</option>
<option value="3">flower</option>
<option value="4">custom</option>
</select>
<input id="btn" type="submit" value="setSelected">
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function(){
var layOut = document.getElementById('CellLayout');
for(var i = 0; i < layOut.length; i++){
if(layOut.options[i].value == '4'){
layOut.selectedIndex = i;
}
}
}
</script>
According to my understand of your question. May be following is your answer. Please check.
In html:
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" value="clickHere" onclick="javascript:call()"/>
In javascript:
function call() {
var textToFind = 'custom';
var dd = document.getElementById('CellLayout');
for (var i = 0; i < dd.options.length; i++) {
if (dd.options[i].text === textToFind) {
dd.selectedIndex = i;
break;
}
}
}

Form submit in javascript

Hi been wrestling this form and the last step (actually submitting) has me scratching my head. What I have so far is the form:
<form id="theForm" method='post' name="emailForm">
<table border="0" cellspacing="2">
<td>Email <span class="red">*</span></td><td><input type='text'class="validate[required,custom[email]]" size="30"></td></tr>
<td>First Name:</td><td><input type='text' name='email[first]' id='first_name' size=30></td></tr>
<tr height="30">
<td cellpadding="4">Last Name:</td><td><input type='text' name='email[last]' id='e_last_name' size=30>
<td>Birthday</td>
<td><select name='month' style='width:70px; margin-right: 10px'>
<option value=''>Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
....
</select><select name='day' style='width:55px; margin-right: 10px'>
<option value=''>Day</option>
<option value="1">1</option>
<option value="2">2</option>
...
<option value="31">31</option>
</select><select name='year' style='width:60px;' >
<option value=''>Year</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
...
</select>
<input type='image' src='{{skin url=""}}images/email/signUpButt.gif' value='Submit' onClick="return checkAge()" />
<input type="hidden" id= "under13" name="under13" value="No">
and a script that checks the age and sets a cookie/changes display
function checkAge()
{
var min_age = 13;
var year = parseInt(document.forms["emailForm"]["year"].value);
var month = parseInt(document.forms["emailForm"]["month"].value) - 1;
var day = parseInt(document.forms["emailForm"]["day"].value);
var theirDate = new Date((year + min_age), month, day);
var today = new Date;
if ( (today.getTime() - theirDate.getTime()) < 0) {
var el = document.getElementById('emailBox');
if(el){
el.className += el.className ? ' youngOne' : 'youngOne';
}
document.getElementById('emailBox').innerHTML = "<style type=\"text/css\">.formError {display:none}</style><p>Good Bye</p><p>You must be 13 years of age to sign up.</p>";
createCookie('age','not13',0)
return false;
}
else {
createCookie('age','over13',0)
return true;
}}
that all seems to be working well.. just missing kind of a crucial step of actually submitting the form if it validates (if they pass the age question). So I am thinking that this will be wrapped in that script.. something in here :
else {
createCookie('age','over13',0)
return true;
}
Can someone please help me figure out how I could handle this submit?
You would call
var form = document.getElementById('theForm');
if(form != null)
form.submit();
And that would post the data to the server.

Categories