Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Dynamically add new inputs in form

Calling a php-script with ajax. Need to add new inputs depending on result



8:35 pm on May 27, 2007 (gmt 0)

5+ Year Member

Sorry.. got posted in wrong forum.
Feel free to move it to JavaScript and AJAX instead.

Been searching for an answer but not come up with much sofar.

Basically what I'm trying to do is this.

I have a form.
In the form I have a search function inside an input. When a user enter some text it sends the text to a php-script, which updates a div inside the form.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(){
var ajaxRequest;
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Browser error!");
return false;
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById("newtext").firstChild.nodeValue = ajaxRequest.responseText;
var doman = document.getElementById('doman').value;
var alla = document.getElementById('alla').value;
var se = document.getElementById('se').value;
var nu = document.getElementById('nu').value;
var eu = document.getElementById('eu').value;
var biz = document.getElementById('biz').value;
var com = document.getElementById('com').value;
var net = document.getElementById('net').value;
var org = document.getElementById('org').value;
var info = document.getElementById('info').value;
var queryString = "?doman=" + doman + "&alla=" + alla + "&se=" + se + "&nu=" + nu + "&eu=" + eu + "&biz=" + biz + "&com=" + com + "&net=" + net + "&org=" + org + "&info=" + info;
ajaxRequest.open("GET", "search.php" + queryString, true);
<form action="order.php" method="post" name="orderform">
<input type="checkbox" id="alla" name="alla" checked />Alla
<input type="checkbox" id="se" name="se"/>.se
<input type="checkbox" id="nu" name="nu"/>.nu
<input type="checkbox" id="eu" name="eu"/>.eu
<input type="checkbox" id="biz" name="biz"/>.biz <br/>
<input type="checkbox" id="com" name="com"/>.com
<input type="checkbox" id="net" name="net"/>.net
<input type="checkbox" id="org" name="org"/>.org
<input type="checkbox" id="info" name="info"/>.info
Domän: <input type='text' id="doman" name='doman' />
<div id="newtext">&nbsp;</div>
<input type='button' onclick='ajaxFunction()' value='Search' />

What I would like to do is to add some new inputs depending on what result the php-script returns, but I'm a newbie when it comes to adding new elements via JS/Ajax.

At the moment, search.php returns a textstring with true/false for every checkbox in the form.
Is there an easy way to add new inputs?
Or is it easier to update the current checkboxes? Ie disable the checkbox if return=false, enable if true.

Help would be apprecciated :)


Featured Threads

Hot Threads This Week

Hot Threads This Month