I have a form that contains a number of fields including some selects that are using the Selectize jquery plugin. Part of what the form does involves taking the input from a modal window, which is then added dynamically to the relevant 'selectized' select field.
I am currently doing this as follows:
//Initialise Selectize on the required fields
var $select = $('.selectize').selectize(...do some stuff in here...);
//Fetch the selectize instances
var select0 = $select[0].selectize;
var select1 = $select[1].selectize;
...etc, one for each select...
//This is where I get the text entered in the modal and update
//the relevant select field.
function processText(){
//Get the name of the field we need to update
var thisFormElement = $('#sourceFormElementName').val();
//Get the text to update the above field with
var thisText = $('#inputQuickTextOriginalText').val();
//Figure out which select field to update. Messy.
if(thisFormElement == "select0"){
//'select#' is the reference back to the selectize instances we declared earlier
select0.addOption({value:thisText, text:thisText});
select0.addItem(thisText);
}
else if(thisFormElement == "select1"){
select1.addOption({value:thisText, text:thisText});
select1.addItem(thisText);
}
...more statements...
}
Presumably one way to clean this up would be to reference the selectize instance using the thisFormElement value (or similar). Then there would be no need to the if statement and new fields can be added without altering this part of the code. E.g. something like:
//Assume thisFormElement = select0, for example
var thisFormElement = $('#sourceFormElementName').val();
thisFormElement.addOption({value:thisText, text:thisText});
thisFormElement.addItem(thisText);
I understand that the above won't work, but is there some way to achieve something similar (or a completely different way entirely)?
Below is an approach to enabling users to input an option in one field and add that option to a corresponding selectize field. For those just looking for basic functionality enabling users to add new options to a selectize field, check out the Tagging demo from the selectize documentation.
const params = {
options: [],
placeholder: 'Select...',
valueField: 'value',
labelField: 'text',
searchField: ['text'],
create: false
};
// init selectize inputs and add to 'selects' array
const selects = [];
selects.push($('#select1').selectize(params));
selects.push($('#select2').selectize(params));
$('#add button').click(() => {
$('#add input').each((index, elem) => {
if (elem.value) {
const id = $(elem).data('select-id');
for (const select of selects) {
// find corresponding selectize field and add option
if (id === select[0].id) {
const value = Object.keys(select[0].selectize.options).length + 1;
const text = elem.value;
select[0].selectize.addOption({value: value, text: text});
select[0].selectize.addItem(value);
break;
}
}
elem.value = '';
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selectize</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
</head>
<body>
<div id="add">
<div>
<input name="add1" type="text" value="" placeholder="Add option to 1st select..." data-select-id="select1" />
</div>
<div>
<input name="add2" type="text" value="" placeholder="Add option to 2nd select..." data-select-id="select2" />
</div>
<div>
<button>Add</button>
</div>
</div>
<br>
<form id="select" action="" method="POST">
<input class="myselect" id="select1" name="select1" type="text" />
<input class="myselect" id="select2" name="select2" type="text" />
</form>
</body>
</html>
Related
Here is what I want to achieve. I have a requirement in which there is one dropdown for country codes and another input field for mobile number. I want to send country code and mobile input value as combined value so for that I am using a hidden field. When not using a hidden field it is easy to change value of a third tag element but that will not send value when form is submitted. So hidden field has to be used. So I have tried doing this but it is not changing value of hidden field.
<html>
<head>
<script language="javascript">
var dropdown = '';
var mobilenum = '';
function calldropdown()
{
dropdown = document.getElementById("country_code_id").value;
return dropdown;
}
function calltxtfield()
{
mobilenum = document.getElementById("mobileid").value;
return mobilenum;
}
function codemobile()
{
document.getElementById("codemobileid").value = calldropdown() + ' ' + calltxtfield;
alert(document.getElementById("codemobileid").value);
}
</script>
</head>
<body>
<form>
<select name="country_code" id="country_code_id" onchange="calldropdown()">
<option value="">Select</option>
<option value="+975">Bhutan</option>
<option value="+977">Nepal</option>
<option value="+94">Sri Lanka</option>
</select>
<input type="text" name="mobile" id="mobileid" onchange="calltxtfield()" />
<input type="hidden" name="codemobile" id="codemobileid" value="" />
<input type="submit" name="submit" value="Submit" onclick="return codemobile();" />
</form>
</body>
</html>
I can not explain it right now, but name="codemobile" seems to silently shadow function codemobile(). Rename one of the two and it works.
Also note that right now you are concatenating the function body (... + calltxtfield;), it should rather be ... + calltxtfield();
I design a user database system using bootstrap and jquery. The problem is, whenever a button is press, it will append an additional field for user to key in.
let's say the the array name for the first array of the field is ref_title[0]
after the append button is press, another text field will appear with the same attribute but the array value will be ref_title[1].
however on the code itself, it will only show ref_title[]. This is ok, since any new field will keep adding on to the array ref_title[]. Am i right?
next when save changes button is clicked, i will direct the data to js using onclick="newdata('<?php echo $row['drug_id']; ?>')"
'drug_id' is a unique number, for example 1, 2 or 3.
when i inspect the input field for the first box is
<input class="form-control" id="ref_title3" name="ref_title[]" placeholder="Reference Title" type="text">
however on the second box(after the append button is press and additional box appeared)
<input class="form-control" id="ref_title" name="ref_title[]" placeholder="Reference Title" type="text">
Take a look at the id="ref_title". The value 3 is not echo out.
HTML:
<input type="text" class="form-control" id="ref_title<?php echo $row['drug_id'];?>" name="ref_title[]" placeholder="Reference Title">
<button type="button" onclick="newdata('<?php echo $row['drug_id']; ?>')" class="btn btn-primary" data-dismiss="modal">Save changes</button>
JS:
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" class="form-control" id="ref_title<?php echo $row['drug_id'];?>" name="ref_title[]" placeholder="Reference Title"/></div>">Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
Onlick
function newdata(str){
var ref = $('#ref_title'+str).val(); // !!Only can read the first array
var datas="&ref="+ref;
$.ajax({
type: "POST",
url: "update.php",
data: datas
}).done(function( data ) {
$('#info').html(data);
viewdata();
});
};
Not exactly an answer to your question, but a suggestion on what you could do.
Prerequisite: test.php
<pre><?php var_export($_POST); ?></pre>
When you give input controls a name containing [...] php will treat the data as if it were arrays. E.g.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<meta charset="utf-8" />
</head>
<body>
<form method="post" action="test.php">
<input type="hidden" name="foo[a]" value="a" />
<input type="hidden" name="foo[b]" value="b" />
<input type="hidden" name="foo[bar][]" value="bar1" />
<input type="hidden" name="foo[bar][]" value="bar2" />
<input type="hidden" name="foo[bar][]" value="bar3" />
<div>
<input type="submit" />
</div>
</form>
</body>
</html>
the ouput of test.php will be
<pre>array (
'foo' =>
array (
'a' => 'a',
'b' => 'b',
'bar' =>
array (
0 => 'bar1',
1 => 'bar2',
2 => 'bar3',
),
),
)</pre>
i.e. the names
name="foo[a]"
name="foo[b]"
name="foo[bar][]"
name="foo[bar][]"
name="foo[bar][]"
caused php to build the _POST array like
$_POST = array();
$_POST['foo']['a'] = 'a';
$_POST['foo']['b'] = 'b';
// $_POST['foo'][bar] = array()
$_POST['foo']['bar'][] = 'bar1';
$_POST['foo']['bar'][] = 'bar2';
$_POST['foo']['bar'][] = 'bar3';
Now I suggest that you build the names for the input controls like this:
[drugs][145][add][]
telling hte php script that it is supposed to work on drug items, which one (145), that it should add something plus the [] so you can add an (virtually) arbitrary amount of items.
So a POST body like
drugs[145][add][]=drug145.1&drugs[145][add][]=drug145.2&drugs[22][add][]=drug22.1
(yeah, yeah, the encoding is off....)
would lead to
_POST==$_POST = array(
'drugs' = >array(
'145' => array(
'add' => array(
'drug145.1',
'drug145.2'
),
'22' => array(
'add' => 'drug22.1'
)
)
);
telling your php script to add/append the two descriptions drug145.1 and drug145.2 to the item 145 and drug22.1 to the item 22.
And here's an example how you can do this with html/javascript/jquery
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<meta charset="utf-8" />
<style type="text/css">
.adddrugdesc {
margin-left: 1em;
cursor: pointer;
background-color: Cornsilk;
border: 1px solid silver;
}
</style>
</head>
<body>
<form method="post" action="test.php">
<div class="druglist">
<!-- note the drugid as an data-* attribute, see e.g. https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes
Your php script is supposed to output this id when serving the html document
-->
<fieldset><legend data-drugid="3">Drug A</legend></fieldset>
<fieldset><legend data-drugid="7">Drug B</legend></fieldset>
<fieldset><legend data-drugid="145">Drug C</legend></fieldset>
<fieldset><legend data-drugid="22">Drug D</legend></fieldset>
</div>
<input type="submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var dl = $(".druglist");
// add some kind of edit/add button to each fieldset/legend
dl.find("fieldset legend").each(function(x) {
$(this).append('<span class="adddrugdesc">add description</span>');
});
// add an event handler for all edit/add buttons
dl.on('click', '.adddrugdesc', function(e) {
var me = $(this); // this will be the span element the usr clicked on
var legend = me.parent('legend'); // this will be the legend element in which the span is located
var fset = legend.parent('fieldset'); // same as with legend
var drugid = legend.data()['drugid']; // access the data-* attribute of the element via data() and pick the element "drugid"
var newinput = $('<input type="text" />');
newinput.attr("name", "drugs["+drugid+"][add][]");
fset.append(newinput);
});
});
</script>
</body>
</html>
(It's a bit verbose to keep it "understandable". And ...it's only an example. Some things might be a bit prettier, more robust et al)
I am using JQuery Mobile version 1.4.2 and at some point in one of my templates I would like to use irs filterable select menu. However there is one problem:
That particular element has a specific id attached to it id="filter-menu" which means I can only use it once per template (for instance only for the list of apples).
Therefore I am asking: How may I use it more than one times in the same webpage?
Thanks in advance.
You can use any id you want as long as this id connects specific select and filter input.
Example: http://jsfiddle.net/8e5q9/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<form>
<input type="text" data-type="search" id="filterable-input1"/>
</form>
<form data-role="controlgroup" data-filter="true" data-input="#filterable-input1">
<label for="pizza">
Pizza
<input type="checkbox" id="pizza"/>
</label>
<label for="goulash">
Goulash
<input type="checkbox" id="goulash"/>
</label>
<label for="falafel">
Falafel
<input type="checkbox" id="falafel"/>
</label>
<label for="spring-rolls">
Spring Rolls
<input type="checkbox" id="spring-rolls"/>
</label>
</form>
<form>
<input type="text" data-type="search" id="filterable-input2"/>
</form>
<form data-role="controlgroup" data-filter="true" data-input="#filterable-input2">
<label for="pizza">
Pizza
<input type="checkbox" id="pizza"/>
</label>
<label for="goulash">
Goulash
<input type="checkbox" id="goulash"/>
</label>
<label for="falafel">
Falafel
<input type="checkbox" id="falafel"/>
</label>
<label for="spring-rolls">
Spring Rolls
<input type="checkbox" id="spring-rolls"/>
</label>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Notice how in one case I'm using #filterable-input1 and in other case #filterable-input2.
Update
Again this was a peace of cake, next time try it yourself, I am not trying to make fun of you, this is how you'll learn to relay on yourself.
Working example: http://jsfiddle.net/Gajotres/zCq98/
HTML:
<form>
<select id="filter-menu" data-native-menu="false">
<option value="SFO">San Francisco1</option>
<option value="LAX">Los Angeles1</option>
<option value="YVR">Vancouver1</option>
<option value="YYZ">Toronto1</option>
</select>
</form>
<form>
<select id="filter-menu2" data-native-menu="false">
<option value="SFO">San Francisco2</option>
<option value="LAX">Los Angeles2</option>
<option value="YVR">Vancouver2</option>
<option value="YYZ">Toronto2</option>
</select>
</form>
JavaScript:
$.mobile.document
// "filter-menu-menu" is the ID generated for the listview when it is created
// by the custom selectmenu plugin. Upon creation of the listview widget we
// want to prepend an input field to the list to be used for a filter.
.on( "listviewcreate", "#filter-menu-menu, #filter-menu2-menu", function( e ) {
var input,
listbox = $( "#filter-menu-listbox" ),
form = listbox.jqmData( "filter-form" ),
listview = $( e.target );
// We store the generated form in a variable attached to the popup so we
// avoid creating a second form/input field when the listview is
// destroyed/rebuilt during a refresh.
if ( !form ) {
input = $( "<input data-type='search'></input>" );
form = $( "<form></form>" ).append( input );
input.textinput();
$( "#filter-menu-listbox" )
.prepend( form )
.jqmData( "filter-form", form );
}
// Instantiate a filterable widget on the newly created listview and
// indicate that the generated input is to be used for the filtering.
listview.filterable({ input: input });
})
// The custom select list may show up as either a popup or a dialog,
// depending how much vertical room there is on the screen. If it shows up
// as a dialog, then the form containing the filter input field must be
// transferred to the dialog so that the user can continue to use it for
// filtering list items.
//
// After the dialog is closed, the form containing the filter input is
// transferred back into the popup.
.on( "pagebeforeshow pagehide", "#filter-menu-dialog", function( e ) {
var form = $( "#filter-menu-listbox" ).jqmData( "filter-form" ),
placeInDialog = ( e.type === "pagebeforeshow" ),
destination = placeInDialog ? $( e.target ).find( ".ui-content" ) : $( "#filter-menu-listbox" );
form
.find( "input" )
// Turn off the "inset" option when the filter input is inside a dialog
// and turn it back on when it is placed back inside the popup, because
// it looks better that way.
.textinput( "option", "inset", !placeInDialog )
.end()
.prependTo( destination );
});
How to:
It is not that hard. I have only changed this line:
.on( "listviewcreate", "#filter-menu-menu, #filter-menu2-menu", function( e ) {
and reason for this change were select box names: #filter-menu and #filter-menu2
#filter-menu --> #filter-menu-menu
#filter-menu2 --> #filter-menu2-menu
I got this code somehwere from jquery mobile site mentioned by you (http://demos.jquerymobile.com/1.4.2/selectmenu-custom-filter/), you just need to give id in html part and other things will be done by jquery mobile, I have used it on 3 long list and its working like a charm, but problem is that I am unable to use it with list generated dynamically via js, I will update my answer as soon as I got solution for dynamic list.
(function ($) {
function pageIsSelectmenuDialog(page) {
var isDialog = false,
id = page && page.attr("id");
$(".filterable-select").each(function () {
if ($(this).attr("id") + "-dialog" === id) {
isDialog = true;
return false;
}
});
return isDialog;
}
$.mobile.document
// Upon creation of the select menu, we want to make use of the fact that the ID of the
// listview it generates starts with the ID of the select menu itself, plus the suffix "-menu".
// We retrieve the listview and insert a search input before it.
.on("selectmenucreate", ".filterable-select", function (event) {
var input,
selectmenu = $(event.target),
list = $("#" + selectmenu.attr("id") + "-menu"),
form = list.jqmData("filter-form");
// We store the generated form in a variable attached to the popup so we avoid creating a
// second form/input field when the listview is destroyed/rebuilt during a refresh.
if (!form) {
input = $("<input data-type='search'></input>");
form = $("<form></form>").append(input);
input.textinput();
list
.before(form)
.jqmData("filter-form", form);
form.jqmData("listview", list);
}
// Instantiate a filterable widget on the newly created selectmenu widget and indicate that
// the generated input form element is to be used for the filtering.
selectmenu
.filterable({
input: input,
children: "> option[value]"
})
// Rebuild the custom select menu's list items to reflect the results of the filtering
// done on the select menu.
.on("filterablefilter", function () {
selectmenu.selectmenu("refresh");
});
})
// The custom select list may show up as either a popup or a dialog, depending on how much
// vertical room there is on the screen. If it shows up as a dialog, then the form containing
// the filter input field must be transferred to the dialog so that the user can continue to
// use it for filtering list items.
.on("pagecontainerbeforeshow", function (event, data) {
var listview, form;
// We only handle the appearance of a dialog generated by a filterable selectmenu
if (!pageIsSelectmenuDialog(data.toPage)) {
return;
}
listview = data.toPage.find("ul");
form = listview.jqmData("filter-form");
// Attach a reference to the listview as a data item to the dialog, because during the
// pagecontainerhide handler below the selectmenu widget will already have returned the
// listview to the popup, so we won't be able to find it inside the dialog with a selector.
data.toPage.jqmData("listview", listview);
// Place the form before the listview in the dialog.
listview.before(form);
})
// After the dialog is closed, the form containing the filter input is returned to the popup.
.on("pagecontainerhide", function (event, data) {
var listview, form;
// We only handle the disappearance of a dialog generated by a filterable selectmenu
if (!pageIsSelectmenuDialog(data.prevPage)) {
return;
}
listview = data.prevPage.jqmData("listview"),
form = listview.jqmData("filter-form");
// Put the form back in the popup. It goes ahead of the listview.
listview.before(form);
});
})(jQuery);
<form>
<div class="ui-field-contain" data-role="none" data-native-menu="false">
<select name="Language" id="Language" data-native-menu="false" class="filterable-select" data-force-dialog="true" data-filter="true" data-mini="true">
<option value="1">- Select1 - </option>
<option value="1">- Select1 - </option>
<option value="1">- Select1 - </option>
<option value="1">- Select1 - </option>
<option value="1">- Select1 - </option>
<option value="1">- Select1 - </option>
</select>
</div>
</form>
edit :-
for dynamic data I just added $('#IdOfSelectMenu').selectmenu().selectmenu('refresh');
I'm trying to show/hide some radio buttons under a double condition with Chosen. Not sure if it can be done.
I've this first select which populates a second select. The second select are indeed several selects shown and hidden depending on the first select's choice.
The goal is to show/hide some radio buttons depending on the select's choices. So if you have select1=A and select2=a' show a certain radio button.
So far I've manages this succesfully with one single select as a condition (JS):
$(".chosen").chosen();
$("#a").chosen().change(function () {
var value = $(this).val();
if (value=="Opt1") {
$("#b").show();
} else {$("#b").hide();}
}).trigger('change');
This is the function that shows/hides the second select.
As I've tried a lot of stuff and didn't succeed I've come to a desperate solution which is forget about double condition and trigger the radio buttons upon the second select's choice, like this (JS):
$(".chosen").chosen();
$("#c").chosen().change(function () {
var value = $(this).val();
if (value=="Opt1") {
$("#radio").show();
} else {$("#radio").hide();}
}).trigger('change');
However it ruins the whole thing because it shows this "c" select when it should be hidden according to the previous functions. Any idea on how overcome this?
UPDATE
This is the whole code. I removed id's making no sense with the real names:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<form>
City
<div id="city">
<select data-placeholder="Select city" id="a" class="chosen-select" style="width:350px;" tabindex="2">
<option value="London">London</option>
<option value="Paris">Paris</option>
</select>
</div>
<br>
Trial
<div id="trial1">
<select data-placeholder="Select court" class="chosen-select" style="width:350px;" tabindex="2">
<option value="Court of District"> Court of District </option>
<option value="Magistrate’s Court"> Magistrate’s Court </option>
</select>
</div>
<div id="trial2">
<select data-placeholder="Select court2" class="chosen-select" style="width:350px;" tabindex="2">
<option value="Cour de cassation"> Cour de cassation </option>
<option value="Cour d’apell"> Cour d’apell </option>
</select>
</div>
<br>
<!--- this is a hidden radio that should show up when city== “Paris” and trial2== “Cour d’apell” --->
<div id=radio1><br>
<input type="radio" name="radiob" value="Apell Criminal"> Apell Criminal <br>
<input type="radio" name="radiob" value="Apell Civil" checked> Apell Civil <br>
</div>
<br>
<input type="button" id="btncalc" value="Go on">
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
<!--- Hides the third select and radio buttons--->
$('#trial2').hide();
$('#radio1').hide();
<!--- Shows/hides second and third select, depending on first select’s choice--->
$(".chosen").chosen();
$("#city").chosen().change(function () {
var value = $(this).val();
if (value=="London") {
$("#trial1").show();
$("#trial2").hide();
} else if (value == "Paris") {
$("#trial1").hide();
$("#trial2").show();
}
}).trigger('change');
<!--- show/hide the radio button--->
$('.chosen').chosen().change(onChange);
var onChange = function () {
var a = $('#city').find('select').val();
var b = $('#trial1').find('select').val();
var c = $('#trial2').find('select').val();
/* do all conditional checks here on values a, b, and c */
/* here is an example check on the values of a and b: */
if (a === 'Paris' && c === ‘Cour d’apell’) {
/* show radios */
$("#radio1").show();
}
}; $('.chosen').chosen().change(onChange);
</script>
</body>
</html>
For consistency's sake, let's wrap each select within a div. We can id the divs 'a', 'b', and 'c', but that is really ugly and I would suggest thinking up something more descriptive.
We can first write a function that we want to run whenever any of our selects has its value changed:
var onChange = function () {
var a = $('#a').find('select').val();
var b = $('#b').find('select').val();
var c = $('#c').find('select').val();
/* do all conditional checks here on values a, b, and c */
/* here is an example check on the values of a and b: */
if (a === 'X' && b === 'ya') {
/* show radios */
}
};
We will then pass our function as the change handler to all .chosen selects (we must be certain that all of the selects that we want to apply 'chosen' to have a class of 'chosen'):
$('.chosen').chosen().change(onChange);
I'm having a problem with this form I'm working on. Whenever I add, or refresh the page, the values are still there. I believe this is because the clone method copies the value attribute from the textBox. Is there any way I can get rid of them when I add another textBox?
<html>
<head>
<title>JQuery Example</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
function removeTextBox()
{
var childCount = $('p').size() //keep track of paragraph childnodes
//this is because there should always be 2 p be tags the user shouldn't remove the first one
if(childCount != 2)
{
var $textBox = $('#textBox')
$textBox.detach()
}
}
function addTextBox()
{
var $textBox = $('#textBox')
var $clonedTextBox = $textBox.clone()
//document.getElementById('textBox').setAttribute('value', "")
$textBox.after($clonedTextBox)
}
</script>
</head>
<body>
<form id =
method="POST"
action="http://cs.harding.edu/gfoust/cgi-bin/show">
<p id= "textBox">
Email:
<input type = "text" name="email" />
<input type ="button" value ="X" onclick = "removeTextBox()"/>
</p>
<p>
Add another email
</p>
<input type="submit" value="submit"/>
</form>
</body>
</html>
The Following addition should work:
var $clonedTextBox = $textBox.clone();
$($clonedTextBox).val('');