0

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.

Ken
  • 57
  • 4
  • 15
  • There sure is. What have you tried? – j08691 Aug 07 '13 at 20:58
  • Nothing. I don't even know where to start. – Ken Aug 07 '13 at 20:59
  • I don't know about anyone else, but I could use more information. What triggers the "grab"? A button click? Where is the button? How would you like the value to be put in the form? In a hidden input, maybe? –  Aug 07 '13 at 20:59
  • Do you want to move the value itself, putting it in a new container (div? input? the middle of a paragraph?) or do you want to clone/move some element and put it elsewhere? A sample of before and after code would probably illustrate this very clearly. – Surreal Dreams Aug 07 '13 at 21:05
  • I want to add it as a value that's not displayed in the other form, but will get passed on to send_mail.php – Ken Aug 07 '13 at 21:08
  • You'll need to add a hidden input to the form OR submit the form via ajax and add the extra value in your javascript code. See Rafaels response for the hidden input approach, see my response for the ajax approach. ;-) – Moeri Aug 07 '13 at 21:12

4 Answers4

2

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;
});
Rafael Martinez
  • 772
  • 3
  • 11
  • The return true makes sure that the form is submitted after the function. I just put it in there for the user to know that there's the possibility to return false and avoid submitting. – Rafael Martinez Aug 07 '13 at 21:12
  • Within the php, should I be calling 'area' or 'area_is_checked' – Ken Aug 07 '13 at 21:36
  • I got that part...I want to actually call that value though (West Palm Beach). How do I do that? – Ken Aug 07 '13 at 21:40
  • This is only returning true every time...even when I plugin a different return value. – Ken Aug 07 '13 at 22:10
1

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.

Community
  • 1
  • 1
Moeri
  • 9,104
  • 5
  • 43
  • 56
0

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.

kalley
  • 18,072
  • 2
  • 39
  • 36
0

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>
Jithesh
  • 972
  • 4
  • 10