Skip last Html row text box value and select on print - javascript

I am trying to create a query which inserts the data in to Mobile sqlite data base say for now i have three rows in a html table on button press a query is generated where it selects the value of the text box and the select selected value but the problem is on print it should skip the last rows value as in my case that is a auto increment table where a last row is left blank to fill in the data for the user.
Now
INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ("Mickey1","Mouse1","No Match"),("Mickey2","Mouse2","No Match"),("skip row","skip row","No Match");
Expected
INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ("Mickey1","Mouse1","No Match"),("Mickey2","Mouse2","No Match");
Demo Jsfiddle
JS
function Get() {
var html = '';
var arr = [];
$('tr').each(function() {
var inputs = $('input', this);
var selects = $('select :selected', this);
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
});
html = 'INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ' + arr.join(',') + ';';
$('#data').html(html);
}
HTML
<form id="Form" onsubmit="return false;">
<table>
<tr>
<td>First name:
<input type="text" name="FirstName" value="Mickey1">
</td>
<td>Last name:
<input type="text" name="Lastname" value="Mouse1">
</td>
<td>Last name:
<select name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</td>
</tr>
<tr>
<td>First name:
<input type="text" name="FirstName" value="Mickey2">
</td>
<td>Last name:
<input type="text" name="Lastname" value="Mouse2">
</td>
</td>
<td>Last name:
<select name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</td>
</tr>
<tr>
<td>skip row
<input type="text" name="FirstName" value="skip row">
</td>
<td>skip row
<input type="text" name="Lastname" value="skip row">
</td>
</td>
<td>skip row
<select name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</td>
</tr>
</table>
</form>
<input type="submit" name="Submit" onclick="Get();" />
<div id="data"></div>

If you add the index parameter to the each function you can edit your code to only display specific lines.
$('tr').each(function(index, me) {
if(index < $('tr').length - 1) {
var inputs = $('input', me);
var selects = $('select :selected', me);
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
}
});
Also in each functions I believe this is not recommended. Adding the second argument to the function should act like this for the individual row (as I've have used me).
Here is a forked version of your Fiddle - https://jsfiddle.net/szkp0Lwq/1/
Edit
As per your comment below -
If you first want to validate your inputs you can do something like -
var valid = true;
$('tr').each(function(index, me) {
if(index < $('tr').length - 1 && valid) {
var inputs = $('input', me);
inputs.each(function(index, me) {
if($(me).val().length == 0)
valid = false;
});
var selects = $('select', me);
selects.each(function(index, me) {
if($(me)[0].selectedIndex == 0)
valid = false;
});
if(valid)
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + $(selects[0]).val() + '")');
}
});
if(valid)
..... submit query
else
alert("Form isn't valid!");
Fiddle - https://jsfiddle.net/o4b1rLns/2/

You could skip the row when you build the array, or only add the ones that doesnt have the "skip row" value, as below:
$('tr').each(function() {
var inputs = $('input', this);
var selects = $('select :selected', this);
if (inputs[0].value != "skip row") {
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
}
});

Related

Once added, remove a value from dropdown menu and show the next value, also once deleted, add the deleted value once again to the dropdown menu

