menu change page information - javascript

I'm trying to have multiple dropbox menu's on the same page that will change the information on the next page after submitting their selection.
so the user can make different and multipule selections from the menus then click "submit" and different information will be on the next page and not the same page like the script below.
this is the closest thing ive found but trying to get the information on the next page instead is proving tricky.
<form>
<table>
<tr>
<td>Person 1</td>
<td>Information</td>
<td>
<select id="choice1" onchange="changeText('choice1', 'display1')">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>Person 2</td>
<td>Information</td>
<td>
<select id="choice2" onchange="changeText('choice2', 'display2')">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select>
</td>
</tr>
</table>
<p> </p>
<table>
<tr>
<td><div id="display1">Select an option</div></td>
</tr>
<tr>
<td><div id="display2">Select an option</div></td>
</tr>
</table>
<p> </p>
</form>
<script>
var textBlocks = [
'Select an option',
'G1 Choice1 description',
'G1 Choice2 description',
'G2 Choice1 description',
'G2 Choice2 description'
];
function changeText(elemid, displayId) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById(displayId).innerHTML = textBlocks[ind];
}
</script>
</body>
</html>

POST data is sent to the server and not returned to the client. This means that your JavaScript code will never see what was submitted.
You either need to do whatever you want server-sided (i.e., in PHP) or you need to change the way you send and read data (i.e., via hash part of the URL, via cookies,...). Using a server-side language is most likely a better option, although it does depend on what you are trying to achieve.

Related

Send all dropdown data from HTML/Jenja back to flask server

