1

I have a form to display quotes based on data recieved/checked.

It's a non-refreshing page, so it uses ajax get the submit click and then it sends data to php file.

The main problem is that the checkboxes are ALWAYS checked, and are echo'ing "ON". I need the checkboxes to work as normal, unchecked by default and then when user clicks on it, and submits the form they will actually be checked.

These are the checkboxes

<div class="checkbox">
        <label><input type="checkbox" name="lighting" id="lighting"><font color="#2C3E50" value="">Lighting</label></font>
        <label><input type="checkbox" name="heating" id="heating"><font color="#2C3E50" value="">Heating</label></font>
        <label><input type="checkbox" name="dancefloor" id="dancefloor"><font color="#2C3E50" value="">Dancefloor</label></font>
        <label><input type="checkbox" name="internaldressing" id="internaldressing" value=""><font color="#2C3E50">Internal Dressing</label></font>
    </div>

I tried removing value attribute, I tried adding checked attribute. literraly nothing helps.

This is part of the AJAX file: 

    var dataString = 'eventtype=' + eventtype + '&peoplecount=' + peoplecount + '&location=' + location + '&eventdate=' + eventDate + '&lighting=' + lighting + '&heating=' + heating + '&dancefloor=' + dancefloor + '&internaldressing=' + internaldressing;


    $.ajax({  
    type: 'POST',  
    url: 'process.php',
    data: dataString,
    success: function(data) {
        if( data == '0' )
            alert( 'Błędne dane logowania!!!' );
        else
             $('#results').html(data);

    }  
}); 
        event.preventDefault();

And then my PHP looks like this. 

if(isset($_POST)){

        // Total price of quote. 
        $price = 0;
        // Prices of extras. 
        $lighting_price = 0;
        $heating_price = 0;
        $dancefloor_price = 0;
        $internaldressing_price = 0;

        // Stage I VARIABLES
        $eventType = $_POST['eventtype'];
        $peoplecount = (int)$_POST['peoplecount'];
        $location = $_POST['location'];
        $eventDate = $_POST['eventdate'];

        // Stage II VARIABLES 
        $lighting = $_POST['lighting'];
        $heating = $_POST['heating'];
        $dancefloor = $_POST['dancefloor'];
        $internaldressing = $_POST['internaldressing'];

        // If there are less than 70 guests then make base price 650. 
        if($peoplecount < 70){
            $price = $price + 650;
            $lighting_price = 75; 
            $heating_price = 150;
        }

        // If there are between 71 and 130 guests then make base price 950.
        if(($peoplecount >= 71) && ($peoplecount <= 130)){
            $price = $price + 950;
            $lighting_price = 150;
            $heating_price = 250;
        }

        if (isset($_POST['lighting'])){
            echo "IM TICKEED!!!!!!!";
        }

        if (isset($_POST['heating'])){
            echo "IM TICKEED!!!!!!!";

        }

        echo $eventType . "<br>";
        echo $peoplecount . "<br>";
        echo $lighting . "<br>";
        echo $heating . "<br><br>";
        echo $price;

        }

Thanks for any help.

Improve this question
17
  • and the checkbox is ? Commented Sep 2, 2016 at 15:40
  • Edited the main post to add checkboxes. Commented Sep 2, 2016 at 15:43
  • Instead of if (isset($_POST['lighting'])){ try if (!empty($_POST['lighting'])){ Commented Sep 2, 2016 at 15:47
  • Can you please show us what the content is for $_POST on those variables related to the checkboxes? Commented Sep 2, 2016 at 15:57
  • I tried doing !empty and that didn't work either. @devlincarnate what do you mean content? The html part, php and js That's all i've got. When $_POST in php, they echo as "ON". Commented Sep 2, 2016 at 16:01

2 Answers 2

Reset to default
2

First thing first. Please add value attribute to your checkbox. They will be passed as the value to your url.

Please check whether the checkbox is selected or not. Try putting the checked pseudo selector.

$('#lighting:checked').val()

If the checkbox is not checked then it will give you undefined value so please check that condition while assigning value.

 var lighting = ($('#lighting:checked').val() === undefined )? null : $('#lighting:checked').val();

The above line won't effect code that much but it's a good to have thing.

While assigning it to your datastring variable you can check whether it is null or undefined or not and append the string like that. If the variable has a value then append it to the datastring variable which you will pass as ajax url.

Hope this will solve your problem.

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

5 Comments

Thanks, I used this to if($_POST['variable'] == "null") to check that info whether it has been checked or not and it's working this way, so I picked your answer. I'm just wondering are there any downsides of using this method?
Well actually I think you should not put that condition like that. If a checkbox is not selected you should not append it to url. You can create your data url based on which checkboxes are selected. Then send your request on the url. The unchecked checkbox won't pass to your requested url and you can use empty() or isset() to check the values... If you didn't get what I said and want my answer to be elaborated I can do that to show you. ^_^
Ah okay sorry, I read your comment again and I get it now, so basically if they do return null then do not include them in the dataString at all and if they are checked then include them. I'm only wondering how would I do this though, i'm not so good in js and I'm beginner in php
@JugaIK , it sure did, thanks a lot. I made a simple if statement for each of the variables and it works. It probably would have been more efficient doing this in a loop? hmm
well yup. To do that assign same class for every checkbox on which you want to assign the value. And then use $.each() for assigning values. You might need to adjust your values accordingly as you want the key of url dynamic here.You can assign a data- attrib to determine which checkbox is for which url key. like for lighting you can do something like value='1' data-name='lighting' and in $.each loop get data('name') to get the value to be assigned.
0

In javascript ajax syntax, Place this code inside the ajax request success function

document.getElementById('lighting').checked = false;

do this for other checkboxes by changing id name

Improve this answer

7 Comments

I already tried looping all the input types checkbox and making them false, unfortunately that didn't work too.
Sometimes the javascript code that you are wrote in <heade> </head> Tag. Don't do that. You should be include your javascript code at up to </body> tag.
getElementById('id') property has become to null when inside the <head></head> tags because it's read first before your html dom read.
Do you understand? or still having problem? but don't worry I'm still help you.
The javascript is not in the head, so this shouldn't be the issue.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.