CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Ken
Ken

Reputation: 57

Grabbing values from outside of a form

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

Answers (4)

Jithesh
Jithesh

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

kalley
kalley

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

Moeri
Moeri

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

Rafael Martinez
Rafael Martinez

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

Related Questions