Question

So I have this code, which I am trying to use to make it update my form text boxes when I select a different drop down user.

Here’s the code:

<script type="text/javascript">
document.getElementById("useruname").onchange = function() {
var selecteduname = this.value;
}

var xmlhttp;
function loadXMLDoc()
{

if (window.XMLHttpRequest)
  {
 xmlhttp=new XMLHttpRequest();
}
else
  {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
}

function updateAdduser()
{loadXMLDoc();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var json = xmlhttp.responseText;
var fields = JSON.parse(json);
Object.keys(fields).forEach(function (name) {
var input = document.getElementsByName(name);
input.value = fields[name];
});
}
}
xmlhttp.open("GET", "ajaxuseradd.psp?=", true);
xmlhttp.send();
}

</script>
<form action="adduser.psp" method="get">
<fieldset>
<label for="uname">Username:</label>
<select name="uname" id="useruname" onChange="updateAdduser();">
<%
import MySQLdb

db = MySQLdb.connect("localhost", "login", "password", "somethingelse")
c = db.cursor()

c.execute("""SELECT user from employees;""")

tup = c.fetchall()

tupstr = str(tup)

tupstr = tupstr.replace("(", "").replace("'", "").replace(")", "").replace(",,", ",").replace("'", "").replace("' ", "'").replace(", ", ",")

tupstr = tupstr.rstrip(",")

numlist = tupstr.split(",")

optionlist =  ['<option value="%s">%s</option>' % (x, x) for x in numlist]

options = "\n".join(optionlist)

%>


 <%= options %>

 </select>

 </fieldset>
 <fieldset>
    <label for="fname">First Name:</label>
<input type="text" name="fname" />
</fieldset>
 <fieldset>
    <label for="lname">Last Name:</label>
<input type="text" name="lname" />
</fieldset>
<fieldset>
    <label for="email">Email:</label>
    <input type="text" name="email">
</fieldset>

Answer 1

I would seriously consider moving to using a client javascript library like jQuery.

Your code would be simplified to something like this:

<script type="text/javascript">
$("#useruname").change = function() {
    var selecteduname = this.value;
}


function updateAdduser()
{
    var fields = null;
    $.ajax(url: "ajaxuseradd.psp?=",
           dataType = 'json',
        success: function(data){
          fields = data;
          Object.keys(fields).forEach(function (name) {
              var input = $(name);
              input.value = fields[name];
          });
      }
    });  
}    
</script>

<form action="adduser.psp" method="get">
<fieldset>
<label for="uname">Username:</label>
<select name="uname" id="useruname" onChange="updateAdduser();">
<%
import MySQLdb

db =
c = db.cursor()

c.execute("""SELECT user from employees;""")

tup = c.fetchall()

tupstr = str(tup)

tupstr = tupstr.replace("(", "").replace("'", "").replace(")", "").replace(",,", ",").replace("'", "").replace("' ", "'").replace(", ", ",")

tupstr = tupstr.rstrip(",")

numlist = tupstr.split(",")

optionlist =  ['<option value="%s">%s</option>' % (x, x) for x in numlist]

options = "\n".join(optionlist)

%>


 <%= options %>

 </select>

 </fieldset>
 <fieldset>
    <label for="fname">First Name:</label>
<input type="text" name="fname" />
</fieldset>
 <fieldset>
    <label for="lname">Last Name:</label>
<input type="text" name="lname" />
</fieldset>
<fieldset>
    <label for="email">Email:</label>
    <input type="text" name="email">
</fieldset>