0

I'm making a contact form. I need it to display the label of a selected check box in a message produced in my JavaScript and validation that makes sure at least one box is checked. I thought this would be simple, but poking my eyes seems like it would suit me better. Any help?

Here are my checkboxes as they are in my page (there are other fields i didn't include, that work fine)

    <input type="checkbox" name="hobby[]" id="hunting" value="" />
    <label for="hunting" id="hunting_label">Hunting</label>

    <input type="checkbox" name="hobby[]" id="growing" value="" />
    <label for="growing" id="growing_label">Growing</label>

    <input type="checkbox" name="hobby[]" id="identification" value="" />
    <label for="identification" id="identification_label">Identification</label>

    <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />  
  </fieldset>  
</form>  
</div> 

JavaScript

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
  $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".button").click(function() {
    // validate and process form
    // first hide any error messages
$('.error').hide();

  var name = $("input#name").val();
    if (name == "") {
  $("label#name_error").show();
  $("input#name").focus();
  return false;
}
    var email = $("input#email").val();
    if (email == "") {
  $("label#email_error").show();
  $("input#email").focus();
  return false;
}
    var phone = $("input#phone").val();
    if (phone == "") {
  $("label#phone_error").show();
  $("input#phone").focus();
  return false;
}

    var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
    //alert (dataString);return false;

    $.ajax({
  type: "POST",
  url: "bin/process.php",
  data: dataString,
  success: function() {
    $('#contact_form').html("<div id='message'></div>");
    $('#message').html("<h2>Contact Form Submitted!  Your interest in hobby[i] is noted.</h2>")  //this is where I need to add my selected checkbox label, to read which hobby it is.
    .append("<p>We will be in touch soon.</p>")
    .hide()
    .fadeIn(1500, function() {
      $('#message').append("<img id='checkmark' src='images/check.png' />");
    });
  }
 });
return false;
});
});
runOnLoad(function(){
  $("input#name").select().focus();
});
2
Contributors
1
Reply
2
Views
4 Years
Discussion Span
Last Post by AleMonteiro
0

Check this example:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script>
            $(function(){
                $("#submit_btn").click(function(){

                    // Get checked inputs
                    var $chks = $("input.chkHobby:checked");

                    // No one checked
                    if ( $chks.length == 0 ) { 
                        alert("No Checked");
                        return;
                    }

                    // Store checked labels
                    var checkedLabels = [];

                    $chks.each(function() {
                        checkedLabels.push( $(this).next("label").text() );
                    });

                    alert( "Selected Hobbies: " + checkedLabels.join(", "));

                });
            });
        </script>
    </head>

    <body>
        <input type="checkbox" name="hobby[]" id="hunting" value="" class="chkHobby"/>
        <label for="hunting" id="hunting_label">Hunting</label>

        <input type="checkbox" name="hobby[]" id="growing" value="" class="chkHobby" />
        <label for="growing" id="growing_label">Growing</label>

        <input type="checkbox" name="hobby[]" id="identification" value="" class="chkHobby" />
        <label for="identification" id="identification_label">Identification</label>

        <input type="button" name="submit" class="button" id="submit_btn" value="Send" /> 
    </body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.