JavaScript - Editable <select> Box In Html Using Script

Hello all,

I have a form which contains some fields like company_name, address, phone, email etc.

Also, I have a database with companies. I want that, when typing the beginning of the company name, a combo box to suggest all companies that match that text. I want that when a company is selected from the combo, all other textboxes to be filled with the correct info from the database. Also, I want that the user to be able to write a company that is not registered in the database.

What I have done until now:
For the editable combo I used the dhtmlxcombo from he http://dhtmlx.com/docs/products/dhtmlxCombo/ (Filtering mode: (filter existing list)). I'm not a scripting expert, so I think I cannot build this combo all by myself.

I modified just one thing. At the begining, the dhtmlxcombo.js file contained something like this:
Code:

if (tab)z.tabIndex=tab;z.style.width = (width-19)+'px';self.DOMelem.appendChild(z);self.DOMelem_input = z;z = document.createElement('input');z.type = 'hidden';z.name = name;self.DOMelem.appendChild(z);self.DOMelem_hidden_input = z;z = document.createElement('input');z.type = 'hidden';z.name = (name||"").replace(/(\]?)$/, "_new_value$1");z.value="true";self.DOMelem.appendChild(z);self.DOMelem_hidden_input2 = z

I added z.id='dest_company';, so the file looks something like this, now:
Code:

if (tab)z.tabIndex=tab;z.style.width = (width-19)+'px';self.DOMelem.appendChild(z);z.id='dest_company';self.DOMelem_input = z;z = document.createElement('input');z.type = 'hidden';z.name = name;self.DOMelem.appendChild(z);self.DOMelem_hidden_input = z;z = document.createElement('input');z.type = 'hidden';z.name = (name||"").replace(/(\]?)$/, "_new_value$1");z.value="true";self.DOMelem.appendChild(z);self.DOMelem_hidden_input2 = z};dhtmlXCombo_defaultOption.prototype._DrawHeaderButton = function(self, name, width)

The text field 'dest_company' is generated like this:
PHP Code:
    <select name="dest_company" id="dest_company" OnChange="SelectReceiver(document.comanda.dest_company.value);"  style="width:206px;" tabindex="10">
    <?php echo '
        <option value=""></option>';
        
        $address_result = mysql_query("SELECT * FROM `webdb_".$_COOKIE['user']."` ORDER BY companie ASC");
        while($row = mysql_fetch_array($address_result))
            {
            echo '<option value="'.$row['id'].'">'.$row["companie"].'</option>';
            }
    echo '
    </select>
    
    <script>
        var z = dhtmlXComboFromSelect("dest_company");
        z.enableFilteringMode(true);
        </script>';
        ?>

This is the SelectReceiver() function:
Code:

function SelectReceiver(id_dest)
{
if (id_dest=="")
  {
  document.getElementById("contact_destinatar").value="";
  document.getElementById("adresa_destinatar").value="";
  document.getElementById("oras_destinatar").value="";
  document.getElementById("judet_destinatar").value="";
  document.getElementById("zip_destinatar").value="";
  document.getElementById("telefon_destinatar").value="";
  document.getElementById("mail_destinatar").value="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    //document.getElementById("detalii_destinatar").innerHTML=xmlhttp.responseText;
    var response = eval(xmlhttp.responseText);
    }
  }
xmlhttp.open("GET","modifica_detalii_destinatar.php?q="+id_dest,true);
xmlhttp.send();
}

And the file modifica_detalii_destinatar.php looks like this:
PHP Code:
<?php
$q=$_GET["q"];

include ('conectare.php');

$sql="SELECT * FROM `webdb_".$_COOKIE['user']."` WHERE id='".$q."'";

$result = mysql_query($sql);


