0

So here is my 

<script type="text/javascript">
 $(document).ready(function() {

$("#btn-pay").click(function() {      
    var no_dvd = $('input:checkbox').is(':checked');
    if(!no_dvd) {
        alert("Please select at least 1 DVD!");
        return false;
    } else {
        var $this = $(this);
        var $form = $this.parents('form');
        var action = $("#paid").attr('action');

        var sname=$("#sname").val();
        var email=$("#email").val();
        var contact = $("#contact").val();

         var selectedItems = new Array();
        $("input[name='vid[]']:checked").each(function() {selectedItems.push($(this).val());});

         var values = new Array();
            $.each($("input[name='vid[]']:checked"), function() {
            values.push($(this).val());
            });
        var form_data = {
            vid : selectedItems,
            sname : sname,
            email : email,
            contact : contact,
            is_ajax : 1
        };
        $.ajax({
            type : "POST",
            url : action,
            data : form_data,
            success : function(response) {
                    if (response == 'exceeds') {
                        alert("The total DVD you selected has exceeded the maximum DVD you can rent!");
                        return false;
                    }
                    else if (response == 'empty') {
                        alert("Please select at least 1 DVD!");
                        return false;
                    }
                    else if (response == 'empty_text') {
                        alert("All fields are required.Please fill in all the text!");
                        return false;
                    }
                    else if (response == 'emailinvalid') {
                        alert("Please input correct email!");
                        return false;
                    }
                    else if (response == 'phoneinvalid') {
                        alert("Please input correct contact number!");
                        return false;;
                    }
                    else if (response == 'success') {
                        alert("uhuuu!");
                        return false;
                        //window.parent.location="<?php echo base_url();?>payment/success";
                    }
                } ,
            error: function(){
                    alert("Error detected");
                }                   
            });
        }
    }); 

});

</script>

while my form textfields:

<form method='post' id='paid' action='<?php echo base_url();?>payment/pay'>
<input type='checkbox' class='vid' name='vid[]' value='<?php echo $vid;?>' title='Check to rent this'/>
<input  required name="sname" id='sname' type="text" class="bok_form1" />
<input required  name="email" id='email' type="email" class="bok_form1" />
<input  required='required' size="8" name="contact" id='contact' type="tel" class="bok_form1" />
<input type='image' id='btn-pay' src="<?php echo base_url(); ?>assets/images/confirm.png" alt="Pay" border="0"  />      
</form>

my payment/pay.php

public function pay() {
    $sname=mysql_real_escape_string($_POST['sname']);
    $email=mysql_real_escape_string($_POST['email']);
    $contact = mysql_real_escape_string($_POST['contact']);
    $vid=($_POST['vid']);
    $cart=$this->session->userdata('shoppingCart');

    //print_r($vid);
    $dvd=$this->session->userdata('total_dvd');
    if(empty($sname) || empty($email) || empty($contact)) {
        echo "empty_text";
    } elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "emailinvalid";
    }elseif(!ctype_digit($contact) || strlen($contact)>8 || strlen($contact)<8) {
        echo "phoneinvalid";
    }elseif(count($vid)>$dvd) {
        echo "exceeds";
    }  else {           
        echo "success";     
    }   
}

So when the textfields input for name and email works (ajax return and jquery will alert anything as I stated inside 'success:' condition), somehow, when it goes to 'invalidphone' turn (i typed 'abc' as contact value), it won't alert, but instead it will go to the controller (payment/pay) plain php page and echo out 'invalidphone' Why?

While the rest of the responses (empty/empty_text/emailinvalid), jquery will alert it and stays at the same page.

What did I do wrong?

user2960754
  • 233
  • 1
  • 2
  • 16
  • Welcome to the wonderful world of **async**! You can't do that. – SLaks Feb 19 '14 at 16:29
  • how should I do?? I'm pretty much doing the same logic as my previous question on: http://stackoverflow.com/questions/21797941/jquery-ajax-wont-alert-some-message how should I do?? strange is, only the contact textfield doesn't work... – user2960754 Feb 19 '14 at 16:32
  • Your previous question doesn't try to return anything from the ajax request, it just reloads the page. The return is what's invalid. – Kevin B Feb 19 '14 at 16:34
  • Watch out: you used "required='required'" in phone input, instead of "required", which you use for other inputs, and which is correct (see ihttp://www.w3schools.com/tags/att_input_required.asp). – MarcoS Feb 19 '14 at 16:37

0 Answers0