120
rated 0 times
[
125]
[
5]
/ answers: 1 / hits: 133487
/ 11 Years ago, mon, february 18, 2013, 12:00:00
Here is the HTML code:
<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' >
<head>
<title>HTML Form Builder</title>
<link href='css/font1.css' rel='stylesheet' type='text/css'>
<link href='css/font2.css' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='css/style.min.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/form.min.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/style1.css' type='text/css' media='all' id='css-theme'/>
<link type='text/css' href='css/redmond/jquery-ui-1.8.23.custom.css' rel='stylesheet' />
<link rel='stylesheet' href='css/tipsy.css' type='text/css' media='all' />
<script type='text/javascript' src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='js/jquery.metadata.js'></script>
<script type='text/javascript' src='js/jquery.validate.js'></script>
<script type='text/javascript' src='js/jquery.tipsy.js'></script>
<script type='text/javascript' src='js/jquery.json-2.3.min.js'></script>
<script type='text/javascript' src='js/main.min.js'></script>
<script type='text/javascript'>
$(function(){
changeInnerHTML('doctor_id');
changeInnerHTML('hospital_id');
changeInnerHTML('clinic_id');
changeInnerHTML('stockist_id');
changeInnerHTML('chemist_id');
changeInnerHTML('bloodbank_id');
changeInnerHTML('dialysis_id');
});
function changeInnerHTML(id)
{
if($('#dialog_box_'+id).length)
{
var tmp=id.split('_');
$.get('getDataValues.php?ref='+tmp[0],function(data,status){
$('#dialog_box_'+id).html(data);
});
}
}
</script>
</head>
<body>
<div id='container'>
<h1 id="form-name" style="background-color: rgb(255, 255, 255); box-shadow: none; border: none; margin: 8px 15px;">New Form</h1>
<form method="POST" id="preview_form" novalidate="novalidate">
<div class="row" style="display: block;"><label class="field" for="textarea_1">textarea_1</label><span class="textArea" data=""><textarea id="dialog_box_textarea_1" name="textarea_1" data="{"validate":{"required":false,"messages":{}}}"></textarea></span></div><div class="row" style="display: block;"><label class="field" for="radiobutton_1">radiobutton_1</label><span class="radioButton" data="" id="radiobutton_1"><label class="option" for="radiobutton_1_option_1"><input class="radio" id="dialog_box_radiobutton_1_option_1" type="radio" name="radiobutton_1" value="Option 1" data="{"validate":{"required":false,"messages":{}}}">Option 1</label><label class="option" for="radiobutton_1_option_2"><input class="radio" id="radiobutton_1_option_2" type="radio" name="radiobutton_1" value="Option 2">Option 2</label><label class="option" for="radiobutton_1_option_3"><input class="radio" id="radiobutton_1_option_3" type="radio" name="radiobutton_1" value="Option 3">Option 3</label></span></div><div class="row" style="display: block;"><label class="field" for="checkboxgroup_1">checkboxgroup_1</label><span class="checkBoxGroup" data="" id="checkboxgroup_1"><label class="option" for="checkboxgroup_1_option_1"><input type="checkbox" class="checkbox" name="checkboxgroup_1[]" id="dialog_box_checkboxgroup_1_option_1" value="Option 1" data="{"validate":{"required":false,"messages":{}}}">Option 1</label><label class="option" for="checkboxgroup_1_option_2"><input type="checkbox" class="checkbox" name="checkboxgroup_1[]" id="checkboxgroup_1_option_2" value="Option 2">Option 2</label><label class="option" for="checkboxgroup_1_option_3"><input type="checkbox" class="checkbox" name="checkboxgroup_1[]" id="checkboxgroup_1_option_3" value="Option 3">Option 3</label></span></div><div class="row" style="display: block;"><label class="field" for="dropdown_1">dropdown_1</label><span class="dropDown" data=""><select id="dialog_box_dropdown_1" name="dropdown_1" data="{"validate":{"required":false,"messages":{}}}"><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option><option value="Option 3">Option 3</option></select></span></div><input type="button" class="button blue" value="Submit" id="submit-form"><input type='hidden' id='tname' name='tname' value='surveyForm_2' /></form></div> <!--container-->
<script type='text/javascript' src='js/form.min.js'></script>
</body>
</html>
Here the code which will get all form field values:
$("#hidAll").append($("#preview_form :input").map(function () {
if ($(this).val() != 'Submit') {
if ($(this).is('select')) {
var aa = $(this).children('option').map(function () {
return $(this).val();
}).get().join("|");
return $(this).attr('name') + '|' + aa;
} else if ($(this).is('input:checkbox')) {
return $(this).attr('name').substring(0, $(this).attr('name').length - 2) + '|' + $(this).val();
} else {
return $(this).attr('name') + '|' + $(this).val();
}
}
}).get().join(","));
alert($("#hidAll").html());
From this I am getting the output value as follows:
textfield_1|dgdfg,
checkboxgroup_1|Option 1,
checkboxgroup_1|Option 2,
checkboxgroup_1|Option 3,
radiobutton_1|Option 1,
radiobutton_1|Option 2,
radiobutton_1|Option 3,
dropdown_1|Option 1!Option 2!Option 3
I want the out as following:
textfield_1|dgdfg,
checkboxgroup_1|Option 1!Option 2!Option 3,
radiobutton_1|Option 1!Option 2!Option 3,
dropdown_1|Option 1!Option 2!Option 3
More From » html