while($row = mysql_fetch_array($result))
  {
  echo '
        
        document.getElementById("contact_destinatar").value = "'.$row['contact'].'";
        document.getElementById("adresa_destinatar").value = "'.$row['adresa'].'";
        document.getElementById("oras_destinatar").value = "'.$row['oras'].'";
        document.getElementById("judet_destinatar").value = "'.$row['judet'].'";
        document.getElementById("zip_destinatar").value = "'.$row['zip'].'";
        document.getElementById("telefon_destinatar").value = "'.$row['telefon'].'";
        document.getElementById("mail_destinatar").value = "'.$row['mail'].'";
        
  ';
    }
?>

All this is working just in Firefox. In IE, when I select a company from the combo box, an error is generated and no text box is completed with the correct data. The error I'm talking about is:
Code:

'document.comanda.compania_destinatar.value' is null or not an object

In Firefox, if I inspect element with Firebug, my select looks like this:
Code:

<div style="width: 204px;" class="dhx_combo_box ">
    <input type="text" autocomplete="off" class="dhx_combo_input" tabindex="10" style="width: 185px;" id="companie_dest">
    <input type="hidden" name="dest_company" value="45">
    <input type="hidden" name="dest_company" value="false">
    <img class="dhx_combo_img" src="codebase_xcombo/imgs/combo_select.gif">
</div>

Any help on this would be great.
Many thanks and best regards!

Hi,
"I need editable table with calculations in javascript"
"I have a table in that table i have 4 column like
mark1,mark2 and total. if i give input to that specific
cell the total is automatically calculate. Please send any code
or any related links". I tried below code...

<html>
<head>
<title>sample dynamic select list</title>
<script language='javascript'>
function changeContent(tablecell)
{ //alert(tablecell.firstChild.nodeValue);
tablecell.innerHTML = "<INPUT type=text name=newname onBlur=\"javascript:submitNewName(this);\" value=\""+tablecell.innerHTML+"\">";
var u1=document.getElementById('m1').value;
var u2=document.getElementById('m2').value;
res=u1*u2;
document.getElementById('t').innerHTML=res;
tablecell.firstChild.focus();
}
function submitNewName(textfield)
{//alert(textfield.value);
textfield.parentNode.innerHTML= textfield.value;
// textfield.parentNode.innerHTML= res;
}
</script>
</head>
<body>
Double click on any cell. Then enter your own text and then tab out or click on other place.
<table border=1 bgcolor=gray>
<tr>
<th onDblClick="javascript:changeContent(this);">Mark1</th>
<th onDblClick="javascript:changeContent(this);">Mark2</th>
<th onClick="javascript:changeContent(this);">total</th>
</tr>
<tr>
<td onDblClick="javascript:changeContent(this);" id="m1">10</td>
<td onDblClick="javascript:changeContent(this);" id="m2">20</td>
<td onClick="javascript:changeContent(this);" id="t"></td>
</tr>
</table>
</body>
</html>

I got it editable table but i cannot able to add two cell and also assign result to total.. let u know please help me

Thanks

hi,

i need to be able to allow a user to past into an editable div (via whatever the user chooses: right-click and paste, shortcut key, etc), but i want to discard formatting and only take the plain text.

i can't use a textarea since the div will allow basic formatting (bold and italic) if applied by user-initiated events.

the onbeforepaste event looked promising, but according to quirksmode the support is so limited as to be unusable.

i searched the board, so apologies if this has been asked and answered.

tyia for any suggestions.

Hello all,

I am using an editable iframe to change the style of the text as a person enters text depending on what they type in. Sometimes the text needs to be a link, and while inserting a link works, I can't click on it. I was wondering if anyone knows how to get links in an editable iframe to click through. I've researched this for a while now without getting anywhere.

Right now I'm guessing that I need to somehow find out if the user is hovering over a link and turn "designMode" off for that section of text, or the whole iframe, I'm not completely sure.

Anyway, any help would be greatly appreciated!

I have 2 questions. Can I have draggable editable images? I can make my images movable around the page, but I would like to be able to make the images editable and have the text follow the images. I would like to either have a drop down menu or buttons that can make the images displayed on the page then edit them and move them to my map location on the page. Is this possible, and thanks for any help guys.

Here is the code I used for the movable images.
Code:

