samedi 9 juin 2018

Cannot uncheck checkbox

I am trying to uncheck a checkbox once my form is submitted

on the html side I have the following

<form class="form contact-form" id="contact_form">
  <input type="checkbox" id="store_pickup" name="pickup" value="pickup" onclick="storeDetails()">
  <label for="store_pickup">Store Pickup</label>
  ....

And then I have an existing JS file for the form which work for all other input types but Checkbox

$(document).ready(function(){
$("#submit_btn").click(function(){

  //get input field values
    var user_name = $('input[name=name]').val();
    var user_email = $('input[name=email]').val();
    var user_message = $('textarea[name=message]').val();

    //simple validation at client's end
    //we simply change border color to red if empty field using .css()
    var proceed = true;
    if (user_name == "") {
        $('input[name=name]').css('border-color', '#e41919');
        proceed = false;
    }
    if (user_email == "") {
        $('input[name=email]').css('border-color', '#e41919');
        proceed = false;
    }

    if (user_message == "") {
        $('textarea[name=message]').css('border-color', '#e41919');
        proceed = false;
    }

    //everything looks good! proceed...
    if (proceed) {
        //data to be sent to server
        post_data = {
            'userName': user_name,
            'userEmail': user_email,
            'userMessage': user_message
        };

        //Ajax post data to server
        $.post('contact_business.php', post_data, function(response){

            //load json data from server and output message
            if (response.type == 'error') {
                output = '<div class="error">' + response.text + '</div>';
            }
            else {

                output = '<div class="success">' + response.text + '</div>';

                //reset values in all input fields
                $('#contact_form input').val('');
                $('#contact_form textarea').val('');
                // $('#store_pickup').attr('checked', false);
                // $("#store_pickup").prop('checked', false);


            }

            $("#result").hide().html(output).slideDown();
        }, 'json');

    }

    return false;
});

//reset previously set border colors and hide all message on .keyup()
$("#contact_form input, #contact_form textarea").keyup(function(){
    $("#contact_form input, #contact_form textarea").css('border-color', '');
      // $("#store_pickup").attr('checked', false);
      // $("#store_pickup").prop('checked', false);
    $("#result").slideUp();
  });
});

I've tried the two following statment commented out in the code but these do not work, can anyone assist me. Thank you!




Aucun commentaire:

Enregistrer un commentaire