从表单外部获取值

Question

我需要从页面的另一部分获取代码而不将其放入表单中……有没有办法使用 JavaScript/jQuery 来实现？

基本上，我想从这里获取价值：

<div class='span5' style='margin-left:0px !important;'>
    <label for='area0'>
        <input type='checkbox' name='area' id='area' value='West Palm Beach' style='margin-top:-5px !important;'>
        West Palm Beach
    </label>
</div>

并将其放入同一页面其他地方存在的表单中。

<form method="post" class="form-horizontal" id="final_form" action="send_mail.php">
    MORE INPUTS
</form>

有没有一种简单的 JavaScript 方法可以做到这一点？如果复选框被选中，我只想获取该值并将其分配为表单中的值，以便将其传递给 send_mail.php。

Answer 1

您可以在表单中添加一个隐藏字段，例如：

<input type="hidden" id="area_is_checked" name="area_is_checked" />

然后在提交表单之前使用JQuery获取复选框值：

$("#final_form").submit(function () {
  $("#area_is_checked").val($("#area").is(':checked'));
  return true;
});

Answer 2

当然！

$('form#new-location').append($("div#move-me-please"));

这是一个 jsFiddle：http://jsfiddle.net/zwxPt/

编辑：因为在我写这个之后答案被编辑了：

如果您确实无法在表单中添加隐藏字段，您仍然可以在用户通过 ajax 提交表单时向表单中添加额外数据。请参阅this stackoverflow question 了解更多信息。

Answer 3

您可以使用form attribute（至少适用于 Opera 9.5+、Safari 5.1+、Firefox 4+、Chrome 10+）：

<input type='checkbox' name='area' id='area' value='West Palm Beach' style='margin-top:-5px !important;' form="final_form">

有一个 Modernizr 测试。但是，您仍然可以使用 form 属性，然后搜索那些而不是像下面这样对外部输入进行硬编码：

$('#final_form').on('submit', function() {
    $('input[form=' + this.id + ']').each(function() {
        var externalInput = $(this);
        // then same as below.
    });
});

---

或者使用 jQuery 代替 form 属性：

$('#final_form').on('submit', function() {
    var externalInput = $('#area');
    var name = externalInput.attr('name');
    /* use existing */
    var hidden = $(this).find('input[name=' + name + ']');
    /* create a new hidden field */
    if ( ! hidden.length ) {
        hidden = $('<input>', {
            name: name
        }).appendTo(this);
    }
    hidden.val(externalInput.is('[type=checkbox]') ? externalInput.prop('checked') : externalInput.val())
});

这将创建一个隐藏字段，或者，如果您正在对其进行验证并且它可能实际上并未提交，请使用已添加的字段。这不需要更新到 HTML。

Answer 4

是的，有..

    <div id="inputsBlock" class='span5' style='margin-left:0px !important;'>
    <label for='area0' style="display: none;">
        <input type='checkbox' name='area' id='area' value='West Palm Beach' style='margin-top:-5px !important;'>
        West Palm Beach
    </label>
</div>
<form method="post" class="form-horizontal" id="final_form" action="send_mail.php">
MORE INPUTS
</form>

<script>
$('#inputsBlock').children().clone().css({display: 'none'}).appendTo($('#final_form'));
</script>