I posted a similar question here: Flask - Data inputting on the client side
However, I figured out another way to solve that problem and now encounter a new one below.
In short, I'm building a portal for our client where they can log in and upload their financial documents. There is a predefined schema in flask that maps financial items in the uploaded document. For example, all accounts related to 'Cash' will simply be mapped into 'Cash'.
The html code below basically renders a table that is similar to the uploaded file with an additional column 'Mapping' that maps each row of account. If there are new accounts added in the financial document, there will be a drop-down section for the client to pick the mapping schema. A screenshot is included here for your visuals.
https://drive.google.com/file/d/1RuYq3rdaG5XSxLTPYO46PlqBujuy_I8A/view?usp=sharing
My question is how do I set up the event for the button "Confirm mapping" to send all selected dropdown inputs back to the flask server in the form of JSON object (preferably). In this case, I want the JSON to be:
{
"Cash" : "Lucky money",
"Debt" : "Bad debt"
}
I include some html code below. I know it's not very reproducible but my company codebase is too big to share. I'm just interested in some general method to accomplish the task.
<!-- results.html -->
<body>
<div>
<table id="Mapped table">
<h2 align='center'>Mapped data</h2>
<tr>
{% for col in column_names %}
<th>{{col}}</th>
{% endfor %}
</tr>
{% for row in row_new %}
<tr>
{% for col, row_ in zip(column_names, row) %}
{% if col == link_column %}
<td>
<select id="dropbtn">
<option value="1">Cash</option>
<option value="2">Debt</option>
<option value="3">Retained Earnings</option>
</select>
<div id="selection"></div>
<script>
var e = document.getElementById("dropbtn");
var strUser = e.options[e.selectedIndex].text;
</script>
</td>
{% else %}
<td>{{row_}}</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
<div class="wrapper">
<button class="button" id="myBtn">Confirm mapping</button>
</body>
You have some issues:
ID must be unique. Hence, you can consider to change from select id="dropbtn" to **select class="dropbtn"
A table should contain a body, header and footer. Instead you have a series of rows (i.e.: tr)
The table ID contains a space. This is a problem when selecting by ID. For this take a look to escapeSelector
A possible solution to your issue can be:
$('#myBtn').on('click', function(e) {
var drpdbJson = {};
// for each row containing a select....
$('#Mapped\\ table tr:gt(0):has(select)').each(function(idx, ele) {
// get the selected value
var drpdwnKey = $(ele).find('.dropbtn option:selected').text();
// get the second column text
var drpdwnValue = $(ele).find('td:eq(1)').text();
// add to the json result
if (drpdbJson[drpdwnKey] == undefined) {
drpdbJson[drpdwnKey] = drpdwnValue;
} else {
drpdbJson[drpdwnKey] = (typeof drpdbJson[drpdwnKey] === 'string') ?
[drpdbJson[drpdwnKey], drpdwnValue] : [...drpdbJson[drpdwnKey], drpdwnValue];
}
})
// print the json obj
// pay attention: a json cannot contain duplicated keys:
// if you select the same value for both select in the example....
console.log(JSON.stringify(drpdbJson))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h2 align='center'>Mapped data</h2>
<table id="Mapped table">
<tr>
<th>Account Number</th>
<th>Account Description</th>
<th>Amount</th>
<th>Mapping</th>
</tr>
<tr>
<td>2010</td>
<td>Lucky money</td>
<td>1111.0</td>
<td>
<select class="dropbtn">
<option value="1" selected>Cash</option>
<option value="2">Debt</option>
<option value="3">Retained Earnings</option>
</select>
</td>
</tr>
<tr>
<td>1234</td>
<td>Bad debt</td>
<td>222222.0</td>
<td>
<select class="dropbtn">
<option value="1">Cash</option>
<option value="2" selected>Debt</option>
<option value="3">Retained Earnings</option>
</select>
</td>
</tr>
<tr>
<td>1234</td>
<td>USD</td>
<td>222222.0</td>
<td>
<select class="dropbtn">
<option value="1" selected>Cash</option>
<option value="2">Debt</option>
<option value="3">Retained Earnings</option>
</select>
</td>
</tr>
<tr>
<td>1234</td>
<td>Petty cash</td>
<td>222222.0</td>
<td>
<select class="dropbtn">
<option value="1" selected>Cash</option>
<option value="2">Debt</option>
<option value="3">Retained Earnings</option>
</select>
</td>
</tr>
</table>
</div>
<div class="wrapper">
<button class="button" id="myBtn">Confirm mapping</button>
</div>

Using text instead of Select statement

I have a drop down box, this is populated with options that after selecting it shows hidden text by calling the function toggletDisplay() and sending the value of the option throug, I want it to be able to do the same but without the drop down box to select, using instead plain text with onclick() instead of onchange() or something similiar.
Current Code
<form id="criteria" name="criteria">
<table width="200px" height="700px" name="criteria_search" align="left" border="1" style="margin-right:70px">
<tr>
<td class="dataLabel" width="100%" align="left"><strong>Add Rule : </strong>
<select name="rule" id="rule" onChange="toggletdDisplay(this.form);">
<optgroup label="Simple Rules">
<option value="instructions" selected="selected"> </option>
<option value="email">Email</option>
<option value="assigned">Assigned Racecourse</option>
</optgroup>
</select>
</td>
</tr>
</table>
<table align="right" border="1" width="300px" height="400px" style="float:left;">
<tr>
<td class="dataLabel" name="assigned" id="assigned" style="display: none;">
<table border="0">
<tr>
<td colspan="3"><h4>Assigned to Racecourse</h4></td>
</tr>
<tr>
<td style="margin-left:20px">
<b>Assigned To: </b><select name="selected_assigned_location" id="selected_assigned_location"></select>
</td>
</tr>
</table>
</td>
<td width="100px" class="dataLabel" name="email" id="email" style="display: none;" >
<table>
<tr>
<td colspan="3"><h4>Registered Email</h4></td>
</tr>
<tr>
<td><b>Do they have a registered Email Account?</b></td>
</tr>
<tr>
<td>
Yes <input type="radio" name="email_c" value="true_ex" {EMAIL_TEX_CHECKED} checked="checked"> No <input type="radio" name="email_c" value="false" {EMAIL_F_CHECKED}>
</td>
</tr>
</table>
</td>
...ect
I tried just sending the value through as an onclick
<td>
<p id="rule" name="rule" value="email" onclick="toggletdDisplay(this.form);">Email</p>
</td>
But I get an error of value rule is undefined. How would I send the value through the same as before but without using a select statement?
Added the toggletDisplay, simply uses the value sent back to change the style of the datalabel from hidden to inline
function toggletdDisplay(me)
{
list = Array("instructions","sex", "email", "mobile", "account", "age", "location", "spent", "booked_anything", "internet_booked", "package_type", "package_name", "booked_location", "new_booked_event", "booked_event_range","team", "no_reorder", "newsletter","hear_about","hear_about_bookings","mosaic_group","mosaic_type","assigned","assigned_user","lead_source","target_list","awc","birthday");
// hide any previously selected elements
for(x=0; x<list.length; x++)
{
deselect = getElementsByName_iefix("TD", list[x]);
for (j=0; j<deselect.length; j++)
{
deselect[j].style.display = "none";
}
}
// display currently selected criteria
selected = getElementsByName_iefix("TD", me.rule.value);
selected[0].style.display = "inline";
}
There seem to be a number of issues with your code. One of them is the undefined function toggletdDisplay() that is called whenever you change the selection in your select field.
But, basically, if you want to send a value of an input field or a select box within a form to a php script on your server you will need to define an action attribute in your <form> tag and make sure that the form is submitted. This can be achieved in your case by changing the onchange attribute in your select box (simplified code, without the table architecture):
Whenever you change the selection in your select box the form will be submitted and the value of that select box will be sent to target.php. The address line in your browser will show something like
...<your URL>/target.php?rule=email
It is also not clear to me why you use colspan attributes in some of your <td>-elements, as there is only one column to display in that table.
My advice is to be economical with "cut and paste" and only use code that you fully understand. Build your page slowly, step by step. That way you will be able to understand what needs to be fixed if something goes wrong.
Edit
With your toggletdDisplay() script we have something to work on. The first thing that springs to my mind is that you are not using jquery functions where they might be helpful. And secondly, you don't do anything to display the form values in the console window or send them to a php script.
It is also important to note that name attributes can only be assigned to <input> or <select> elements and not to <td> elements. In my following script I used the id attribute instead.
var tds,tdis;
$(function(){
var list = ["instructions","sex", "email", "mobile", "account", "age", "location", "spent", "booked_anything", "internet_booked", "package_type", "package_name", "booked_location", "new_booked_event", "booked_event_range","team", "no_reorder", "newsletter","hear_about","hear_about_bookings","mosaic_group","mosaic_type","assigned","assigned_user","lead_source","target_list","awc","birthday"];
// consider only TDs with IDs from list array:
tds= $('td').filter(function(i,el){return $.inArray(el.id,list)>-1;});
// trigger the display of results only for select and input elements within tds:
tdis=$('select,input', tds).on('change',listResults);
// assign the toggletdDispla function to the rule selector:
$('.action').on('change',toggletdDisplay);
});
function toggletdDisplay(){ tds.hide().filter('#'+this.value).show()}
function listResults(){
$('#show').html('<p>Values to be sent:</p>'+tdis.serialize().replace(/&/g,'<br/>'))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="target.php">
<table name="criteria_search" align="left" border="1" style="margin-right:70px">
<tr><td class="dataLabel"><strong>Add Rule : </strong>
<select name="rule" id="rule" class="action">
<optgroup label="Simple Rules">
<option value="instructions" selected="selected"> </option>
<option value="email">Email</option>
<option value="assigned">Assigned Racecourse</option>
</optgroup>
</select>
</td><td class="dataLabel" id="email" style="display:none">
<b>email:</b>
<br/><label><input type="radio" name="email_c" value="true_ex"> yes</label>
<br/><label><input type="radio" name="email_c" value="false"> no</label>
<br/><label><input type="radio" name="email_c" value="soon"> not yet</label>
</td>
<td class="dataLabel" id="assigned" style="display:none">
Racecourse<br/>
<b>Assigned To: </b>
<select name="selected_assigned_location">
<option value=""></option>
<option value="a">racecourse A</option>
<option value="b">racecourse B</option>
<option value="c">racecourse C</option>
</select>
</td>
</tr>
</table>
</form><br style="clear:both" />
<div id="show"></div>

Trying to create quantity x cost with Javascript

I am creating a merchandise page where I have put the items into separate tables. I want to have it so that when someone selects a quantity, it will display the appropriate price in the field below. Here's the HTML so far:
<table border="1" id="tshirtTable" style="float:left">
<tr>
<th colspan="2">Burundi T-Shirt</th>
</tr>
<tr>
<td colspan="2"><img src="https://rlv.zcache.com/burundi_t_shirt-re5f84ff8b0724bbda7582389e5816a6f_k2g1o_324.jpg" alt="Burundi T-shirt"></td>
</tr>
<tr>
<td id="qty">Quantity</td>
<td>
<select id="tshirt">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td id="price">Price</td>
<td><input type="text" disabled="true"></td>
</tr>
</table>
I'm pretty new to JS so not sure how to have it calculate the price, depending on which quantity is selected. Guessing I'll have to set the price somewhere, but not exactly sure how to get started on it.
Any help is appreciated, thanks!
I've refactored your code. In my example, we have list of products. It doesn't really matter, you can have here one product or as many as you want. For learning purposes it's better do handle table of items.
First of all we won't be using disabled attribute but readonly. It's is very important, because disabled key-value won't be send to the server. If you want to block the input from changing use readonly. Secondly you don't need to pass =true value to your attribute.
<input type="text" disabled="true"> // bad
<input type="text" readonly> // ok
Another thing is that attribute id is unique per document and we can have only one. Read more on MDN.
The id global attribute defines a unique identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
No jQuery in my example, you should learn pure javascript first.
To calc, we must change type of our values. Reading them from inputs, their type is String, we must convert them to Number. In our case we use parseInt() function. It's better to use parseFloat(), when we expect floating point number.
Read my comments to have better understanding what is going on. If you have any confusion make sure to ask.
var table = document.getElementById('tshirtTable');
table.addEventListener("change", function(e) {
// If we are not changing these elements we quit
if (e.target.name !== 'quantity' && e.target.name !== 'each-price') {
return;
}
// Let's check what is id of our element
// We store our id in <tr id="..."
// To access tr, we must find tr by using .closest function
var tr = e.target.closest('tr');
var productId = tr.id;
var quantityValue = tr.querySelector('.quantity').value;
var eachPriceValue = tr.querySelector('.each-price').value;
var totalPriceValue = tr.querySelector('.total-price').value;
// Here is important part, we must parse values as type Number, because currently they are type String
tr.querySelector('.total-price').value = ( parseInt(quantityValue) * parseInt(eachPriceValue)).toFixed(2);
});
<table border="1" id="tshirtTable" style="float:left">
<thead>
<th>Name</th>
<th>Quantity</th>
<th>Price / Each</th>
<th>Total Price</th>
</thead>
<tbody>
<tr id="1">
<td>Burundi T-Shirt</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="15"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
<tr id="2">
<td>Burundi Skirt</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="25"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
<tr id="3">
<td>Burundi Mask</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="30"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
</tbody>
</table>
First you have to add function which have to be call on document ready or as pure javascript document.onload()
Then you have to define a variable name for the price,
Then you have to get the value of your (#tishirt) and multiply it with the price get the result as a value for your text input in which the price display
Here is the script
<script type ="text/javascript">
document.onload=function(){
document.getElementById(#tishirt).onchange=function(){
var price=100 ;//only example price
var total=price*document.getElementById(#tishirt).value;
if (total>0){
document.getElementById(#total).value=total;
}
};
};
</script>
Don't forget to add id to your text box (#total)

validate the dom using jquery

I am trying to validate the DONM using jquery Please look into the fiddle.
My objective is not to select the same country to same room number .
I have two scenarions
scenario 1 (before saving into DB)
The example is working fine
scenario 2 (After saving the data into db )
saved data coming from DB
Available Country RooNumber SelectedPerson
droipdown1 1
dropdown2 2 chennai
WRONG SELECTION
Available Country RooNumber SelectedPerson
chennai 1 chennai
chennai 2 chennai
JSFiddle:
http://jsfiddle.net/bharatgillala/9o1gxa1h/10/
code:
<table id="gridviewInfo" runatr="server">
<TBODY><TR>
<TH scope=col>Available Country</TH>
<TH scope=col>RooNumber</TH>
<TH scope=col>Selected</TH>
</TR>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico
</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
<TD style="WIDTH: 100px">1</TD>
<td>
<label id='lbl2'> maxico </label>
</td>
</TR>
<TR>
<TD style="WHITE-SPACE: nowrap" align=left>
<SELECT class="judges" id='ddlAvailableJudges2' name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
2
<td>
<label id='lbl2'>chennai</label>
</td>
</tr>
</table>
First of all, you're creating n label tags with the id lbl2.
This is happening, because you're developing with ASP.NET and you didn't create your label with the runat=server attribute, so it won't generate different label IDs for each label created.
Second, your code was too ugly / verbose, so I decided to make a complete new code to achieve what you want, and the snippet is below, full commented:
(function(d) {
// when all the DOMElements are already loaded into the document
d.addEventListener('DOMContentLoaded', function() {
// gets the generated table, and get all the dropdownlists inside it
var table = document.getElementById('gridviewInfo'),
ddls = [].slice.call(table.querySelectorAll('select'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// initially, we want to change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
// then, we must disable this option in all the other dropdownlists
updateDisabled(ddl);
// so, we add a change event handler
ddl.addEventListener('change', function(e) {
// when the ddl value is changed, we update the label text
lbl.textContent = ddl.value;
// and we disable the option selected in all the other dropdownlists
updateDisabled(ddl);
});
});
function updateDisabled(ddl) {
// to disable all the other dropdownlists
// we loop through all the HTMLOptionElements inside the table
[].forEach.call(table.querySelectorAll('option'), function (opt, j) {
// we look if the current option inside the loop is not the selected one
if (opt.parentNode !== ddl) {
// then, if the option has the same selected value, we disable it, else we enable
opt.disabled = opt.value && opt.value === ddl.value;
}
});
}
});
})(document);
#gridviewInfo td:nth-child(1) {
white-space: nowrap;
text-align: left;
}
<table id="gridviewInfo" runatr="server">
<thead>
<tr>
<th>Available Person</th>
<th>RooNumber</th>
<th>SelectedPerson</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="judges" id="ddlAvailableJudges1" name=ctl00$contentBody$gvwRoomInformation$ctl02$ddlAvailableJudges>
<option selected value=''></option>
<option value="maxico">maxico</option>
<option value="chennai">chennai</option>
<option value="newdelhi">newdelhi</option>
<option value="hongkong">hongkong</option>
</select>
</td>
<td>1</td>
<td>
<label>maxico</label>
</td>
</tr>
<tr>
<td>
<select class="judges" id="ddlAvailableJudges2" name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<option selected value=''></option>
<option value="maxico">maxico</option>
<option value="chennai">chennai</option>
<option value="newdelhi">newdelhi</option>
<option value="hongkong">hongkong</option>
</select>
</td>
<td>2</td>
<td>
<label>hongkong</label>
</td>
</tr>
</tbody>
</table>
Update
Since the OP asked, I've created a fiddle for him: http://jsfiddle.net/h1b6e8zm/

Two options on onchange

I have an drop down that is a simple yes/no.
When the user selects "Yes" the page brings a new drop down (New Product) for them to select, when the user selects "No" it should display different drop down (Non Sale Reason)
On my webpage, when the user selects "Yes" it works, but nothing happens when they select "No"
The on change script is:
<td colspan="2" style="text-align: left;"><select name="Retained" id="Retained" onchange="display(this,'Yes','No');" >
I have added a code to a jsfiddle
http://jsfiddle.net/s0s7dry7/7/
It does not display correctly on here for some reason (nothing hidden but drop downs are hidden on my page)
Can anyone help me please?
Thanks
You are currently passing in three arguments to your display function: this, 'Yes' and 'No'. The third is not given a name in the function definition, and is effectively ignored; basically, every time you call this function, the id1 parameter is passed in as 'Yes'.
I'm not sure exactly what you're trying to achieve, but this is probably not doing what you want. The txt variable within the function will always be set to whatever the current (i.e. new) value is, but it will always be compared against id1; and equally you will only ever modify the document element with ID 'Yes'.
To fix this you could change the second argument in the onchange call to be the newly selected value. But even this is superfluous, since as noted above you can determine this just from the element reference. Instead I would remove both the 'Yes' and the 'No' parameters, and reduce your display() function to just working out what txt is. Now you know what that is, you can tell whether the user selected yes or no, and with a simple if-else you can do whatever you need to do in these separate cases.
var el = document.getElementById("Retained");
el.onchange = function(evt){
var no = document.getElementById("No");
var yes = document.getElementById("Yes");
if(evt.target.options[evt.target.selectedIndex].value === 'No'){console.log("NO")}
if(evt.target.options[evt.target.selectedIndex].value === 'Yes'){console.log("YES")}
}
you can modifiy console.log("No") to no.style.display='block'
you can modifiy console.log("Yes") to yes.style.display='block'
if(evt.target.options[evt.target.selectedIndex].value === 'No'){no.style.display='block'}
if(evt.target.options[evt.target.selectedIndex].value === 'Yes'){yes.style.display='block'}
This is the simplified version of your need:
function display(val) {
var elems = document.getElementsByClassName('options');
for(var i = 0; i < elems.length; i++) {
elems[i].style.display = "none";
}
document.getElementById(val).style.display = "block";
}
<table>
<tr>
<td style="text-align: left;">Sale:</td>
<td style="text-align: left;">
<select name="Retained" id="Retained" onchange="display(document.getElementById('Retained').value);">
<option value=""></option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</td>
</tr>
<tr id="Yes" style="display: none" class="options">
<td class="title">New Product:</td>
<td class="field">
<select name="RetainedProduct" id="RetainedProduct">
<option value=""></option>
<option value="£10">£10</option>
<option value="£6.50">£6.50</option>
</select>
</td>
</tr>
<tr id="No" style="display: none" class="options">
<td class="title">Non Sale Reason:</td>
<td colspan="2" class="field">
<select name="RetainedProduct" id="RetainedProduct">
<option value=""></option>
<option value="Not interested">Not interested</option>
<option value="Too expensive">Too expensive</option>
</select>
</td>
</tr>
</table>

Categories