Reputation: 57
I need to grab the code from another part of my page without putting it in the form… is there a way to do it with JavaScript/jQuery?
Essentially, I’d like to take the value from here:
<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>
And put it into the form that exists elsewhere on the same page.
<form method="post" class="form-horizontal" id="final_form" action="send_mail.php">
MORE INPUTS
</form>
Is there a simple JavaScript way to do this? I just want to take the value if the checkbox is checked and assign it as a value within the form so that it gets passed on to send_mail.php.
Upvotes: 0
Views: 109
Reputation: 972
Yes, there is..
<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>
Upvotes: 0
Reputation: 18472
You can use the form
attribute (works in at least 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">
There is a Modernizr test for it. You can however still use the form
attribute, and then search for those instead of hard-coding the external inputs like the following:
$('#final_form').on('submit', function() {
$('input[form=' + this.id + ']').each(function() {
var externalInput = $(this);
// then same as below.
});
});
Or using jQuery instead of the form
attribute:
$('#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())
});
This will create a hidden field or, if you're doing validation on it and it might not actually submit, use one that was already added. This requires not update to the HTML.
Upvotes: 0
Reputation: 9314
Sure!
$('form#new-location').append($("div#move-me-please"));
Here's a jsFiddle: http://jsfiddle.net/zwxPt/
Edit: since the answer was edited after I wrote this:
If you really can't add a hidden field to the form, you can still add extra data to your form when the user submits it by submitting it via ajax. See this stackoverflow question for more info.
Upvotes: 1
Reputation: 792
You can add a hidden field inside the form, like:
<input type="hidden" id="area_is_checked" name="area_is_checked" />
Then use JQuery to get the checkbox value before submitting the form:
$("#final_form").submit(function () {
$("#area_is_checked").val($("#area").is(':checked'));
return true;
});
Upvotes: 2