Ajax dynamic list, show full textfield string value on save

[cesarcesar]

Hello fellow code junkies,

 

I am using the "Ajax dynamic list" http://dhtmlgoodies.com/index.html?whichScript=ajax-dynamic-list and i think its the best out there. I have found a compatibility issue maybe one of you can help me out on.

 

In this html i use a text field to collect info. when a user types, *ajax_showOptions()* shows the option perfectly. once an item is selected and i move from the field, *makeRequest()*, my set variable to database php page is triggered and it saves to the database properly. my problem is that the value saved to the database is only the first few charaters *ajax_showOptions()* used to fill the dropdown. Example, if i type, *ce* the dropdown show *cesar*, i choose *cesar* and the database sets *ce*.

 

So my question is how do i get the database to set the full value in the textfield. How do i get *this.value* in makeRequest() to be the full value. Thanks.

 

Here is my html.

 

<input onkeyup="ajax_showOptions(this,'company_name',event)" type="text" id="company_name" name="company_name" value='' onblur="javascript:makeRequest('ajax_edit_company.php?valu=',this.value);">

 

 

The *ajax_showOptions()* script is unchanged from link above. Here is the *makeRequest()* script. This script is working great as is, besides possibly the current issue.

<script type="text/javascript" language="javascript">
   var http_request = false;
   function makeRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      http_request.onreadystatechange = alertContents;
      http_request.open('GET', url + parameters, true);
      http_request.send(null);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;
         } else {
            alert('There was a problem with the request.');
         }
      }
   }

   function get(obj) {
      var getstr = "?";
      for (i=0; i<obj.childNodes.length; i++) {
         if (obj.childNodes[i].tagName == "INPUT") {
            if (obj.childNodes[i].type == "text") {
               getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
            }
            if (obj.childNodes[i].type == "checkbox") {
               if (obj.childNodes[i].checked) {
                  getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
               } else {
                  getstr += obj.childNodes[i].name + "=&";
               }
            }
            if (obj.childNodes[i].type == "radio") {
               if (obj.childNodes[i].checked) {
                  getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
               }
            }
         }
         if (obj.childNodes[i].tagName == "SELECT") {
            var sel = obj.childNodes[i];
            getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
         }

            if (obj.childNodes[i].type == "textarea") {
               getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
            }

      }
      makeRequest('get.php', getstr);
   }
</script>

[ScotDiddle]

Hello cesarcesar, 

 

Please post ajax_edit_company.php and get.php so we can play too... 

 

Scot L. Diddle, Richmond VA

 

 

 

[cesarcesar]

ajax_edit_company.php

<?php
include("../../starter.php");

if($_vars['dyn'] == 'company_name'){

$_qdb = db_query("
SELECT
company_id,
".$_vars['dyn']."
FROM
company
WHERE
company_id = '".$_vars['vsv']."'
limit 1
");
$qdb = db_fetch_array($_qdb);

if (isset($_vars['valu'])) { // SET the var
	if (db_num_rows($_qdb)==0) { //$_SESSION['test1'] = 420; // do INSERT
		db_query("INSERT INTO company (".$_vars['dyn'].") VALUES ('".$_vars['valu']."')");
		$_vars['address_id'] = db_insert_id();
	}else{ //$_SESSION[$_vars['dyn']] = $_vars['valu'];// do UPDATE
		db_query("UPDATE company SET ".$_vars['dyn']." = '".$_vars['valu']."' WHERE company_id = '".$qdb['company_id']."'");
	}
}else{ // GET the var*/
	echo $qdb[$_vars['dyn']];
}
}
?>

 

I have get.php commented out in my current version.

[cesarcesar]

ajax_edit_company.php

<?php
include("../../starter.php");

if($_vars['dyn'] == 'company_name'){

$_qdb = db_query("
SELECT
company_id,
".$_vars['dyn']."
FROM
company
WHERE
company_id = '".$_vars['vsv']."'
limit 1
");
$qdb = db_fetch_array($_qdb);

if (isset($_vars['valu'])) { // SET the var
	if (db_num_rows($_qdb)==0) { //$_SESSION['test1'] = 420; // do INSERT
		db_query("INSERT INTO company (".$_vars['dyn'].") VALUES ('".$_vars['valu']."')");
		$_vars['address_id'] = db_insert_id();
	}else{ //$_SESSION[$_vars['dyn']] = $_vars['valu'];// do UPDATE
		db_query("UPDATE company SET ".$_vars['dyn']." = '".$_vars['valu']."' WHERE company_id = '".$qdb['company_id']."'");
	}
}else{ // GET the var*/
	echo $qdb[$_vars['dyn']];
}
}
?>

 

I have get.php commented out in my current version.

[cesarcesar]

this was also suggested, i will try it later today.

 

Hi and welcome to the forum Smile

 

The problem with your code is that the onblur event is triggered at the exact moment when you click on an option in the drop down list. I.e. if you have typed "ce" and then clicks on "cesar" in the list, the onblur event is triggered before "cesar" has been chosen.

 

What you can try to do is to delay your call with this code:

 

<input onkeyup="ajax_showOptions(this,'company_name',event)" type="text" id="company_name" name="company_name" value=''
onblur="setTimeout('makeRequest(\'ajax_edit_company.php?valu=\' + document.forms[0].elements[\'company_name\'].value)',300);">