这是HTML代码:
<!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>
$("#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());
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
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
最佳答案
您可以使用JQuery的serialize()函数:
var datastring = $("#preview_form").serialize();
$.ajax({
type: "POST",
url: "your url.php",
data: datastring,
success: function(data) {
alert('Data send');
}
});
并阅读PHP:
echo $_POST['datastring']['dialog_box_textarea_1'];
echo $_POST['datastring']['radiobutton_1'];
........
并获取*** data-****标记HTML5，您可以看到以下示例:
<div id="texto" data-author="Ricardo Miranda" data-date="2012-06-21">
<h4>Lorem ipsum</h4>
<p>
Lorem ipsum dolor sit amet, ius integre eligendi et,
sea ut expetendis conclusionemque,
mel at ornatus invenire. His ad moderatius definiebas omittantur,
liber saepe albucius sea cu.
Audire tamquam dolores vis ne, mediocrem consulatu eum ex.
Duo te agam saepe convenire, et fugit iisque his.
</p>
<script type="text/javascript">
$(function() {
alert("The text is write " + $('#texto').data('author'));
});
和
<div id="texto" data-author='{"nombre":"Ricardo","apellido":"Miranda"}' data-date="2012-06-21">
...
</div>
<script type="text/javascript">
$(function() {
alert("The text is write " + $('#texto').data('author').apellido + ", " +
('#texto').data('author').nombre);
});
</script>