将Alpacajs表单追加到现有表单

我试图创建一个用户输入计算方法，其中输入字段和计算公式是动态设置的。例如，有一个苹果数量和一个苹果价格投入，所以我乘以投入得到的价格。在另一种情况下，我有长度,宽度和高度输入来计算音量。将Alpacajs表单追加到现有表单

我决定存储输入，数据和计算功能并重新组装形式形式JSON与Alpacajs

但是计算字段仅一个更大形式的一部分。因此，使用

$("#alpacaForm").alpaca(window.alpacaForm.object);

增加了alpacaForm元素中的新形式。

有没有办法可以将追加由alpacajs生成的字段到现有的表单？

来源

2017-03-13 sr9yar

我设法做到这一点的唯一方法是通过渲染到一个单独的元素和复制元素。

例如：

<form id="my-form"> 

    <!-- My controls: --> 
    <label for="foo">Foo</label> 
    <input id="foo"> 

    <label for="bar">Bar</label> 
    <input id="bar"> 

    <!-- I want the schema-based controls to go into this div. --> 
    <div class="schema-control-container"></div> 

</form>

中的JavaScript（和jQuery）：

var $myForm = $('#my-form'); 
var $schemaControlContainer = $myForm.find('.schema-control-container'); 
var mySchema = JSON.parse(mySchemaJson); 

var $scratchpad = $('<div id="alpacaScratchpad"></div>').hide(). 
    insertAfter($myForm); 

function postRender (control) { 

    // I actually have multiple forms, so I need to make sure the IDs are unique. 
    $scratchpad.find('.alpaca-control').each(function (i, alpacaControl) { 
    alpacaControl.id = $myForm.attr('id') + '-' + alpacaControl.id; 
    }); 
    $scratchpad.find('.alpaca-control-label').each(
     function (i, alpacaControlLabel) { 
    alpacaControlLabel.htmlFor = $myForm.attr('id') + '-' + 
     alpacaControlLabel.htmlFor; 
    }); 

    // Select elements we want to copy. Note that I haven't tried this with any 
    // particularly complicated JSON schemata, so this may be naïve. 
    var $goodies = $scratchpad.find('.alpaca-control,.alpaca-control-label'); 

    // Optional: mark schema controls as such, and allow autocompletion. 
    $goodies.filter('.alpaca-control').addClass('my-schema-datum'). 
     attr('autocomplete', null); 

    // Remove Alpaca classes and Bootstrap crap. (I hate Bootstrap, but the 'web' 
    // version of Alpaca doesn't seem to work right now. TODO: Update after 
    // https://github.com/gitana/alpaca/issues/507 is fixed.) 
    $goodies.removeClass('alpaca-control').removeClass('alpaca-control-label'). 
     removeClass('form-control').removeClass('control-label'); 

    // Move the goodies to the schema control container, in the form. 
    $schemaControlContainer.append($goodies); 

    // Clean up the clutter we don't need. 
    $scratchpad.empty(); 
} 

// Have Alpaca render the schema into the scratchpad, and then run the function 
// we just defined. 
$scratchpad.alpaca({ schema: mySchema, postRender: postRender });

我希望能找到一个羊驼选项，以防止需要做这一切，但似乎并不成为一个。

来源

2017-05-09 18:25:23

将Alpacajs表单追加到现有表单

回答

相关问题