We will have a set of records where the user will select what color they want that section to be. As you can see I'm duplicating script code so that I can change the colors of a div. This value will be stored in mysql and retrieved when the user access the page again. Is there a way to format this code so that it's not duplicated 500 times? Thank you for your help. --newbie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<style type="text/css">
#full {
background-color: #ffffff;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$(".theme").change(function()
{var background = $("#color1").val();
$("#full").css("background-color", background);
});
$(".theme2").change(function()
{var background = $("#color2").val();
$("#full2").css("background-color", background);
});
$(".theme3").change(function()
{var background = $("#color3").val();
$("#full3").css("background-color", background);
});
});
});//]]>
</script>
<link rel="stylesheet" href="css/color_picker.css" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.colorpicker.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
$('#color1').colorPicker({showHexField: false});
$('#color2').colorPicker({showHexField: false});
});
</script>
</head>
<body>
<body >
<label for="color">Color :</label> </td><td>
<div id="full">
<form method="post" action="">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div id="full2" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme2"/>
</div>
<div id="full3" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme3"/>
</div>
</form>
</body>
instead of using Id's, you can use classes like full and theme, so your html for any given set would look like
<form method="post" action="">
<div class="full">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme"/>
</div>
</form>
Then your javascript would look like
$('.theme').change(function() {
var $this = $(this);
var background= $this.val();
$this.closest('.full').css("background-color", background);
})
edit: fixed bug, changed from parent to closest so that .full doesn't have to be a direct parent of the input.
You can achieve this with a simple for loop.
If the number of colors is not static you can use the jquery "starts with" selector to get all of the elements and then take the length.
$(window).load(function(){
$(document).ready(function(){
//if the count is static you can just hardcode it
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
$(".theme").change(function()
{
var background = $(color).val();
$(full).css("background-color", background);
});
}
});
});
Below is a working snippet. There were some issues with your HTML, and I'm not sure if you were setting the .change() event intentionally, but for the demo I just changed it directly.
$(window).load(function(){
$(document).ready(function(){
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
var background = $(color).val();
$(full).css("background-color", background);
}
});
});
.color-box {
background-color: #ffffff;
border: solid 2px black;
min-height: 30px;
margin: 5px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<label for="color">Color :</label>
<form method="post" action="">
<div id="full" class="color-box">
<input id="color1" type="hidden" name="color1" value="lightblue" class="theme"/>
</div>
<div id="full2" class="color-box">
<input id="color2" type="hidden" name="color2" value="#226666" class="theme2"/>
</div>
<div id="full3" class="color-box">
<input id="color3" type="hidden" name="color3" value="rgba(140,15,110,.6)" class="theme3"/>
</div>
</form>
Related
After click on submit button I get the result in innerhtml. I need to copy the results using the copy button. Please help me out....
Script mentioned below :enter link description here
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.form-row{
margin-bottom:18px;
}
div {
background-color: lightblue;
width: 650px;
padding: 35px;
}
<!--<div> I don't think that you really want this here -->
</style>
</head>
<body>
<script type="text/javascript">
function getDisplay(){
var items=document.getElementsByName('acs');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
}
function getclear(){
document.getElementById("display").innerHTML = "";
var items = document.getElementsByName('acs');
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox') items[i].checked = false;
}
}
</script>
<div id="whole">
<font size="4">Profile Edited :</font>
<p>
<input type="checkbox" name="acs" value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
<input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
<input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
<input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
</p>
<p>
<button onclick="getDisplay();" style="height:30px; width:100px" >Submit</button>
<button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
<button onclick="getCopy();" style=" height:30px; width:100px" >Copy</button>
</p>
</div>
<font size="5">Notes:</font>
<div id="display"></div>
</body>
</html>
It is a bit tricky, because as it is not a TextElement you can not select() it as a text.
So what we do here is to get the innerText of the div element, then we create a Textarea element an we append the value, then we can select() it and copy it to the clipboard, here you have the working code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.form-row{
margin-bottom:18px;
}
div {
background-color: lightblue;
width: 650px;
padding: 35px;
}
<!--<div> I don't think that you really want this here -->
</style>
</head>
<body>
<script type="text/javascript">
function getDisplay(){
var items=document.getElementsByName('acs');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
}
function getclear(){
document.getElementById("display").innerHTML = "";
var items = document.getElementsByName('acs');
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox') items[i].checked = false;
}
}
function copyToClipBoard() {
var str = document.getElementById('display').innerText;
var el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
</script>
<div id="whole">
<font size="4">Profile Edited :</font>
<p>
<input type="checkbox" name="acs" value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
<input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
<input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
<input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
</p>
<p>
<button onclick="getDisplay();" style="height:30px; width:100px" >Submit</button>
<button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
<button onclick="copyToClipBoard();" style=" height:30px; width:100px" >Copy</button>
</p>
</div>
<font size="5">Notes:</font>
<div id="display"></div>
</body>
</html>
Ok, I think this is what you want...
Javascript:
function copyToClipboard() {
document.querySelector('#display').select();
document.execCommand('copy');
}
And I couldn't figure out how to take it from anything but an input, so if you do this, and then style the input with no borders so it doesn't look like an input...
<button id="copyToClipboard" onclick="copyToClipboard()" style=" height:30px; width:100px" >Copy</button>
<input id = "display" name="exampleClipboard" style="width:500px; border: none;" type="text">
I played around with the first answer and couldn't get it to work for me either. So I tried it this way. Note: I'm giving you a function that creates a dialog for testing. The actual function is shown below. But I switched to a textarea instead of a div which may not be quite what you want.
function innerHtmlTest() {
var html='<textarea rows="2" cols="40" id="display" style="border:none;">This is just a text string.</textarea>';
html+='<br /><input type="button" value="Copy" onClick="getHtml();" />';
html+='<br /><textarea rows="2" cols="40" id="dsply" placeholder="Paste Here"></textarea>';
html+='<script>function getHtml(){ document.getElementById("dsply").select();document.execCommand("copy");}</script>';
var userInterface=HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModelessDialog(userInterface, "Copy");
}
function getHtml(){
document.getElementById("display").select();
document.execCommand("copy");
}
So perhaps you would like to change to a text area instead of a div. I use this technique with text boxes a lot but never tried it before with a div.
i need to do six checkboxes for one image , and this image need to change if one or more checkboxes is cheked , how i can do it? please help me , i attach my code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<img src="img/fotodiente/1.jpg" width="78" height="107" alt="1" id="diente1" onclick="changeImage1()"/>
<form name="form1" onsubmit="checkBoxValidation()">
<p><input type="checkbox" name="chbdiente1" value="1"/>Vestibular</p>
<p><input type="checkbox" name="chbdiente1" value="2"/>Mesial</p>
<p><input type="checkbox" name="chbdiente1" value="3"/>Oclusal</p>
<p><input type="checkbox" name="chbdiente1" value="4"/>Distal</p>
<p><input type="checkbox" name="chbdiente1" value="5"/>Palatino</p>
<p><input type="checkbox" name="chbdiente1" value="6"/>Lingual</p>
<p><input type="submit" value="submit"/>
</form>
<%String chbdiente1[] = request.getParameterValues("chbdiente1");
if (chbdiente1 != null) {%>
<script>
function changeImage1() {
var image = document.getElementById('diente1');
image.src = "img/fotodiente/1.1.jpg";
}
;
</script>
<ul><%for (int i = 0; i < chbdiente1.length; i++) {%>
<li><%=chbdiente1[i]%></li><%}%>
</ul><%}%>
</body>
</html>
i have this code and send me the value of selected checkboxes , but the image not change. help please. thanks
If you want to change the image after click of checkboxes you need to call changeImage1() into onchange or onclick method of checkbox.
Example:
<script>
$('document').ready(function(){
$('input[type="checkbox"]').click(function(){
changeImage1();
});
});
function changeImage1() {
var image = document.getElementById('diente1');
image.src = "img/fotodiente/1.1.jpg";
}
</script>
function changeImage1() {
var image = document.getElementById('diente1');
var checkboxes = document.getElementById("form1");
var cont = 0;
try {
for (var x = 0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
} catch (e) {
}
try {
if (cont > 0) {
image.src = "img/fotodiente/1.1.jpg";
d1 = 2;
array.push("Pieza 1");
var chb2 = document.getElementsByName("form1");
} else if (cont === 0) {
image.src = "img/fotodiente/1.jpg";
d1 = 1;
array.splice(1, 1);
}
} catch (e) {
}
}
;
<img src="img/fotodiente/1.jpg" class="item_thumb" width="78" height="107" alt="1" id="diente1" onclick="changeImage1()"/>
<form id="form1" method="post" action="">
<input type="checkbox" id="chbdiente1" value="1" onclick="changeImage1();" /><label>Vestibular</label>
<input type="checkbox" id="chbdiente1" value="2" onclick="changeImage1();" /><label>Mesial</label>
<input type="checkbox" id="chbdiente1" value="3" onclick="changeImage1();" /><label>Oclusal</label>
<input type="checkbox" id="chbdiente1" value="4" onclick="changeImage1();" /><label>Distal</label>
<input type="checkbox" id="chbdiente1" value="5" onclick="changeImage1();" /><label>Palatino</label>
<input type="checkbox" id="chbdiente1" value="6" onclick="changeImage1();" /><label>Lingual</label>
<input type="button" name="Submit" value="Contar" hidden="">
</form>
Well, this changes the image when there are 1 or more checkboxes clicked, if all the checkboxes are unchecked the image returns to the first one.
I hope also I can help others and thanks
Hi I am trying to change the background style color of my div tag when the input matches one of the values in my list that I have, and when it doesn't, I want to create a div tag and append the missing value to the bottom of my list because it did not match.
I searched around and found this thread and used the same methods proposed, but no luck. Here is my attempt with my external js script:
function searchList()
{
var input = document.getElementById("search").value;
if ((input == "")||(input == null))
{
alert ('Error', 'values missing');
}
var childDivs = document.getElementById('courselist').getElementsByTagName('div');
for (i = 0; i < childDivs.length; i++)
{
var childDiv = childDivs[i];
if (input = childDiv)
{
document.getElementById("container").style.backgroundColor = yellow;
document.getElementById("courselist").style.backgroundColor = yellow;
}
else if (input != childDiv)
{
var div = document.createElement("div");
div.innerHTML = input;
document.courselist.appendChild(div);
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> Work</title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div> Machine Learning </div>
<div> Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
What is correct way to change the style of a div with a function and to append a new div with javascript? Thanks in advance!
yellow should be a string and you need to find the correct element withing the page
function searchList()
{
var input = document.getElementById("search").value;
if ((input == "")||(input == null))
{
alert ('Error', 'values missing');
}
var childDivs = document.getElementById('courselist').getElementsByTagName('div');
for (i = 0; i < childDivs.length; i++)
{
var childDiv = childDivs[i];
if (input === childDiv)
{ if(input === 'Machine Learning'){
document.getElementById("#courselist").find('.machineLearning').style.backgroundColor = 'yellow';
}
}
else if (input != childDiv)
{
var div = document.createElement("div");
div.innerHTML = input;
document.courselist.appendChild(div);
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> Work</title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div class = 'machineLearning'> Machine Learning </div>
<div> Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Pass yellow as string, as there is no yellow variable holding value
Test the Element.textContent property, not the element itself or else result will always be false
Break the loop if value is found
Keep a variable to test value is found, else append the element
Use document.getElementById('courselist') instead of document.courselist to access the element
Use return false; in function to prevent form submission
function searchList() {
var input = document.getElementById("search").value;
if ((input == "") || (input == null)) {
return alert('Error', 'values missing');
}
var childDivs = document.getElementById('courselist').getElementsByTagName('div');
var found = false;
for (i = 0; i < childDivs.length; i++) {
var childDiv = childDivs[i];
if (input == childDiv.textContent) {
document.getElementById("container").style.backgroundColor = 'yellow';
document.getElementById("courselist").style.backgroundColor = 'yellow';
found = true;
break;
}
}
if (!found) {
document.getElementById("container").style.backgroundColor = '';
document.getElementById("courselist").style.backgroundColor = '';
//If you want to remove the `backgroundColor`
var div = document.createElement("div");
div.innerHTML = input;
document.getElementById('courselist').appendChild(div);
}
return false;
}
fieldset {
border: 0px;
}
#courselist {
width: 300px;
}
#courselist div {
border: 1px black solid;
padding: 10px;
}
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name
<br />
<input type="text" id="search" size="20" />
<br />
<input type="submit" value="Search List" id="sub" />
<br />
<br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div>Machine Learning</div>
<div>Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II</div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
I have been trying to get a function working with JQuery to add or remove form input text fields. I have been using an example I found as a starting point.
Here is what I have so far.,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml`enter code here`1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function valid_to(txt1id) {
var toval = document.getElementById(txt1id).value;
if(toval == "") {
alert("Text Field1 is Empty");
document.getElementById(txt1id).focus();
return false;
}
}
function calc_from(txt2id) {
if(document.getElementById(txt2id).value == "") {
alert("Text Field2 is Empty");
document.getElementById(txt2id).focus();
return false;
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var max = 10, append_data, tabindex = 23;
/*If the add icon was clicked*/
$(".add").live('click',function(){
var divid = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
var id = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
if($("div[id^='txt_']").length <10){ //Don't add new textbox if max limit exceed
$(this).remove(); //remove the add icon from current text box
var tabindex2 = parseInt(tabindex)+1;
var append_data = '<div id="txt_'+divid+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="txt1_'+id+'" name="txt1_'+id+'" class="medium_input" dir="rtl" style="width:94px;" readonly="true" tabindex="'+tabindex+'" onblur="valid_to(this.id);"/><input type="text" id="txt2_'+id+'" name="txt2'+id+'" class="medium_input" dir="rtl" style="width:94px;" maxlength="5" tabindex="'+tabindex2+'" onblur="calc_from(this.id);"/></div><span class="right" style="float: left; margin-left: 7px; margin-top: 7px;"><img src="add.png" class="add"/> <img src="remove.png" class="remove"/></span></div>';
$("#text_boxes").append(append_data); //append new text box in main div
$("#txt_"+divid).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
divid++;
id = parseInt(id)+1;
tabindex = parseInt(tabindex)+2;
} else {
alert("Maximum 100 textboxes are allowed");
}
document.getElementById("txt_rowcnt").value=parseInt(divid)-parseInt(1);
})
/*If remove icon was clicked*/
$(".remove").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //previous div id of this text box
$(this).parents().eq(1).slideUp('medium',function() { $(this).remove(); //remove this text box with slide up
if($("div[id^='txt_']").length > 1){
append_data = '<img src="remove.png" class="remove"/>'; //Add remove icon if number of text boxes are greater than 1
}else{
append_data = '';
}
if($(".add").length < 1){
$("#"+prev_obj+" .right").html('<img src="add.png" class="add"/> '+append_data);
document.getElementById("txt_rowcnt").value=parseInt(document.getElementById("txt_rowcnt").value)-parseInt(1);
}
});
})
});
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data" >
<table>
<tr>
<td> Textboxes </td>
</tr>
<tr>
<td>
<div id="text_boxes">
<div id="txt_1" class="txt_div">
<div class="left">
<input type="text" name="txt1_1" id="txt1_1" tabindex="21" onblur="valid_to(this.id);" />
<input type="text" name="txt2_1" id="txt2_1" tabindex="22" onblur="calc_from(this.id);"/>
<span class="right" style="margin-top:7px;"> <img src="add.png" class="add"/> </span>
</div>
</div>
</div>
</td>
</tr>
<input type="hidden" name="txt_rowcnt" id="txt_rowcnt" value="1" />
</table>
</form>
</body>
</html>
What I am confused about is why, when I look at the page in the browser.
I can see two text fields with add image button but when I click add button it hides away instead getting new rows with add and remove button.
Can someone enlighten me on this?
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml`enter code here`1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery1.9.1.js"></script>
</head>
<script type="text/javascript">
function valid_to(txt1id) {
var toval = document.getElementById(txt1id).value;
if(toval == "") {
alert("Text Field1 is Empty");
document.getElementById(txt1id).focus();
return false;
}
}
function calc_from(txt2id) {
if(document.getElementById(txt2id).value == "") {
alert("Text Field2 is Empty");
document.getElementById(txt2id).focus();
return false;
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var max = 10, append_data, tabindex = 23;
/*If the add icon was clicked*/
$(".add").click(function(){
alert('test');
var divid = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
var id = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
if($("div[id^='txt_']").length <10){ //Don't add new textbox if max limit exceed
$(this).remove(); //remove the add icon from current text box
var tabindex2 = parseInt(tabindex)+1;
var append_data = '<div id="txt_'+divid+'" class="txt_div" style="display:block;"><div class="left"><input type="text" id="txt1_'+id+'" name="txt1_'+id+'" class="medium_input" dir="rtl" style="width:94px;" readonly="true" tabindex="'+tabindex+'" onblur="valid_to(this.id);"/><input type="text" id="txt2_'+id+'" name="txt2'+id+'" class="medium_input" dir="rtl" style="width:94px;" maxlength="5" tabindex="'+tabindex2+'" onblur="calc_from(this.id);"/></div><span class="right" style="float: left; margin-left: 7px; margin-top: 7px;"><img src="add.png" class="add"/> <img src="remove.png" class="remove"/></span></div>';
$("#text_boxes").append(append_data); //append new text box in main div
//$("#txt_"+divid).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
divid++;
id = parseInt(id)+1;
tabindex = parseInt(tabindex)+2;
} else {
alert("Maximum 100 textboxes are allowed");
}
document.getElementById("txt_rowcnt").value=parseInt(divid)-parseInt(1);
})
/*If remove icon was clicked*/
$(".remove").click(function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //previous div id of this text box
$(this).parents().eq(1).slideUp('medium',function() { $(this).remove(); //remove this text box with slide up
if($("div[id^='txt_']").length > 1){
append_data = '<img src="remove.png" class="remove"/>'; //Add remove icon if number of text boxes are greater than 1
}else{
append_data = '';
}
if($(".add").length < 1){
$("#"+prev_obj+" .right").html('<img src="add.png" class="add"/> '+append_data);
document.getElementById("txt_rowcnt").value=parseInt(document.getElementById("txt_rowcnt").value)-parseInt(1);
}
});
})
});
</script>
<body>
<form method="post" action="" enctype="multipart/form-data" >
<table> <tr>
<td> Textboxes </td> </tr>
<tr> <td> <div id="text_boxes">
<div id="txt_1" class="txt_div">
<div class="left">
<input type="text" name="txt1_1" id="txt1_1" tabindex="21" onblur="valid_to(this.id);" />
<input type="text" name="txt2_1" id="txt2_1" tabindex="22" onblur="calc_from(this.id);"/>
<span class="right" style="margin-top:7px;"> <img src="add.png" alt="add" class="add"/> </span>
</div> </div> </div> </td>
</tr>
<input type="hidden" name="txt_rowcnt" id="txt_rowcnt" value="1" />
</table>
</form>
</body>
</html>
I have the following lines of js
var select_container = "container_"+parts[2];
var get_container = document.getElementById(select_container);
The function this is part of is failing and when I look in firebug it returns get_container as undefined. I have checked select_container is the correct value and that there isn't a duplicate id on page.
This is called by an onclick event so I can't see waiting for the page to load being an issue (the result is same no matter how long I wait).
revelent html example:
<div id="container_0">
I'm stumped!
edit
This is all the Javascript from the parent functions
/*detects links in the form editor and uses them to adjust the layout*/
window.onload = function () {
clickDetection();
} /*detect clicks on interesting links*/
function clickDetection() {
var canvas = document.getElementById("content");
var dumbLinks = canvas.getElementsByTagName("a");
for (var i = 0; i < dumbLinks.length; i++) {
dumbLinks[i].onclick = function () {
clickRoute(this);
return false
};
}
} /*reroute click behaviour to correct function*/
function clickRoute(link_object) {
var linkId = link_object.getAttribute("id");
var linkParts = linkId.split("_");
if (linkParts[1] == "delete") {
delete_route(linkParts);
} else if (linkParts[1] == "new") {
new_route(linkParts);
}
}
function delete_route(parts) {
alert(parts);
if (parts[0] == "field") {
var select_container = "container_" + parts[2];
var get_container = document.getElementById(select_container);
document.removeChild(get_container);
} else if (parts[0] == "option") {
alert("delete a option");
}
}
full (typical) html (please note repeating sections have been cut for length and other details changed for secuity):
<!DOCTYPE HTML>
<html>
<head>
<!-- determines header content -->
<meta charset="utf-8" />
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<script type="text/javascript" src="some.js"></script>
<title>Title of the document</title>
</head>
<body>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav linke</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div id="content">
<h1>screen name</h1>
<form method="post" action="#this">
<label for="summary">Select an item to edit:<br></label>
<select name="summary" id="summary">
<option value="generic">generic</option>
<option value="updated">updated</option>
</select>
<input type="submit" name="summary_select" value="Select">
</form>
<h2>screen name</h2>
<div id="container_7">
<form method="post" action="#this">
<fieldset><legend>existing segment</legend>
<p><a id="field_delete_7" href="#">Delete field</a></p>
<label for="name_7">Field Name</label><input type=text id="name_7" name="name" value="Colour"><br>
<label for="type_7">Data type expected</label>
<select name="type" id="type_7">
<option value="name" >Name</option>
<option value="email" >Email Address</option>
<!-- cut for length -->
</select>
<p>Some text</p>
<label for="option_7_0">Option Value</label><input type=text id="option_7_0" name="option_7_0" value="Red">
<a id="option_delete_7_0" href="#">Delete option</a><br>
<label for="option_7_1">Option Value</label><input type=text id="option_7_1" name="option_7_1" value="Green">
<a id="option_delete_7_1" href="#">Delete option</a><br>
<label for="option_7_2">Option Value</label><input type=text id="option_7_2" name="option_7_2" value="Blue">
<a id="option_delete_7_2" href="#">Delete option</a><br>
<a id="option_new_7" href="#">Add new option</a>
<input type="submit" name="detail" value="Finish"></fieldset></form></div>
<p><a id="field_new" href="#">Add new field</a></p>
</div>
<!-- determines footer content -->
footer content
</body>
</html>
Change this:
document.removeChild(get_container);
to this:
get_container.parentNode.removeChild(get_container);
or if the containers are a direct descendant of body, then you could do this:
document.body.removeChild(get_container);