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>

从表单外部抓取值

4 个答案: