Question

HTML

<form id="myForm">
<input type="text" id="fname">
<input type="text" id="sname">
<input type="text" id="email">
<input type="tel" id="phone">
<select id="status">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<input type="submit" value="send">
</form>

...

<div id="output_fname"></div>
<div id="output_sname"></div>
<div id="output_email"></div>
<div id="output_phone"></div>
<div id="output_status"></div>

请求：
请帮我弄清楚如何将input, select, etc.. (what might show up in a form)中的所有值传递到“预览”（在这种情况下 - 进入div）。

PS：
我试过这个（迫使我粘贴脚本数量，我有输入和匹配output_ divs - 至少我今天的知识）：

$("#fname").on("focusout",function(){
    setTimeout($.proxy(function(){
         $("#output_fname").text(this.value);
    },this),10);
});

但是有可能做类似的事情：

<input type="text" class="grab-val" id="fname">

然后：

.val() from (all inputs)
.this class="grab-val" and 
send to (output_ + matching id)........ //something like that

或（抱歉所有后退和前进，但有了这个问题我想解决问题，但我也请求上课......）

在将数据发送到数据库之前，在提交时创建预览会有什么好的解决方案。
数据在“是数据正确 - ” - 提交按钮后发送。

Answer 1

你可以给你的预览div一类“预览”

<div class="preview" id="output_fname"></div>
<div class="preview" id="output_sname"></div>
<div class="preview" id="output_email"></div>
<div class="preview" id="output_phone"></div>
<div class="preview" id="output_status"></div>

然后在预览按钮提交

$('.preview').text(function(){
     return $('#' + this.id.replace('output_','')).val();
});

Answer 2

我创建了两个JS Fiddles：

这个更新预览实时：http://jsfiddle.net/ChrisBerragan/zcspmfmd/5/

..这会在提交时显示预览：http://jsfiddle.net/ChrisBerragan/ub3y4ycj/15/

实时的函数将注册输入id的值绑定到已注册目标id的文本：

function bindToElement(sourceElement, targetElement) {
    var source = jQuery('#' + sourceElement),
        sourceType = source[0].tagName,
        target = jQuery('#' + targetElement);

    switch (sourceType) {
        case 'INPUT':
            source.on('keyup', function (event) {
                var sourceValue = event.target.value;
                target.text(sourceValue);
            });
            break;
        case 'SELECT':
            target.text(source.val());
            source.on('change', function (event) {
                var sourceValue = event.target.value;
                target.text(sourceValue);
            });
            break;
    }
}
bindToElement('fname', 'output_fname');
bindToElement('sname', 'output_sname');
bindToElement('email', 'output_email');
bindToElement('phone', 'output_phone');
bindToElement('status', 'output_status');

..但是一个简单的循环可以让你保存重复。

提交版本的预览有一个将表单转换为可预览表单的功能 - 您只需提供带有formId和previewAreaId的函数，当单击预览按钮时，它会运行showPreview函数，该函数查找表单中的每个元素这是输入或选择，而不是输入类型按钮＆＃39;并使用值在预览区域中创建一个div，并向表单添加一个提交按钮以确认：

function previewOnSubmit (formId, previewAreaId) {
    var form = jQuery('#' + formId),
        previewButton = jQuery('#previewFormButton'),
        formInputs = form.children().filter(function (index, element) {
            var tag = element.tagName,
                inputType = jQuery(element).attr('type'),
                tagIsValidInput = (tag === 'INPUT' && inputType !== 'button') || tag === 'SELECT';
            return tagIsValidInput;
        }),
        preview = jQuery('#' + previewAreaId);

    function showPreview () {
        var confirmationButton = jQuery('<input type="submit" value="Confirm" />');
        preview.empty();
        jQuery.each(formInputs, function (index, element) {
            var value = element.value,
                inputPreview = jQuery('<div>' + value + '</div>');
            preview.append(inputPreview);
        });
        form.append(confirmationButton);
    }

    previewButton.on('click', function (event) {
        event.preventDefault();
        showPreview();
    });
}

previewOnSubmit('myForm', 'myFormPreview');

希望这些帮助！

jQuery选择器+变量目标匹配

2 个答案: