I am trying to make a form using two drop down select menus: one to select the category, the other to select a subcategory. I am trying to make it so the subcategory options are based on which category they select first, I don't know where to begin on this and a google search is leaving me empty handed. Thanks!
This is what you want:
Note that this is only using html and pure javascript. Yes you can use JQuery too.
<html>
<head>
<script language="javascript" type="text/javascript">
function dropdownlist(listindex)
{
document.formname.subcategory.options.length = 0;
switch (listindex)
{
case "category1" :
document.formname.subcategory.options[0]=new Option("subcategory1.1","value1.1");
document.formname.subcategory.options[1]=new Option("subcategory1.2","value1.2");
document.formname.subcategory.options[2]=new Option("subcategory1.3","value1.3");
break;
case "category2" :
document.formname.subcategory.options[0]=new Option("subcategory2.1","value2.1");
document.formname.subcategory.options[1]=new Option("subcategory2.2","value2.2");
document.formname.subcategory.options[2]=new Option("subcategory2.3","value2.3");
break;
case "category3" :
document.formname.subcategory.options[0]=new Option("subcategory3.1","value3.1");
document.formname.subcategory.options[1]=new Option("subcategory3.2","value3.2");
document.formname.subcategory.options[2]=new Option("subcategory3.3","value3.3");
break;
default:
document.formname.subcategory.options[0]=new Option("Select Category")
break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category :</td>
<td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Category</option>
<option value="category1">category 1</option>
<option value="category2">category 2</option>
<option value="category3">category 3</option>
</select></td>
</tr>
<tr>
<td align="right" valign="middle">Sub Category :
</td>
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Sub-Category</option>
</select>
</noscript></td>
</tr>
</table>
</form>
</body>
</html>
Search for cascading dropdowns. This would Need to some JavaScript or maybe some server side code but with this search term you will find tons...
And start from here http://archive.plugins.jquery.com/plugin-tags/drop-down
Related
I want to change the value of an html table text element using a toggle and dropdown. When the option is selected, the HTML table text element should change numbers. Here is the html and jQuery I have so far.
<select name="subject" id="subject">
<option value="option1" id="xTest">Option 1</option>
<option value="option2" id="yTest">Option 2</option>
</select>
<table>
<tr>
<td id="testing">Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
and the jQuery
<script>
$(document).ready(function() {
$("#xTest").click(function(){
("#testing").text("change");
});
})
$(document).ready(funtion() {
$(#yTest).click (function(){
("#testing").text("change2");
});
})
</script>
When selecting either dropdown (#xTest or #yTest), the value of #testing isn't changing. Do I need to add an a href attribute to the html? This wouldn't make sense to me, however, because I am not adding a link.
Any help would be much appreciated.
Thank you!
Events are not supported cross browser on <option> elements. Instead use the change event on the <select> and use it's value to determine the text to display
$("#subject").change(function() {
const txt = 'change ' + (this.value === 'option1' ? 1 : 2)
$("#testing").text(txt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="subject" id="subject">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<table>
<tr>
<td id="testing">Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
Monitor <select> changes using jquery like this:
$('#subject').change(function () {
const text = 'change ' + (this.value === 'option1' ? 1 : 2)
$("#testing").text(text);
});
I have a dynamic table with select and input type="text" for each row in database. How do i set attr "name" for the select and input to be properly read on server side, and how do i pass the values with ajax? Should all names be dynamic, unique, or with array....There are more inputs in the form beside table, but my concern is the table data only. Table is sortable, so rows change positions, and serialize change the order as well.
<table id="config" class="table" cellspacing="0" width="100%">
<thead>
<tr>
<th>name</th>
<th>Action</th>
<th class="no-sort">tag</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td>
<div class="form-group">
<select class="full-width config-action" name="action" data-init-plugin="select2" data-disable-search="true">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="tag">Tag</option>
</select>
</div>
</td>
<td>
<input type="text" name="tag" class="form-control table-tag" >
</td>
</tr>
<tr>
<td>Name 2</td>
<td>
<div class="form-group">
<select class="full-width config-action" name="action" data-init-plugin="select2" data-disable-search="true">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="tag">Tag</option>
</select>
</div>
</td>
<td>
<input type="text" name="tag" class="form-control table-tag" >
</td>
</tr>
</tbody>
</table>
For ajax, if i serialize the data, they can change order if table is sorted, so names should be dynamic, but how should i handle this without serialize?
........
var form = $(this);
var action = form.attr('action');
$.ajax({
type: "POST",
url: action,
data: form.serialize(),
success: function(response) {
if(response === 'true') {
}
else {
var msg = response;
}
}
});
May be you can dynamically add the "name" attributes before submitting the form this way:
$("input.table-tag").each(function(i){
$(this).attr("name","tag"+i);
})
The names will turn to be tag0, tag1 etc. Not sure if that is what is required.
Your form elements should be named appropriately in your HTML.
For instance:
<select name="table[1][action]" ...
<input name=table[1][tag]" ...
...
<select name="table[2][action]" ...
<input name=table[2][tag]" ...
Then you would do something like this, assuming you're using PHP:
foreach($_POST['table'] as $key => $row){
// now use $key, $row['tag'], $row['action'] ...
}
The $key variable would normally be a database ID.
My application requires that the date picker should display the calender body on click, select date today's date being active and future date deactivated... i am new in jquery and it has disturbed me for a month. assist please. I am able to display the datepicker and choose any date upto 2030, but i need the calender to be active upto today's date or current date only.
thanks in advance.
my calender to be displayed..
<table id="calenderTable" class="">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center">
<select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));" id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));" id="selectYear">
</select>
</td>
<td align="center">
<font color="#003333" size="+1">X</font>
</td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr style="">
<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>
</tr>
</tbody>
<tbody id="calender"></tbody>
</table>
the date field is as below:
<tr>
<td>effected date</td>
<td>
<input type="text" name="eff_date" class="required" id="eff_date"><a href="#" onClick="setYears(1947, 2030);
showCalender(this, 'eff_date');" class="" id="calender">
<img src="Calender/calender.png"></a>
</td>
</tr>
This is pretty simple to accomplish assuming I understand the question. You want to set the maximum allowable selectable date, correct? All you need to use is the maxDate option.
Here is a complete example, assuming you include the proper files referenced in the script and link tags:
<!DOCTYPE HTML>
<html>
<head>
<title>date</title>
<meta charset="utf-8">
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
<script>
$(function() {
$("#datepicker").datepicker({maxDate: '+0d'});
});
</script>
</body>
</html>
You can see it working here:
http://gigaloop.com/answers/date.html
You can use maxDate and combine with minDate:
http://jqueryui.com/demos/datepicker/#option-maxDate
Within script tags, write:
$(function() {
$( "#datepicker-1" ).datepicker({
minDate:"Now", maxDate: "+1m+1d"
});
});
You can change minDate to "-1m" if you want to show dates from 1 month ago and 1 month in the future. As per your question, you can put maxDate: "+1d" if you want to disable future days from today.
1y=1year,1m=1month,1d=1day.
I have two comboboxes:
Enable monitoring: Yes/No
and
Operation mode: Client/Server
The default value of the first one is 'No' and the second should be hidden. When I change it to Yes, I want the second combobox to be visible. How can I do that?
<tr>
<td width="25%" class="titulos" nowrap>Enable monitoring:</td>
<td width="75%" class="dados" nowrap>
<select class="dados" name="proxyconf" onchange="showOptions ();">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
</td>
</tr>
<tr>
<td width="25%" class="titulos" nowrap>Operation Mode:</td>
<td width="75%" class="dados" nowrap>
<select class="dados" name="proxyconf" onchange="showOptions ();">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
</td>
</tr>
You can do that with Javascript.
Give the second option box an ID, and then use Javascript to show/hide it:
<script type="text/javascript">
function showOptions() {
var elem = document.getElementById("id_of_second_box");
elem.style.display = "block";
}
</script>
You can pass in the option box to the function by reference if you like, and there are many different ways of showing/hiding elements using Javascript and CSS, but something along the lines of the above should help.
I would do it this way: http://jsfiddle.net/qtHc3/ (the example uses jQuery).
Using JavaScript:
function showOptions(elem){
if(elem.value == "2"){
document.getElementById("second").style.visibility = "visible";
}else{
document.getElementById("second").style.visibility = "hidden";
}
}
And the first combobox:
<select class="dados" name="proxyconf" onchange="showOptions(this);" id="first">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
And the second one:
<select class="dados" name="proxyconf" onchange="" id="second" style="visibility:hidden">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
But this may not be cross browser compatible so check carefully.
I'm trying to figure out how to create a test area where the user can either select from a list of items, or add to a textarea. Is this possible? Something like the following, except restrict the user to either selecting from the list, or entering into the textarea.
<tr>
<td width="100" class="formNames">Frequency</td>
<td colspan="2" class="cellColor">
<select name="yr" class="textbox">
<option value="0">-</option>
<option value="30">1</option>
<option value="30">2</option>
<option value="30">3</option>
<option value="30">4</option>
<option value="30">5</option>
</select>
</td>
<td width="10" class="formNames"> -or- </td>
<td class="formNames">
<input type="text" name="scheduletitle" class="textbox" value="default" />
</td>
</tr>
disable the other when data is changed in one. Using jQuery:
(function(){
var elements = $('select[name=yr],input[name=scheduletitle]');
elements.bind('change', function(){
var self = this;
elements.attr('disabled', false);
$(this).val() && elements.filter(function(){ return this != self; }).attr('disabled', true);
}
})();