x
Search Posts:
BLOG POST #31 SHOW ALL

makeForm - fast form code generation in jQuery js

<h2>Make form</h2>
<br />

<script type="text/javascript">

	
function addField(field_type, insert_point){
	
	var field_label=$('#field_label').val();
	var field_name=$('#field_name').val();
	var field_value=$('#field_value').val();
	
	var field_code = '';
	
	//the label
	field_code += '&lt;span class="form_label"&gt;'+field_label+'&lt;/span&gt;';
	field_code += '<br /\>';
	field_code += '&lt;br /&gt;';
	field_code += '<br /\>';
	
	switch (field_type)
	{
	case 'hidden':
	
	field_code += '&lt;input type="hidden" id="'+field_name+'" name="'+field_name+'" value="'+field_value+'" /&gt;';
	break;
	
	case 'text':
	field_code += '&lt;input type="text" id="'+field_name+'" name="'+field_name+'" value="'+field_value+'" /&gt;';
	break;
	
	case 'password':
	field_code += '&lt;input type="password" id="'+field_name+'" name="'+field_name+'" value="'+field_value+'" /&gt;';
	break;
	
	case 'select':
	field_code += '&lt;select id="'+field_name+'" name="'+field_name+'"&gt;';
	field_code += '<br /\>';
	field_code += '&lt;option value="'+field_value+'" selected=""&gt;'+field_value+'&lt;/option&gt;';
	field_code += '<br /\>';
	field_code += '&lt;/select&gt;';
	break;
	
	case 'textarea':
	field_code += '&lt;textarea id="'+field_name+'" name="'+field_name+'"&gt;'+field_value+'&lt;/textarea&gt;';
	break;
	
	case 'checkbox':
	field_code += '&lt;input type="checkbox" id="'+field_name+'" name="'+field_name+'[]" value="'+field_value+'" checked="" /&gt;';
	break;
	
	case 'radio':
	field_code += '&lt;input type="radio" id="'+field_name+'" name="'+field_name+'" value="'+field_value+'" checked="" /&gt;';
	break;
	
	case 'file':
	setformPost();
	$('#form_enctype').html('multipart/form-data');
	field_code += '&lt;input type="file" id="'+field_name+'" name="'+field_name+'" value="'+field_value+'" /&gt;';
	break;
	
	}
	field_code += '<br /\>';
	field_code += '&lt;br /&gt;';
	field_code += '<br /\>';
	
	switch(insert_point)
	{
		case 'prepend':
		$('#fieldset').prepend(field_code);
		break;
		case 'append':
		$('#fieldset').append(field_code);
		break;
	}
}

function setformPost(){
	$('#form_method').html('post');
}

function setformGet(){
	$('#form_method').html('get');
	$('#form_enctype').html('application/x-www-form-urlencoded');	
}

function clearForm(){
	$('#form_enctype').html();
	$('#fieldset').html();
}
</script>



<h3>Add Fields:</h3>
Field Label:
<br />
<input type="text" id="field_label" value="" />
<br />
Field Name:
<br />
<input type="text" id="field_name" value="" />
<br />
Field Value:
<br />
<input type="text" id="field_value" value="" />
<br />
<br />
Hidden Field
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('hidden', 'prepend')">Prepend</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('hidden', 'append')">Append</a>
<br />
Text Field
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('text', 'prepend')">Prepend</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('text', 'append')">Append</a>
<br />
Password Field
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('password', 'prepend')">Prepend</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('password', 'append')">Append</a>
<br />
Textarea
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('textarea', 'prepend')">Prepend</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('textarea', 'append')">Append</a>
<br />
Select
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('select', 'prepend')">Prepend</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('select', 'append')">Append</a>
<br />
Checkbox
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('checkbox', 'prepend')">Prepend</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('checkbox', 'append')">Append</a>
<br />
Radio Button
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('radio', 'prepend')">Prepend</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('radio', 'append')">Append</a>
<br />
File Selector
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('file', 'prepend')">Prepend</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="addField('file', 'append')">Append</a>
<br />
<br />
<a onclick="setformPost()">Set POST method</a>
<br />
<a onclick="setformGet()">Set GET method</a>
<br />
<a onclick="clearForm()">Clear Form</a>
<br />
<br />

<h3>Form Preview:</h3>
<div id="form_code" class="code">
	&lt;form id="" method="<span id="form_method">post</span>" enctype="<span id="form_enctype">application/x-www-form-urlencoded</span>" action=""&gt;
	<br />
	&lt;fieldset&gt;
	<div id="fieldset">
	</div>
	&lt;/fieldset&gt;
	<br />
	&lt;/form&gt;
</div>