Capturing values from outside a Form with Javascript

Question

Full page is at http://f14.co/auto-search/reno

I have the following checkbox set up outside a form:

<div class='span5' style='margin-left:0px !important;'>
    <label for='model0'>
    <input type="checkbox" name="model0x" id="model0x"
    value="Accord" style='margin-top:-5px !important;'> Accord</label>
</div>

I have this javascript between the checkbox and the form:

<script>
    if($("#model0x").is(':checked')){
      $("#model0_is_checked").val($("#model0x").val());
    }else{ 
      $("#model0_is_checked").val("Not Checked"); 
    }   
</script>

Finally, I have this hidden input to call that value inside the form when the item is checked or not:

 <form method="post" class="form-horizontal" id="final_form" action="send_mail.php">
 <input type="hidden" id="model0_is_checked" name="model0_is_checked">
   MORE FORM STUFF AND SUBMIT BUTTON 
 </form>

No matter what I'm getting no value in the send_mail.php ....what am I doing wrong?

how are you calling that if()? On page load it looks like it will return false, and unless you re-call it on form submit, or other event, it will not be re-called. — Sean
– Sean, Commented Aug 8, 2013 at 1:29
Also model0_is_checked doesnt exist yet. Your trying to set an object the browser hasnt rendered yet. Try just moving your javascript to the bottom of the page so it runs after the page has rendered. — Colin Pear
– Colin Pear, Commented Aug 8, 2013 at 1:43

user2658927 · Accepted Answer · 2013-08-08 02:44:36Z

1

$('#model0x').click(function(){
    var self=this;
    $("#model0_is_checked").val($(self).is(':checked')?self.value:'Not Checked');
    // do something
});
// or use submit ()

answered Aug 8, 2013 at 2:44

user2658927

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Sean · Accepted Answer · 2013-08-08 01:40:10Z

0

Bind the function to the form submit.

<script>
$('#final_form').on('submit',function(){
    if($("#model0x").is(':checked')){
        $("#model0_is_checked").val($("#model0x").val()); }
    else { $("#model0_is_checked").val("Not Checked");}
});
</script>

jsFiddle example http://jsfiddle.net/KZrLp/

answered Aug 8, 2013 at 1:40

Sean

12.4k3 gold badges31 silver badges49 bronze badges

1 Comment

Ken Over a year ago

Do I need to change my hidden input at all within the form?

Pik' · Accepted Answer · 2013-08-08 01:34:12Z

0

Your Javascript runs once, when the page (or more accurately, the <script> tag) is loaded. You have to make it run when the form is submitted instead:

<script type="text/javascript">
function updateHidden() { // Find a better name ;)
    if($("#model0x").is(':checked'))
        $("#model0_is_checked").val($("#model0x").val());
    else
        $("#model0_is_checked").val("Not Checked");
}
$(document).ready(function() { $('#final_form').submit(updateHidden); });
</script>

P.S. : not tested code

answered Aug 8, 2013 at 1:34

Pik'

7,1571 gold badge31 silver badges25 bronze badges

Collectives™ on Stack Overflow

Capturing values from outside a Form with Javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related