Question

jQuery(function ($) {
        var submitbnt = '<input type="button" id="submit" class="btn btn-primary pull-right" value="Submit" />';
        var formData = '[{"type":"select","label":"Select","className":"form-control","name":"select-1498804267849","values":[{"label":"Option 1","value":"option-1"},{"label":"Option 2","value":"option-2","selected":true},{"label":"Option 3","value":"option-3"}]},{"type":"text","label":"Text Field","className":"form-control","name":"text-1498804394861","subtype":"text"},{"type":"text","label":"Text Field","className":"form-control","name":"text-1498804395129","subtype":"text"}]';
        
        
        formRenderOpts = {
            dataType: 'json',
            formData:formData
        }

       
        $('#mform').formRender(formRenderOpts);
        $('#mform').append(submitbnt);
    

        document.getElementById('submit').onclick = function () {
            var formData = new FormData(document.forms[0]);
            var result = {};
            for(var pair of formData.entries()) {
                result[pair[0]] = pair[1];
            }
            console.log($('#mform').formData());
            result = JSON.stringify(result); // just key/ value
            var htmlForm = $('#mform').html(); // Can not get merge values in code
           
        };
    });

<h1>Form demo</h1>
<form class="col-md-12" id="mform" style="background-color:white;padding:50px">
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script src="http://formbuilder.online/assets/js/form-builder.min.js"></script>
  
  <script src="https://formbuilder.online/assets/js/form-render.min.js"></script>

我使用http://formbuilder.readthedocs.io的formbuilder。我渲染一个表格。并显示该表单，然后我输入数据，我想得到该表单的HTML代码，我已经找到了很多方法，但只有我不能得到形式和值的HTML代码。我只得到html代码，但没有值。或者我只是获取值但没有html，我想我必须手动“混合”我得到的值到html代码中。但实际上它非常麻烦。

我有一个注册表单，我希望当用户点击提交按钮时会获得表单标签的所有html代码，它包括所有输入，下拉列表，收音机，按钮......并且值已经输入

我尝试使用$('#myform').html()来获取所有表单的代码，但它没有获得我输入到输入或无线电中的值......

我想得到这样的东西：

<form id="myForm" class="cusForm">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

Answer 1

您可以使用$('#myForm').serializeArray()和$('#myForm input:text');来获取表单的数据和文本类型输入的html。

$("#getTextInputs").on("click", function(){
    console.clear();
    var textInputs = $('#myForm input:text');
    $.each(textInputs, function(){
        $(this).attr("value", $(this).val());
        console.log(this);
    })   
})

$("#getFormData").on("click", function(){
    console.clear();
    var data = $('#myForm').serializeArray();
    console.log(data);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" class="cusForm">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="button" id="getTextInputs" value="Get Text Input Html">
  <input type="button" id="getFormData" value="Get Form Data">
</form>

Answer 2

尝试使用jquery的serialize()函数

console.log($('form').serialize())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" class="cusForm">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

Answer 3

我不知道为什么你需要html，以防万一你需要发布属性的值你可以查看这段代码，你将获得正在发布的值的数组，

$(function(){

$('.submit').click(function(){

var result = [];

$('#myForm input').each(function(e,v){

var value = {};
value.property = v.name;
value.value = v.value; 
result.push(value);
});

alert(JSON.stringify(result));

});

});

工作小提琴：https://jsfiddle.net/jks7afpx/

获取表单标记的所有html代码以及表单标记中文本框的值

3 个答案: