Member Avatar for kiail

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
  • 245 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for AleMonteiro

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.