Захват значений извне формы

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

Уверен!

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

Вот jsFiddle: http://jsfiddle.net/zwxPt/

Edit: так как ответ был отредактирован после того как я написал это:

Если вы действительно не можете добавить скрытое поле в форме, вы можете добавить дополнительные данные в вашу форму, когда пользователь отправляет их, отправив их через ajax. См. this stackoverflow question для получения дополнительной информации.

Answer 2

Вы можете использовать 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 3

Вы можете добавить скрытое поле внутри формы, как:

<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 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>