<img src="images/loconorth.gif" class="dragableElement" style="float:left">
<img src="images/locosouth.gif" class="dragableElement" style="float:left">

<img src="images/Loco east.png" width="80" height="36" class="dragableElement" style="float:right">
<p>

<p><img src="images/Loco west.png" width="80" height="36" class="dragableElement" style="float:left">

How do I get the pixel position of the caret in an editable IFrame?
I am building a WYSIWYG editor which works for Gecko, Trident, Webkit and Presto. I am doing this by setting the designMode to 'on' for an IFrame. The problem that I am having is that I need to know the pixel position of the caret so I can determine if the caret is at the bottom of the page. The reason I want the pixel position is so that way I can auto scroll the scrollbar to that position.

I should mention that we are using JavaScript.

Any ideas appreciated.

Hi All,
I have a select html control as below ;
<SELECT >
<OPTION VALUE="1"> This is option 1 </OPTION>
<OPTION VALUE="2" >This is option 2 </OPTION>
<OPTION VALUE="3" >This is option 3 </OPTION>
</SELECT>

My requirement is that when user moves pointer over the items the value of the item should be shown in a hint box.

How could I show the value of the item in a hint box as user moves pointer over an item using javascript?

Thanks,
Dev

Hi all,

I'm trying to get the cursor position to move to the end of the text within an editable iframe or div.
I've been pointed to something called TextRange and have been reading up on it for days yet couldnt make sense of much (i'm still very new).

what i'm trying to do is on a button click, the cursor will move to the end of the text in the iframe.

any help or pointers would be greatly appreciated. thanks.

Hello,

I'm trying to populate an HTML drop down list with data from an XML file but have failed miserably so far using examples I've found. Please help.

Thanks,

Richard

I have a html:select tag box and I want to make it copy pastable directly from an excel sheet or notepad so as to dynamically updating its options, is it possible. Current code has html:select box separately and below this another text box is there, where i fill the numeric value, then press add button below and then it gets updated in the html:select tag box.

Is it possible to copy from some list of numeric values and then directly paste into the html:select and the array list gets updated from this pasted list.

Thanks in advance fro your replies.

Hi,
I have what is probably a stupid issue. I have a select box that is being filled by an an ajax request to a SQL DB and returns the results in a select box. That part works fine.

The second part of the request is that i also want my inline html to change results if i change my selection.

that part is not working. I tried to put my onchange event into the option in php, but that doesn't return anything either.
$display_string .= "<option onchange=\"getSoftwareUpdate();\"> $row[Software] </option>";


clear as mud?

Any help would be much appreciated!



//this section gets the results from the php script and returns back the values in the db.

<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function getSoftwareFunction()
{
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Please contact Trinity Help Desk at ext. 88817");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}


var SoftwareName = document.getElementById('results').value;
var ManufacturerName = document.getElementById('results').value;
var VersionName = document.getElementById('results').value;
var InstallLocationName = document.getElementById('results').value;
var queryString = "?Software=" + SoftwareName + "&Manufacturer=" + ManufacturerName + "&Version=" + VersionName; + "&InstallLocation=" + InstallLocationName
ajaxRequest.open("POST", "getSoftwareName.php" + queryString, true);
ajaxRequest.send(null);
}

</script>

//this next part i want to return the results based on an onchange event in the select option


<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function getSoftwareUpdate()
{
var ajaxRequest1; // added
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest1 = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest1 = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest1 = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Please contact Trinity Help Desk at ext. 88817");
return false;
}
}
}

//added
// Create a function that will receive data sent from the server
ajaxRequest1.onreadystatechange = function(){
if(ajaxRequest1.readyState == 4){
var ajaxDisplay1 = document.getElementById('ajaxDiv1');
ajaxDisplay1.innerHTML = ajaxRequest1.responseText;
}
}
//end add

var Software = document.getElementById('results').value;
var SoftwareName = document.getElementById('results').value;
ajaxRequest1.open("POST", "getSoftwareName1.php" + SoftwareName, true);
ajaxRequest1.send(null);



}
</script>
<html>
<div id='ajaxDiv1'></div>
<div id='ajaxDiv'>
<select id='results' onchange="getSoftwareUpdate();" name="Software"> </select>
</div>
</html>

</td>

hi, all... haven't found exactly the solution here, and trying to cobble something together but it's just not working.

php is doing the heavy lifting in terms of generating the code, but the upshoot is i have a script:

Code:

	<script type="text/javascript">
				var values[1] = "This layout includes a 'title' and 'body' content block.";
				var values[2] = "This layout features everything included in the Standard Page layout as well as a 'comments' block.";
			 function replaceText( var_id) {
				document.getElementByID(pageLayout_replace).innerHTML = values[var_id];
			}
		</script>

and a select box:

Code:

			<fieldset>
				<legend>Page Layouts</legend>
				<label for="pageLayout" class="half left">Choose a page layout<br />

					<select name="pageLayout" id="pageLayout" size="5" onChange="replaceText(this.options[this.selectedIndex]);">
						<option value="1">Standard Page</option>
<option value="2">Standard Page w/Comments</option>
					</select>
				</label>
				<label class="half right">
					Page Layout Description:<br />
					<span id="pageLayout_replace">Click on a page layout title to the left to get a description here.</span>

				</label>
			</fieldset>

however, the error console in firefox says

Code:

Error: missing ; before statement
Line: 14, Column: 8
Source Code:
    var values[1] = "This layout includes a 'title' and 'body' content block.";

and then when i try to select one of the items,

Code:

Error: replaceText is not defined
Line: 1

any insight? thanks in advance!

Hello
I have several issues with my multilevel drop down menu
The First issue is : the page has 2 iframes (one has the horizontal multilevel drop down menu on the top) the below iframe has my site address
Now, when i hover over the menu it does not open or expand but when i open just the menu without any iframes it does
This clearly means that the menu is not coming out of the iframe
Please help me bring it on top of everything of the page
Note: i have placed the menu in one iframe and a page opens below it in another iframe.


The Second issue is : I want the navigation bar that is the multilevel drop down menu to be editable
Which means i have a blog and a forum on my site but my visitor wants that the blog should not appear there and another link to play games should

be there and hence he/she can edit it
And please also try to make it work on cookies so that the user info and preferences are saved in cookies and whenever he/she comes back they

see the page their way.

For you: I would like to tell you that IdeaLab has launched a Twitter Advertising, Widget and Search platform and the first 1000 people are getting $100
go to tweetup.com

Please help me, it will be really appreciable. Thank you very much in advance!

Hi @ all!

I've a div that is editable (contentEditable = true). The div has a fixed size like a letter page. When the user has written so much text that the text overflows I want add a new div above and let flow the overflown text in the other div. (it's the some behavior like MS Word in page view, but now it is in the web)

It is possible to do something like this in the web?


One way to implement this is to check if the text of the div overflows (I've found java script examples in the web which do that). And than I need the text that overflows to move it to the next div. But I have not found a function that do this. Is there such a function?


Another way is to insert a gap at that position a new page begins and use an background image that looks like a page border. With this solution, the whole text is in one div but it looks like floating to another page. But therefore, I have to add a gap between to lines at a specific position (the page border/margin and the gab between the pages). Does anyone have an idea how to realize this?


Maybe there are other possibilities to find a solution, aren't there?


I hope, you have understand what I want to realize. If not, please feel free to ask me!

Thank you for answers and hint in advanced!

Konstantin

Dear all,

background information:
I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values):

echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";

When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly.

The javascript looks like this

function set_time_hour(hour_value,next_field){
alert (hour_value);
alert (next_field);
document.getElementById(next_field).value = hour_value;
}

The alert calls are giving me the right values. but the

document.getElementById(next_field).value = hour_value;

is not working. What is wrong there? Do you have an idea?

How can I change the value of a select box with Javascript?

The select box values are already popoluated with PHP so I just want to select the right value.