Technology

Dynamic Field Generation in Web Applications.

                                                                                                                          Dynamic Field Generation

Dynamic field generation refers to generating user defined fields into web applications. Often users are not satisfied with the options provided by default for example in a simple feedback form of any product. User may want to give feedback on some particular thing not available by default. It can be done simply by using following technique.

STEP 1: Paste this code in the <head> section of the web page (it can be HTML, PHP, JSP, JSF or any similar language).

<script language=”javascript”>
var i=0;
function changeIt()
{
i++;

my_div.innerHTML = my_div.innerHTML +”<br><input type=’text’ style=’font-family:Comic Sans MS’ name=’mytextbox”+i+”‘> <p><label><input type=’radio’ name=’mytext”+i+”‘ id=’Poor’+ value=’poor’ /></label><span class=’buttons’>Poor</span><label><input type=’radio’ name=’mytext”+i+”‘ id=’avg’ value=’average’ /><span class=’buttons’> Average</span><input type=’radio’ name=’mytext”+i+”‘ id=’good’ value=’good’ /></label><span class=’buttons’>Good</span><label><input type=’radio’ name=’mytext”+i+”‘ id=’excellent’ value=’excellent’ /></label><span class=’buttons’>Excellent </span> </p>”
if(i>20){
alert(“Huh! Let me refresh please!”); //RESTRICTING USERS TO ADD ONLY 20 FIELDS BECAUSE OF DB LIMITATIONS
window.location.href=”http://localhost:8081/SamePage.jsp&#8221;;//ENTER THE URL OF THE SAME PAGE TO GET DISPLAYED AGAIN AFTER REFRESHING THE PAGE

}

}
</script>

 

STEP 2: Now in your web page under <form> tag add the following code according to the design.

<input type=”button” value=”Add Field” id=”button”  onClick=”changeIt()” style=”color: #FFFFFF; background-color:#600;width: 65px;height: 40px;”/>

THAT’S IT! 🙂  Image

Dynamic field (or form elements) generation and deletion.

 

dynamic-add-delete-row-table-javascript

The following code will take your web page one step ahead by providing the privilege of deletion of generated elements too!

<script type=”text/javascript”><!– BEGIN HIDING
/* A simple demonstration on how to create and delete, textBox with an onclick event. Hope you had great time! Enjoy coding… */
var x = 0;
document.onclick = function( add )
{ add = add ? add : window.event;
var button = add.target ? add.target : add.srcElement;
if(x<20){
if (( button.name ) && ( button.name == ‘add’ ))
{ x = x +1; document.getElementById(“box_numbers”).value=x;
_form = document.getElementsByTagName(‘form’)[0];
_text = document.createElement(‘input’);
_button = document.createElement(‘input’);
_div = document.createElement(‘div’);
_div.id = ‘div’;
_text.type = ‘text’;
_text.size = ’17’;
_text.value = ‘Item’;
_text.id = ‘text’;
_text.name=”text”+x;
_div.appendChild(_text);
_button.type = ‘button’;
_button.name = ‘b1’;
_button.id = ‘b’+x;
_button.value = ‘Delete this item’;
_div.appendChild(_button);

_form.appendChild(_div);
}}
if(x>20){
alert(“Huh! Let me refresh please!”);
window.location.href=”http://hpl-11-09:8080/charitra/participate.jsp&#8221;;

}
if ( button.name && button.name == ‘b1’ ) { _form.removeChild(document.getElementById(‘div’));
}
}
//–>
</script>

We can also define the CSS for proper designing :

 

<style type=”text/css”>

<!–
form input[type=button] {height:22px;width: 120px;background-repeat: no-repeat;background-color:#635757;border-radius:20px;border-color:#635757; color:white;font-weight: bold; }
–>
#contentbg{
background-image: url(“images/bg2.jpg”);
background-repeat: no-repeat;

}
#div{

width: 760px;height: 23px;
background-image: url(‘images/bg3.jpg’);background-repeat: repeat-y;
margin-left: -75px;

}
</style>

 

Generally this simple privileges to the users makes your web pages more interesting and real time. I used this technique to find out certain missing patterns which I used for developing a system that used to predict certain improvements in an already existing system. The best thing is that it is helpful in taking data  from the user which helps in predicting what the user needs and can be used for suggesting improvements in the existing systems by taking dynamic inputs from the users. The picture here is related to CRM systems.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s