Моя jQuery Ajax функция успеха не работает, не отображает вывод консоли и не проверяет форму - PullRequest
1 голос
/ 17 марта 2020

Я трудился над этим некоторое время. Этот опрос отправляет данные каждый раз, когда я нажимаю кнопку «отправить», независимо от того, что я там ввел.

Я использовал, чтобы получить вывод и сообщение (result.result == 1), которое находится внизу, когда Я проверил все семь вопросов, но теперь он просто молча отправляет все и вся, и я получаю его в своей базе данных без любого вывода.

Даже когда я использовал, чтобы получить весь вывод, для флажка вопрос (вопрос 5) Я получал бы противоположное сообщение console.log «Флажок снят», когда в действительности он был проверен, остальная часть вывода консоли была в порядке. И вывод будет только работать, если я проверил все семь. У меня есть контактная форма на этом сайте с точно таким же методом (jQuery, JSON, Ajax функция успеха), она хорошо работает.

Как я могу это исправить?


    <form id="survey" method="post" action="actions.php">
      <div id="survey-close-button" class="popup" data-popup="popup-1">

        <div class="popup-inner">

          <div id="question1">
            <p><label>1) What gender are you?</label></p>
            <input type="radio" class="radios" name="gender" value="male">Male<br>
            <input type="radio" class="radios" name="gender" value="female">Female<br>
            <input type="radio" class="radios" name="gender" value="other">Other
          </div>

          <div id="question2">
            <p><label>2) How old are you?</label></p>
            <select id="age" name="ageselect">
              <option value="0">Please select</option>
            </select>
          </div>

          <div id="question3">
            <p><label>3) English student for: </label></p>
            <input type="radio" class="radios" name="years" value="0-2">0-2years<br>
            <input type="radio" class="radios" name="years" value="2-5">2-5years<br>
            <input type="radio" class="radios" name="years" value="5-10">5-10years<br>
            <input type="radio" class="radios" name="years" value="allmylife">all my life<br>
            <input type="radio" class="radios" name="years" value="never studied">never studied
          </div>

          <div id="question4">
            <p><label>4) Experience with English abroad</label></p>
            <input type="radio" class="radios" name="abroad" value="less than a year">less than a year<br>
            <input type="radio" class="radios" name="abroad" value="1-3 years">1-3 years<br>
            <input type="radio" class="radios" name="abroad" value="3-6 years">3-6 years<br>
            <input type="radio" class="radios" name="abroad" value="6-10 years">6-10 years<br>
            <input type="radio" class="radios" name="abroad" value="all my life">all my life<br>
            <input type="radio" class="radios" name="abroad" value="never lived abroad">never lived abroad
          </div>

          <div id="question5">
            <p><label>5) How do you learn English? Choose all that apply</label></p>
            <input type="checkbox" class="check" name="way[]" value="inperson">in-person course<br>
            <input type="checkbox" class="check" name="way[]" value="privateteacher">private teacher<br>
            <input type="checkbox" class="check" name="way[]" value="selflearner">self-learner<br>
            <input type="checkbox" class="check" name="way[]" value="onlinecourse">online course<br>
            <input type="checkbox" class="check" name="way[]" value="onlineteacher">onlineteacher<br>
            <input type="checkbox" class="check" name="way[]" value="videogames">video games<br>
            <input type="checkbox" class="check" name="way[]" value="other">other

          </div>

          <div id="question6">
            <p><label>6) How many foreign languages do you speak?</label></p>
            <input type="radio" class="radios" name="others" value="one">One<br>
            <input type="radio" class="radios" name="others" value="two">Two<br>
            <input type="radio" class="radios" name="others" value="three">I'm a polyglot

          </div>

          <div id="question7">
            <p><label>7) Where do you live?</label></p>
            <input type="radio" class="radios" name="country" value="Brazil">Brazil<br>
            <input type="radio" class="radios" name="country" value="Abroad">Abroad
          </div>
          <button id="submit_survey" type="submit" name="submitsurvey">Submit</button>
        </div>

      </div>
    </form>

Вот код jQuery: отредактировано

<script>
    var selectElement = document.getElementById("age");
    if (selectElement !== undefined) {
        for (var agenum = 1; agenum <= 100; agenum++) {
            selectElement.add(new Option(agenum));
        }
    }

    var validForm = false;
    var input1 = $('input[name=gender]:checked').val();
    var input3 = $('input[name=years]:checked').val();
    var input4 = $('input[name=abroad]:checked').val();

    var input6 = $('input[name=others]:checked').val();
    var input7 = $('input[name=country]:checked').val();

    if (typeof input1 == "undefined" ||
        typeof input3 == "undefined" ||
        typeof input4 == "undefined" ||
        typeof input6 == "undefined" ||
        typeof input7 == "undefined") {

        console.log('Its Empty');
        validForm = false;
    }
    else {
        console.log(input1, input3, input4, input6, input7);
        validForm = true;
    }

    if (selectElement.value > 0) {
        validForm = true;
        console.log('good age');
    }

    if (selectElement.value == 0) {
        validForm = false;
        console.log('no age');
    }

    var check;
    check = $("#check").prop("checked");
    if(check) {
        console.log("Checkbox is checked.");
        validForm = true;
    }
    else {
        console.log("Checkbox is unchecked.");
        validForm = false;
    }

    $("#survey").submit(function(){
        return false;
    });

    $("#submit_survey").on("click", function(){

        var formData = $("#survey :input").serializeArray();

        formData[formData.length] = { name: "action", value: "submit_survey"};
        formData.push({});

        $.ajax({
            type: "POST",
            url: $("#survey").attr("action"),
            data: formData,
            dataType: 'json',
            async: true,
            success: function(result){

                // If all is good do stuff
                if (result.result == 1) {
                    alert("Your survey has been submitted, thank you");
                    //$("#survey")[0].reset();
                }
                if (result.result == 2) {
                    alert("Please Try again");
                }

            } // Ajax, success function//
        }); // Ajax//

    }); // Submit on.click function//

</script>

Вот действия. php отредактировано на необходимые части:

<?php
    require_once('./dbconn.php');

    $action = "";

    if (isset($_POST["action"])) {
        $action = $_POST["action"];

        if ($action == "submit_survey") {
            $export = Array();
            $gender = $_POST["gender"];

            $ageselect = $_POST["ageselect"];
            $years = $_POST["years"];
            $abroad = $_POST["abroad"];

            $way[] = $_POST["way"];
            $others = $_POST["others"];
            $country = $_POST["country"];

            $way = implode(' + ', $_POST['way']);

            $sql = "INSERT INTO survey (Radio_1, Age, Radio_3, Radio_4, Radio_5,
                   Radio_6, Radio_7)

            VALUES ('$gender', '$ageselect', '$years', '$abroad', '$way', '$others',
                   '$country')";

            if (mysqli_query($conn, $sql) === TRUE) {
                $export['result'] = "1";
            }
            else {
                $export['result'] = "2";
            }
        }
        echo json_encode($export);
    }
?>



Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...