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);
}
})();
Related
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.
I have got these two drop down tabs/options and I was hoping someone could help me fix my little problem. I am trying to select an option inside category and then only be able to select options related inside the subcategory instead of been able to select everything. Trying to parent the options related to each other to be displayed basically..
<tr>
<td align="right">Category</td>
<td><label>
<select name="category" id="category">
<option value="" selected="selected"></option>
<option value="Clothing">Clothing</option>
<option value="Headwear">Headwear</option>
</select>
</label></td>
</tr>
<tr>
<td align="right">Subcategory</td>
<td>
<select name="subcategory" id="subcategory">
<option value="" selected="selected"></option>
<option value="beanie">beanie</option>
<option value="Cap">cap</option>
<option value="Shirts">Shirt</option>
</select>
</td>
</tr>
If you are using jquery try this, jsFiddle Example
$('#category').change(function(event){
var subcategory = $(this).closest('tr').next().find('#subcategory');
var selectedCat = $(this).val();
if(selectedCat != false) {
$(subcategory).prop('disabled', false).val(0);;
$(subcategory).find("[data-target='" + selectedCat + "']").show()
$(subcategory).find("[data-target!='" + selectedCat + "']").hide()
} else {
$(subcategory).prop('disabled', true).val(0);
}
});
Also, disable the subcategory and add data-target="category-name"
<select name="subcategory" id="subcategory" disabled="true">
<option value="" selected="selected"></option>
<option value="beanie" data-target="headwear">beanie</option>
<option value="cap" data-target="headwear">cap</option>
<option value="shirts" data-target="clothing">Shirt</option>
</select>
Problem Description:
I am using knockout and I have a table. In this table, I have 3 columns. The first column has a drop down list. I want to generate a new row whenever a user chooses a value from a drop down list.
Here's my fiddle :
http://jsfiddle.net/JPVUk/10/
<table class="table table-bordered">
<thead class="mbhead">
<tr class="mbrow">
<th>Type</th>
<th>Comment</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="input-small">
<option value="">Type</option>
<option value="">One</option>
<option value="">Two</option>
<option value="">Three</option>
</select>
</td>
<td><input class="input-small"/></td>
<td><input class="input-small"/></td>
</tr>
</tbody>
</table>
<button id="saveButton">save</button>`
I want to accomplish this using knockout. Is there a way to accomplish it using knockout?
If I understand your question correctly, you want knockout to add a new row every time the selection in one of your dropdowns is changed.
You can do this by creating a view model with an observable array containing items. You then get your dropdown to insert items into it whenever the selection changes. See the following:
var ViewModel = function() {
var self = this;
self.items = ko.observableArray([{comment:'first comment', amount:0}]);
self.addNewItem = function(){
self.items.push(new Item('',0));
};
}
var Item = function(comment, amount) {
var self = this;
self.comment = ko.observable(comment);
self.amount = ko.observable(amount);
};
vm = new ViewModel()
ko.applyBindings(vm);
If you then add the following to your table markup:
<tbody data-bind="foreach: items">
<tr>
<td>
<select class="input-small" data-bind="event: { change: $root.addNewItem }">
<option value="">Type</option>
<option value="">One</option>
<option value="">Two</option>
<option value="">Three</option>
</select>
</td>
<td><input class="input-small" data-bind="value: comment"/></td>
<td><input class="input-small" data-bind="value: amount"/></td>
</tr>
</tbody>
I updated your JsFiddle here
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
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.