Currently I am using below procedure to add Month and value to a table using the dropdown menu and text box. My requirement is that once the data is added , remove that Month from the dropdown menu and show the next corresponding Month in the list to the user. Also if the record(s) is/were removed, re-add that removed value(s) to the dropdown menu as well. User need to tick the records from the table that needs to be deleted.
Data insertion method
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
if ($('#table5 tr:contains("' + cate + '")').length > 0) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
$("#amt5").val(null);
}
}
}
function deleteval(z, a) {
// Find and remove selected table rows
$("#" + z + "" + " tbody").find('input[name="record"]').each(function() {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
$("#" + a + "" + " tbody").find('input[name="record"]').each(function() {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> Montly Sales </h3>
<select id="month">
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MARCH">MARCH</option>
<option value="APRIL">APRIL</option>
<option value="MAY">MAY</option>
<option value="JUNE">JUNE</option>
<option value="JULY">JULY</option>
<option value="AUGUST">AUGUST</option>
</select>
<input type="number" id="amt5" placeholder="Enter amount" />
<input type="button" value="Add Row" onclick="ftm2add5()">
<button type="button" class="btn-danger" id="delete" onclick="deleteval('table5')">Delete Rows</button>
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th>Select</th>
<th>Month</th>
<th>T/O Value</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
This answer both removes and re-adds the clicked items (make sure all answers do both).
It does so by adding a hidden class - not by removing the SELECT option - making it easy to simply un-hide the option if the row is deleted.
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
if ($('#table5 tr:contains("' + cate + '")').length > 0) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
$("#amt5").val(null);
}
}
$("#month option:selected").addClass('hidden'); //<===== Added
let nextMonth = $("#month option:selected").next('option').text(); //<===== Added
$('#month').val(nextMonth);
}
function deleteval(z, a) {
// Find and remove selected table rows
$("#" + z + "" + " tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
let mnth = $(this).parents("tr").find('td:nth-child(2)').text(); // HERE
$(this).parents("tr").remove();
$('select option').each(function(){ //<================ HERE
if ( $(this).val() === mnth ){
$(this).removeClass('hidden');
}
});
}
});
$("#" + a + "" + " tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
}
.hidden{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> Montly Sales </h3>
<select id="month">
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MARCH">MARCH</option>
<option value="APRIL">APRIL</option>
<option value="MAY">MAY</option>
<option value="JUNE">JUNE</option>
<option value="JULY">JULY</option>
<option value="AUGUST">AUGUST</option>
</select>
<input type="number" id="amt5" placeholder ="Enter amount"/>
<input type="button" value="Add Row" onclick="ftm2add5()">
<button type="button" class="btn-danger" id = "delete" onclick="deleteval('table5')" >Delete Rows</button>
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th>Select</th>
<th>Month</th>
<th>T/O Value</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
UPDATE:
Per comment request, updated to also display the "next" month in the drop-down when a row is added. There is one more thing to do, which I leave as an exercise for the OP. What happens if the user selects the final month? The code can't handle it. Here's how to solve that:
Before you get the "next" month, first get the selected month name (almost same code, just easier).
Then compare that to the text of the last item in the drop-down (start with hard-coding it to "AUGUST", then when you've got that working, figure that out programmatically)
IF the selected month is equal to the last name in the drop-down, set the drop-down to the first option (exact same method as in my code).
Bonne chance!
Try this
var selectbox = $("#month").val();
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
if ($('#table5 tr:contains("' + cate + '")').length > 0) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
$("#amt5").val(null);
}
}
$("#month option:selected").remove();
}
function deleteval(z, a) {
// Find and remove selected table rows
$("#" + z + "" + " tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
$("#month").append('<option value="'+selectbox+'">'+selectbox+'</option>');
$(this).parents("tr").remove();
}
});
$("#" + a + "" + " tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> Montly Sales </h3>
<select id="month">
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MARCH">MARCH</option>
<option value="APRIL">APRIL</option>
<option value="MAY">MAY</option>
<option value="JUNE">JUNE</option>
<option value="JULY">JULY</option>
<option value="AUGUST">AUGUST</option>
</select>
<input type="number" id="amt5" placeholder ="Enter amount"/>
<input type="button" value="Add Row" onclick="ftm2add5()">
<button type="button" class="btn-danger" id = "delete" onclick="deleteval('table5')" >Delete Rows</button>
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th>Select</th>
<th>Month</th>
<th>T/O Value</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>

Jquery adding validate rules on select dynamically created

I'm having trouble making dynamically added inputs required. especially with the "select" input
I have already tried manually checking (wo Jquery validate) if inputs submitted were correct but i encountered the same kind of problem. The "required" class doesn't help either.
Here's the html :
<form id='myform'>
<div>
<div id="addRow">+</div>
<div id="deleteRow">-</div>
</div>
<div>
<table id="tableex">
<tr>
<td>
<select name="selectbox[]" data-selected="" class='selectdyna required'>
<option value="" selected="selected" disabled="disabled">env :</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
</td>
</tr>
</table>
</div>
<div>
<input type='submit' value='Validate'>
</div>
</form>
here's my js:
$(document).ready(function() {
$("#addRow").click(function() {
var str = "<tr>\n" +
" <td id=\"selecttd\">\n" +
" <select name=\"selectbox[]\" class='selectdyna required' data-selected=\"\">\n" +
" <option value=\"\" selected=\"selected\" >env :</option>\n" +
" <option value=\"1\">option1</option>\n" +
" <option value=\"2\">option2</option>\n" +
" <option value=\"3\">option3</option>\n" +
" </select>\n" +
" </td>\n" +
" </tr>";
$("#tableex").append(str)
$('#myform').validate();
$('.selectdyna').rules('add', { 'required': true });
})
$("#deleteRow").click(function() {
if ($("#tableex tr").length > 1) {
$("#tableex tr:last").remove();
} else {
alert("there must been one line minimum.")
}
})
})
here's a link to the fiddle: https://jsfiddle.net/v3tj2c5u/
I don't understand why you require the name of the dropdown that way.
You can do it as below demo
$(document).ready(function() {
$("#addRow").click(function() {
var count= $("#tableex tr").length+1;
var str = "<tr>\n" +
" <td id=\"selecttd\">\n" +
" <select name=\"selectbox"+count+"\" class='selectdyna required' data-selected=\"\">\n" +
" <option value=\"\" selected=\"selected\" >env :</option>\n" +
" <option value=\"1\">option1</option>\n" +
" <option value=\"2\">option2</option>\n" +
" <option value=\"3\">option3</option>\n" +
" </select>\n" +
" </td>\n" +
" </tr>";
$("#tableex").append(str)
$('#myform').validate();
$('.selectdyna').rules('add', { 'required': true });
})
$("#deleteRow").click(function() {
if ($("#tableex tr").length > 1) {
$("#tableex tr:last").remove();
} else {
alert("there must been one line minimum.")
}
})
})
Working demo

Making text input invisible but tangible

I am working on a country dropdown filter for a search. This will allow users to search within the selected region.
Select 'Thailand' from the dropdown, 'Thailand + ' will be pushed to the search box which allows user to enter another keyword (e.g. Food) which forms into
'Thailand + Food'.
Due to technical constraints this is my only workaround creating a search filter. I am wondering can i make the selected region text invisible (Thailand +) yet when i press enter.. 'Thailand +' is part of the search results.
What i want to achieve:
User selects 'Thailand'
Thailand +' is pushed to textbox (Not visible to user)**
User types 'Food' in the search box
Both 'Thailand + Food' is in the search result
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testfloat">
<select id="quantity">
<option selected>Select Libraries</option>
<option value="Albanian + ">Albanian</option>
<option value="Singapore + ">Singapore</option>
<option value="Malaysia + ">Malaysia</option>
<option value="Germany + ">Germany</option>
<option value="France + ">France</option>
<option value="Thailand + ">Thailand</option>
</select>
<script type="text/javascript">
$('#quantity').change(function(){
var qty = $('#quantity').val();
var total = qty;
$("#ms-helperText").val(total);
});
</script>
<input type="text" id="ms-helperText">
Instead of putting the selected country in the input, store it in a variable and change it accordingly.
This is how should be your code:
var searchedCountry = "";
$('#quantity').change(function() {
searchedCountry = $('#quantity').val();
$("#preview").html(searchedCountry + " " + $('#ms-helperText').val());
});
$('#ms-helperText').keyup(function() {
$("#preview").html(searchedCountry + " " + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testfloat">
<select id="quantity">
<option selected>Select Libraries</option>
<option value="Albanian + ">Albanian</option>
<option value="Singapore + ">Singapore</option>
<option value="Malaysia + ">Malaysia</option>
<option value="Germany + ">Germany</option>
<option value="France + ">France</option>
<option value="Thailand + ">Thailand</option>
</select>
<input type="text" id="ms-helperText">
<br/>
<div id="preview">
</div>
you could try to attach that value into a hidden input in html
<input type="hidden" id="somehiddenvalue"></input>
Concat both values into a hidden form element:
// Get all needed input elements
const $country = document.querySelector( '#country' );
const $quantity = document.querySelector( '#quantity' );
const $msHelperText = document.querySelector( '#ms-helperText' );
// Event handler
function inputChange() {
const collection = [];
$country.value && collection.push( $country.value );
$quantity.value && collection.push( $quantity.value );
// Only add + if both inputs have a value.
$msHelperText.value = collection.join( ' + ' );
console.log( 'Hidden element value: ', $msHelperText.value );
}
$country.addEventListener( 'input', inputChange );
$quantity.addEventListener( 'input', inputChange );
<select id="country">
<option value="" selected>Select Libraries</option>
<option value="Albanian">Albanian</option>
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Thailand">Thailand</option>
</select>
<input type="text" id="quantity">
<!-- the new hidden form element, that will hold both values -->
<input type="hidden" id="ms-helperText">

Delete table row using parent.removeChild(child)

I have a table which starts off blank when a user opens the page and has rows added to it by the user. The user searches a DB and the results are echoed to a "Search results" table with the code below.
while ($dbsearch = mysqli_fetch_assoc($run_query))
{
$dbu = $dbsearch['Username'];
$id = $dbsearch['PlayerID'];
$func = "add(" . $id . ", Brad Henry )";
array_push ($_SESSION['players'],$dbsearch['PlayerID']);
echo "<tr><td>".$id ."</td><td>".$dbu."</td><td><input type=\"submit\" id=\"PlayerAdded".$id."\" value=\"Add\" onclick=\"add('".$id."','".$dbu."');\"></input></td></tr>";
}
This is working very well. When the user clicks add, the following function adds the search result to the "Todays event" table:
function add(id,name){
var t = ("</td><td>");
var str = ("<tr id='Players" + id + "'><td>")
var ctr = ("</td></tr>")
var place = ("<select name='place'><option value='17'>17th</option><option value='16'>16th</option><option value='15'>15th</option><option value='14'>14th</option><option value='13'>13th</option><option value='12'>12th</option><option value='11'>11th</option><option value='10'>10th</option><option value='9'>9th</option><option value='8'>8th</option><option value='7'>7th</option><option value='6'>6th</option><option value='5'>5th</option><option value='4'>4th</option><option value='3'>3rd</option><option value='2'>2nd</option><option value='1'>1st</option></select>")
var points = ("<input name='points' placeholder='50'></input>");
var cash = ("$<input name='cash' placeholder='0'></input>");
var ticket = ("<select name='ticket'><option value='No'>No</option><option value='Yes'>Yes</option>");
var del = ("<input type='submit' value='Delete' onclick='remove(" + id + ")'> </input>")
$('#PlayerAdded').before(str+ id + t + name + t + place + t + points + t + cash + t + ticket + t + del + ctr);
}
My issue is that nothing happens when the Delete button (see var del) is clicked. var del calls the "Remove" function which is pasted below. I'm not sure where the error is and I have been searching online for an answer, but to no avail. I wonder if I am declaring var child incorrectly as it looks for an elementID with both a string and int...
function remove(RowID) {
var parent = document.getElementById("resultTable");
var child = document.getElementById("Players" + RowID);
parent.removeChild(child);
}
Your code produces invalid HTML markup. Remove items marked ** and add items marked ++. I've used the value 10 to be the id within your code.
<table>
<tr id='Players10'>
<td>10</td>
<td></td>
<td><select name='place'>
<option value='17'>17th</option>
<option value='16'>16th</option>
<option value='15'>15th</option>
<option value='14'>14th</option>
<option value='13'>13th</option>
<option value='12'>12th</option>
<option value='11'>11th</option>
<option value='10'>10th</option>
<option value='9'>9th</option>
<option value='8'>8th</option>
<option value='7'>7th</option>
<option value='6'>6th</option>
<option value='5'>5th</option>
<option value='4'>4th</option>
<option value='3'>3rd</option>
<option value='2'>2nd</option>
<option value='1'>1st</option>
</select></td>
<td><input name='points' placeholder='50'>
**</input>**</td>
<td>$
<input name='cash' placeholder='0'>
**</input>**</td>
<td>
<select name='ticket'>
<option value='No'>No</option>
<option value='Yes'>Yes</option>
++</select>++
</td>
<td>
<input type='submit' value='Delete' onclick='remove(10)'>
**</input>**
</td>
</tr>
</table>
Then test your code again.

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;}

Categories