I am having an issue with the 'addedItems' table not displaying in IE 9 but if used on Firefox 30 displays as it should. In IE it sends the post data and when I check the HTML with the developer tools it shows the html elements on the page. I have tried to see if setting the table display to block but there was no change.
The purpose of this code is to allow the user to select from a drop down list which type of equipment they want to add, then be able to add any number of items from either the Foo or Bar lists onto the table to be sent in the items[] post variable. The table also has a delete button for every row so that the user may take out erroneously added equipment.
Here is the HTML file:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<form method="post">
<ul>
<li id="EquipmentSelector" >
<label for="EquipmentType">Equipment Type</label>
<div>
<select id="EquipmentType" name="EquipmentType">
<option value="" selected="selected"></option>
<option value="0" >Foo</option>
<option value="1" >Bar</option>
</select>
</div>
</li>
<li id = "FooHolder">
<label class="description" for="Foo">Foo</label>
<select id="Foo">
<option value="" selected="selected"></option>
<option value="0" >Foo Zero</option>
<option value="1" >Foo One</option>
<option value="2" >Foo Two</option>
<option value="3" >Foo Three</option>
</select>
<input type = "button" value = "Add Foo" id = "FooClick" ></input>
</li>
<li id = "BarHolder">
<label class="description" for="Bar">Bar</label>
<select id="Bar">
<option value="" selected="selected"></option>
<option value="0" >Bar Zero</option>
<option value="1" >Bar One</option>
<option value="2" >Bar Two</option>
<option value="3" >Bar Three</option>
</select>
<input type = "button" value = "Add Bar" id = "BarClick" ></input>
</li>
<li>
<table>
<tbody id = "addedItems">
</tbody>
</table>
</li>
<li>
<input type= "submit" id="saveForm" name="submit" value="Submit" />
</li>
</ul>
</form>
<script src = "IEerror.js"></script>
</body>
</html>
Here is the IEerror.js file:
function prepareEventHandlers(){
document.getElementById("EquipmentType").onchange = function(){
var equipType = document.getElementById("EquipmentType").value
if(equipType === "1"){
document.getElementById("BarHolder").style.display = "block";
document.getElementById("FooHolder").style.display = "none";
} else if(equipType === "0"){
document.getElementById("FooHolder").style.display = "block";
document.getElementById("BarHolder").style.display = "none";
}
}
document.getElementById("FooHolder").style.display = "none";
document.getElementById("BarHolder").style.display = "none";
function removeDiv() {
var parentId = $(this).parent().parent().attr("id");
$('#' + parentId).remove();
}
var myNum = 0;
function addItem(getFromId){
var addTag = document.getElementById("addedItems");
var addVariable = document.getElementById(getFromId).value;
var possibleId = getFromId + addVariable;
if(!document.getElementById(possibleId)){
var newTr = document.createElement("tr");
newTr.id = possibleId;
var myText = $('#'+ getFromId).find(":selected").text();
var newTd = document.createElement("td");
newTd.appendChild(document.createTextNode(myText));
newTr.appendChild(newTd);
addTag.appendChild(newTr);
var submissionInput = document.createElement("input");
submissionInput.name = "item[]";
submissionInput.type = "hidden";
submissionInput.value = myText;
newTd.appendChild(submissionInput);
var deleteInput = document.createElement("input");
deleteInput.type = "button";
deleteInput.value = "Delete";
deleteInput.id = myNum;
myNum += myNum;
deleteInput.onclick = removeDiv;
var deleteTd = document.createElement("td");
deleteTd.align = "right";
document.getElementById(possibleId).appendChild(deleteTd);
deleteTd.appendChild(deleteInput);
}
}
document.getElementById("BarClick").onclick = function(){
addItem("Bar");
};
document.getElementById("FooClick").onclick = function(){
addItem("Foo");
};
};
window.onload = function(){
prepareEventHandlers();
};
EDIT:
Here is a link to jsfiddle: http://jsfiddle.net/DTCav/xJVJR/1/
What a horrible code, but let's begin:
Validate your HTML. i.e. your <html> contains the HTML5 <header> rather then <head>
Why do you use native JS and jQuery through eachother? Why not stick to jQuery??
Anyway, my nitpicking <aside>, to fix your problem change your <table> code into:
<table>
<tbody id="addedItems">
</tbody>
</table>
This is because IE9 will make an empty <tbody> in an empty <table> and use this as table placeholder, you inject the <tr> and <td> tags straight into the <table>
Related
<select name = Colour id="Colour" onchange="check(this)">
<option value="Select Colour">Select platform</option>
<option>red</option>
<option>blue</option>
<option>orange</option>
<option>purple</option>
<option>pink</option>
</select>
</tr>
<td><label>Building</label></td>
<td><label>factory</label></td>
</tr>
<tr>
<td>
<input type="text" name = "Building" id="Building" >
<select id = "mass" style="display:none;">
</select></td>
<td><input type ="text" name ="Factory" id ="Factory">
<select id = "Platforms" style="display:none;"></select></td>
</tr>
</html>
`
when user click on the value of certain drop down for example red then the value for building and factory changes to drop down from text box . please help me to give values to building and factory drop downs.
Basically you are looking to add options to select list dynamically.
You can do it using javascript.
function check(s){
var c= s.options[s.selectedIndex].value;
const mass = document.querySelector("#mass");
const building = document.querySelector("#building");
if(c === "red") {
mass.style.display = "block";
building.style.display = "none";
mass.innerHTML = "<option>option 1</option><option>option 2</option>";
} else {
mass.style.display = "none";
building.style.display = "block";
mass.innerHTML = "";
}
}
#mass {
display: none;
}
<select onchange="check(this)">
<option></option>
<option>red</option>
<option>yellow</option>
</select>
<input type="text" id="building" />
<select id="mass"></option>
Here is my script, what my goal is if other is selected in select, the other text input beside it will be enabled, this is what i've got so far, any approach will be really appreciated, I have 4 questions like this and I want it to be modular, best approach for doing my function to be reuseable.. How do I properly do this without any problem posting my data as 2 name inputs will generate 2 post variables in php.. T_T
<script type="text/javascript" charset="utf-8">
function validate()
{
var ddl = document.getElementById("cause_pain");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "OTHER")
{
document.getElementsByClassName("causepain")[0].removeAttribute("name");
document.getElementsByClassName("causepain1")[0].removeAttribute("disabled");
}
}
</script>
<form action="test.php" method="GET">
<select class="select causepain" id="cause_pain" name="cause_pain" onchange="validate()">
<option value="" selected="selected">Select Cause of Pain</option>
<option value="ARTHRITIS">ARTHRITIS</option>
<option value="RHEUMATISM">RHEUMATISM</option>
<option value="OLD AGE">OLD AGE</option>
<option value="ACTIVE LIFESTYLE WHEN YOUNGER">ACTIVE LIFESTYLE WHEN YOUNGER</option>
<option value="OTHER">OTHER</option>
</select>
<input class="causepain1" type="text" id="cause_pain" name="cause_pain" size="40" onkeyup="clean('this.id')" disabled>
<input type="submit" id="submit"/>
</form>
This method is reusable and pretty straight forward. Using data attributes, you could specify the element that needs to be shown on the specific option element. Also before showing any input element hide the elements that were attributed to the previous selection.
Example:
<form action="test.php" method="GET">
<select class="select causepain" id="cause_pain" name="cause_pain">
<option value="" selected="selected">Select Cause of Pain</option>
<option value="ARTHRITIS">ARTHRITIS</option>
<option value="RHEUMATISM">RHEUMATISM</option>
<option value="OLD AGE">OLD AGE</option>
<option value="ACTIVE LIFESTYLE WHEN YOUNGER">ACTIVE LIFESTYLE WHEN YOUNGER</option>
<option value="OTHER" data-show="cause_pain_other">OTHER</option>
</select>
<input class="causepain1" type="text" id="cause_pain_other" name="cause_pain" size="40"
onkeyup="clean('this.id')" disabled style="display: none;">
<input type="submit" id="submit"/>
</form>
<script type="text/javascript" charset="utf-8">
var selectedOpt;
function selectionChanged(e) {
if (selectedOpt && selectedOpt.dataset.show) {
var showEl = document.getElementById(selectedOpt.dataset.show);
showEl.disabled = true;
showEl.style.display = 'none';
}
selectedOpt = this.querySelector('[value="'+e.target.value+'"]');
if (selectedOpt.dataset.show) {
var showEl = document.getElementById(selectedOpt.dataset.show);
showEl.disabled = false;
showEl.style.display = 'block';
}
}
document.querySelector('select').addEventListener('change', selectionChanged);
</script>
Your selectedOpt should be an object if you're using multiple selects on the same page and then just add the element to the object with the id as an index:
var selectedOpt = {};
...
selectedOpt[this.id] = this.querySelector('[value="'+e.target.value+'"]');
I have one Dropdown list it has some values and other option,when i select other option it shows textbox ,i have to enter some text into it ,so i want to add that value to dropdown lilst,so how can i solve this?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function CheckColors(val){
var element=document.getElementById('color');
if(val=='pick a color'||val=='others')
element.style.display='block';
else
element.style.display='none';
}
</script>
</head>
<body>
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;'/>
</body>
</html>
Add a button, get select value to check if it's others or pick / display the button according to it.
To add a new element, create an option and add it inside the select with x.add(option);
function CheckColors(){
var element = document.getElementById("mySelect");
var element2 = document.getElementById("color");
var element3 = document.getElementById("addColor");
if(element.value =='pick a color'|| element.value =='others'){
element2.style.display='block';
element3.style.display='block';
}
else {
element2.style.display='none';
element3.style.display='none';
}
}
function addValue(){
var textToAdd = document.getElementById("color").value;
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = textToAdd;
x.add(option);
}
https://jsfiddle.net/7woyyw4h/
Please check below code hope it will helpful for you.
<script>
$(document).ready(function(){
$('#btnAddToBegining').click(function(){
var data = $("#txtAdd").val();
$("#ddlList").prepend("<option value='0' selected='selected'>"+ data +" </option>");
});
$('#btnAddToEnd').click(function(){
var data = $("#txtAdd").val();
$("<option value='6'>" + data +"</option>").appendTo("#ddlList");
});
});
</script>
<select id="ddlList">
<option value="1">ASP.NET</option>
<option value="2">C#</option>
<option value="3">VB.NET</option>
<option value="4">HTML</option>
<option value="5">jQuery</option>
</select>
<input type="text" id="txtAdd" />
<br/><br/>
<input type="button" id="btnAddToBegining" Value="Add Item to Begining" />
<input type="button" id="btnAddToEnd" Value="Add Item to End" />
I have a VM file with the following codes:
UPDATED:
<html>
<head>
<title>Input Form</title>
<style>
#FW{
display: none;
}
</style>
<script type="text/javascript">
function showSelect()
{
var post = document.getElementById('post');
var fwork = document.getElementById('FW');
fwork.style.display = post.selectedIndex == 1 ? 'block' : 'none';
}
function getMeThere(){
var post = document.getElementById('post');
var fwork = document.getElementById('frwork');
if( post.value.toString() == "dpost"){
document.forms["adform"].action="https://google.com" ;
document.forms["adform"].method="post" ;
}
else{
if(fwork.value.toString() == "wap"){
document.forms["adform"].action="https://mail.yahoo.com" ;
document.forms["adform"].method="post" ;
}
else {
document.forms["adform"].action="bbc.co.uk" ;
document.forms["adform"].method="post" ;
}
}
document.forms["adform"].submit() ;
}
</script>
</head>
<body>
<form name="forum" id="adform" >
<label>Payment Amount:</label>
<input type = "text" name="paymentAmount" value=""/>
<label> Reference:</label>
<input type = "text" name="Reference" value=""/><br />
<label>Choose post</label><br/>
<select name="postCode" onchange="showSelect()" id = "post">
<option value="dpost">Desktop post</option>
<option value="mpost">Mobile post</option>
</select><br/>
<div id = "FW">
<label>Choose Your Toolkit</label><br/>
<select name="frwork" id = "frwork">
<option id=""></option>
<option id="jqm">jQuery Mobile</option>
<option id = "wap">Webapp-Net</option>
<option id = "tst">a Test</option>
</select>
</div>
<input type="submit" onclick="getMeThere()"/>
</form>
</body>
The redirection doesn't work at all, and I can't seem to find the problem. please notice that the URLs are fake, because I could post the real URL due to security issues.
Typo? it would work if you changed:
document.forms[this].action
to
document.forms["adform"].action
Edit
You also have var fwork = document.getElementById('FW');then later fwork.value.toString() but FW is a DIV not the SELECT.
Change the select to <select id="frwork" name="frwork"> and read it with var fwork = document.getElementById('frwork');
Edit 2
Your fwork.value.toString() == "wap" will never be true as the only occurence of "WAP" is <option id = "wap">w-Net</option> which is not a .value.
Change the HTML to:
<select name="frwork" id = "frwork">
<option value=""></option>
<option value="jqm">jQuery Mobile</option>
<option value = "wap">Webapp-Net</option>
<option value = "tst">a Test</option>
</select>
And to read the selected value replace:
if (fwork.value.toString() == "wap") {
with:
if (fwork.options[fwork.selectedIndex].value == "wap") {
i have two radio buttons: in-campus and off-campus. when in-campus is selected the dropdown will have some options and when off-campus is selected there will be a different set of options. how can i do this in javascript?
i'm trying to use this. i have this code
function setInCampus(a) {
if(a == "true") {
setOptions(document.form.nature.options[document.form.nature.selectedIndex].value) }
}
function setOptions(chosen)
{
//stuff
}
it won't work. what's wrong?
First of all, make form usable and accessible even with JavaScript is disabled. Create an HTML markup that contains the dropdown lists for the radio buttons.
Then when JavaScript is enabled, hide element the dropdown elements on document load, and attach and event handler to radio buttons, so when of one them was checked, toggle visibility of the proper dropdown list.
<form>
<input type="radio" onclick="campus(0)" value="On" id="campus_on" />
<label for="campus_on" />
<input type="radio" onclick="campus(1)" value="off" />
<label for="campus_off" />
<select id="some_options">
</select>
</form>
<script>
function campus(type) {
document.getElementById('some_options').innerHTML = type ?
'<option>option 1</option><option>option 2</option>'
:
'<option>option 3</option><option>option 4</option>';
}
}
</script>
<form name="form" id="form" action="">
<input type="radio" id="radioButton1" name="radioButton" value="in-campus" />
<label for="radioButton1">in-campus</label>
<input type="radio" id="radioButton2" name="radioButton" value="of-campus" />
<label for="radioButton2">off-campus</label>
<select name="noOptions" id="noOptions" style="display: none">
<option value="Choose an Option" selected="selected">Choose an Option</option>
</select>
<select name="icOptions" id="icOptions" style="display: none">
<option value="Choose an Option" selected="selected">Choose an in-campus option</option>
<option value="icOption1">in-campus option 1</option>
<option value="icOption2">in-campus option 2</option>
</select>
<select name="ocOptions" id="ocOptions" style="display: none">
<option value="Choose an Option" selected="selected">Choose an off-campus option</option>
<option value="ocOption1">off-campus option 1</option>
<option value="ocOption2">off-campus option 2</option>
</select>
<select name="allOptions" id="allOptions" style="display: block">
<option value="Choose an Option" selected="selected">Choose an Option</option>
<option value="icOption1">in-campus option 1</option>
<option value="icOption2">in-campus option 2</option>
<option value="ocOption1">off-campus option 1</option>
<option value="ocOption2">off-campus option 2</option>
</select>
</form>
<script>
window.document.getElementById("noOptions").style.display = "block";
window.document.getElementById("allOptions").style.display = "none";
function changeOptions() {
var form = window.document.getElementById("form");
var icOptions = window.document.getElementById("icOptions");
var ocOptions = window.document.getElementById("ocOptions");
window.document.getElementById("noOptions").style.display = "none";
if (form.radioButton1.checked) {
ocOptions.style.display = "none";
icOptions.style.display = "block";
icOptions.selectedIndex = 0;
} else if (form.radioButton2.checked) {
icOptions.style.display = "none";
ocOptions.style.display = "block";
ocOptions.selectedIndex = 0;
}
}
window.document.getElementById("radioButton1").onclick = changeOptions;
window.document.getElementById("radioButton2").onclick = changeOptions;
</script>
Radio buttons can have an onClick handler.
<INPUT TYPE="radio" NAME="campustype" VALUE="incampus" onClick="setInCampus(true)">in-campus
<INPUT TYPE="radio" NAME="campustype" VALUE="offcampus" onClick="setInCampus(false)">off-campus
You could just define both 's in the code, and toggle visibility with javascript.
Something like this:
<html>
<head>
<script type="text/javascript">
function toggleSelect(id)
{
if (id == 'off')
{
document.getElementById('in-campus').style['display'] = 'none';
document.getElementById('off-campus').style['display'] = 'block';
}
if (id == 'in')
{
document.getElementById('off-campus').style['display'] = 'none';
document.getElementById('in-campus').style['display'] = 'block';
}
}
</script>
</head>
<body>
<select id='in-campus'>
<option>a</option>
</select>
<select id='off-campus' style='display: none;'>
<option>b</option>
</select>
<br />
<input type='radio' name='campustype' value='in' onclick="toggleSelect('in');" checked='1' /><label for='incampus'>In-campus</label><br />
<input type='radio' name='campustype' value='off' onclick="toggleSelect('off');" /><label for='offcampus'>Off-campus</label>
</body>
</html>
A prettier variant of this approach would not require support for javascript, it would gracefully fallback on basic html.
if you need to fetch the options from a database or something, you might consider using AJAX.
<html>
<head>
<script language="javascript">
var current = false;
function onChange()
{
var rad = document.getElementById("radIn").checked;
if(rad == current)
return;
current = rad;
var array = rad ? ["in1","in2","in3","in4","in5"] :
["out1","out2","out3","out4","out5"];
var sel = document.getElementById("dropDown");
sel.innerHTML = "";
var opt;
for each(var k in array)
{
//alert(k + " asdsd");
opt = document.createElement("option");
opt.innerHTML = k;
sel.appendChild(opt);
}
}
</script>
</head>
<body onload="onChange();">
<input type="radio" value="in" name="campus" onclick="onChange()"
id="radIn" checked="true"/>
<label for="radIn">In Campus</label>
<br/>
<input type="radio" value="out" name="campus" onclick="onChange()"
id="radOut"/>
<label for="radOut">Out Campus</label>
<br/>
<select id="dropDown"/>
</body>
</html>