Как сделать проверку для двух полей ввода (знак, модель) в этих джунглях кода?Javascript, Jquery - PullRequest
Новая
       11

Как сделать проверку для двух полей ввода (знак, модель) в этих джунглях кода?Javascript, Jquery

0 голосов
/ 21 февраля 2019

Посмотрите на мой файл шаблона.Мне нужна проверка для поля, выберите вариант с именем = "марка" и выберите вариант с именем = "модель. Все, что мне нужно, это то, что он не может перейти к следующему шагу, если модель и отметка не заполнены. 

<div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content" style="display: flex;">



         <div class="modal-body">


            <form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post" >

               <div class="container-fluid">

                  <div class="step_1"  >
                     <h3 class="modal-title">Reifenmontage Termin buchen  </h3>
                     <div class="row termin_row">
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <label>Pneu-Typ</label>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                           <div class="row">
                              <select onchange="checkSelected()  " class="form-control" name="pneu" id="pneu">
                                 <option value="Motorrad">Motorrad</option>
                                 <option value="Auto">Auto</option>
                              </select>
                           </div>
                        </div>
                     </div>
                     <div id="additionalRow"  class="row termin_row" >
                     <div id="reifenmontage-input" class="row termin_row">
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <label>Mark und model</label>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <select  name="marka" class="form-control" id="button-getdata">
                              </select>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <select name="model" class="form-control" id="result" > 
                              </select> 
                           </div>
                        </div>

                     </div>
                     </div>


                     <div class="row termin_row">
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <label>Anzahl Pneus zur Montage</label>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <select class="form-control" name="anzah4" id="anzah4">
                                 <option value="1">1</option>
                                 <option value="2">2</option>
                                 <option value="3">3</option>
                                 <option value="4">4</option>
                              </select>
                           </div>
                        </div>

                     </div>

                     <div class="row termin_row">
                        <div class="col-sm-4 col-xs-12">
                           <div class="row"><label>1. Terminvorschlag</label></div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group date" id="date-1" data-termin="0">
                                 <input type='text' class="form-control" name="date[0]" />
                                 <span class="input-group-addon">um</span>
                              </div>
                           </div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group time" id="time-1" data-termin="0">
                                 <input type='text' class="form-control" name="time[0]" />
                                 <span class="input-group-addon">Uhr</span>
                              </div>
                           </div>
                        </div>
                     </div>

                     <div class="row termin_row">
                        <div class="col-sm-4 col-xs-12">
                           <div class="row"><label>2. Terminvorschlag</label></div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group date" id="date-2" data-termin="1">
                                 <input type='text' class="form-control" name="date[1]" />
                                 <span class="input-group-addon">um</span>
                              </div>
                           </div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group time" id="time-2" data-termin="1">
                                 <input type='text' class="form-control" name="time[1]" />
                                 <span class="input-group-addon">Uhr</span>
                              </div>
                           </div>
                        </div>
                     </div>

                     <div class="row termin_row">
                        <div class="col-sm-4 col-xs-12">
                           <div class="row"><label>3. Terminvorschlag</label></div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group date" id="date-3" data-termin="2">
                                 <input type='text' class="form-control" name="date[2]" />
                                 <span class="input-group-addon">um</span>
                              </div>
                           </div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group time" id="time-3" data-termin="2">
                                 <input type='text' class="form-control" name="time[2]" />
                                 <span class="input-group-addon">Uhr</span>
                              </div>
                           </div>
                        </div>
                     </div>

                     <div class="row">
                        <div class="checkbox">
                           <label>
                              <input type="checkbox" name="accept" id="accept"> Ich akzeptiere die <a href="teilnahmebedingungen" target="_blank">Teilnahmebedingungen</a>
                           </label>
                        </div>
                     </div>

                     <div class="row text-center">
                        <button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
                     </div>
                  </div>

                  <div class="step_2">
                     <h3 class="modal-title">Your contact info</h3>

                     <div class="">
                        <div class="form-group clearfix">
                           <input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
                        </div>
                        <div class="form-group clearfix">
                           <input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
                        </div>
                        <div class="form-group clearfix">
                           <input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
                        </div>
                        <div class="text-center">
                           <button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
                        </div>
                     </div>

                  </div>

               </div>

            </form>

         </div>
         <div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
         </div>
      </div>
   </div>
</div>

Как выглядит мой js-файл, который имеет контроль над этим файлом, я не могу поселиться в нем и сделать проверку для нужных мне полей 

$(document).ready(function() {
    function e() {
        document.getElementById("accept").checked && 0 < c.length && 0 < d.length ? $("#schedule_form .step_1 .btn-submit").removeAttr("disabled") : $("#schedule_form .step_1 .btn-submit").attr("disabled", "disabled")
    }

    function g() {
        $.ajax({
            method: "POST",
            url: $("#schedule_form").attr("action"),
            data: $("#schedule_form").serialize()
        }).fail(function(a) { 
            toastr.info(a)
        }).done(function(a) {
            toastr.info("<p>Velen Dank</p><p>Ihre Anfrage wurde gespeichert und Sie bekommen in Kurze Bestatigungsmail</p><p>Ihr CC Racing Team</p>",
                "", {
                    timeOut: 8E3
                })
                $("#schedule_form #submit").on("click", function(a) {
                    $("#schedule_form .step_1").addClass("active")
                });
                $('#montageModal').modal('hide');
                $('#schedule_form input[type="text"]').val(''); 

        })
        // setTimeout(function() {window.location = 'http://localhost/ccr/'}, 4000);
        // window.location = 'http://localhost/ccr/';



        // document.getElementById("schedule_form").reset();
        // $('#schedule_form').trigger("reset");
        // $("#schedule_form .step_1");

    }
    $("a.toggleMenu.navbar-toggle").click(function() {
        $("#mob_cart_box .inner_box").load("index.php?route=common/cart/info #prods_inner")
    });
    $(".date").datetimepicker({
        minDate: moment().add(7, "days"),
        format: "DD/MM/YYYY",
        useCurrent: !1,
        widgetPositioning: {
            horizontal: "left"
        },
        allowInputToggle: !0,
        daysOfWeekDisabled: [0, 1, 6],
        locale: "de",
        icons: {
            time: "fa fa-time",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            previous: "fa fa-chevron-left",
            next: "fa fa-chevron-right",
            clear: "fa fa-trash",
            close: "fa fa-remove"
        }
    });
    $(".time").datetimepicker({
        disabledTimeIntervals: [
            [moment().hour(0).minutes(0), moment().hour(8).minutes(30)],
            [moment().hour(12).minutes(0), moment().hour(24).minutes(0)]
        ],
        format: "HH:mm",
        stepping: 30,
        useCurrent: !1,
        allowInputToggle: !0,
        icons: {
            time: "fa fa-time",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            previous: "fa fa-chevron-left",
            next: "fa fa-chevron-right",
            clear: "fa fa-trash",
            close: "fa fa-remove"
        }
    });
    var c = [],
        d = [];
    $("#schedule_form .date, #schedule_form .time").on("dp.change",
        function(a) {
            var b = $(this).data("termin"); 
            a.date ? $(this).hasClass("date") ? c[b] = moment(a.date).format("DD.MM.YYYY") : d[b] = moment(a.date).format("HH:mm") : $(this).hasClass("date") ? c.splice(b, 1) : d.splice(b, 1);
            e()
        });
    $("#schedule_form input[name='accept']").on("change", function(a) {
        e()
        // console.log(e + "DDDDDDDDDDD");
    });
    $("#schedule_form #next_step").on("click", function(a) {
        $("#schedule_form .step_2").addClass("active")
    });
    $("#schedule_form #submit").on("click", function(a) {
        a.preventDefault();
        a.currentTarget.form[10].validity.valid &&
            a.currentTarget.form[11].validity.valid && a.currentTarget.form[12].validity.valid ? g() : toastr.info(a.currentTarget.form[10].validationMessage + "<br/>" + a.currentTarget.form[11].validationMessage + "<br/>" + a.currentTarget.form[12].validationMessage, "", {
                timeOut: 8E3
            })
        // $('#schedule_form input[type="text"]').val('');
        // $("#schedule_form .step_1");
        $("#schedule_form #submit").on("click", function(a) {
            $("#schedule_form .step_1").addClass("active")
        }); 
    });
    if ($("#preloader").length) $(window).on("load", function() {
        $("#preloader").fadeOut(200);
        $("#preloader-wrapper").delay(200).fadeOut(200)
    });
    var f;
    $(window).on("resize", function() {
        f = $(window).height();
        var a = $(window).width(),
            b = $(window).height();
        .9 <= (a / b).toFixed(1) ? ($("#slider .hidden").removeClass("hidden"), $("#slider .carousel-sm").addClass("hidden")) : ($("#slider .hidden").removeClass("hidden"), $("#slider .carousel-lg").addClass("hidden"));
        1200 > a ? ($("#side_filter h3 a").hasClass("collapsed") || ($("#side_filter h3 a").addClass("collapsed"), $("#side_links h3 a").addClass("collapsed")), $(".side_filter_group form").removeClass("in"), $("#side_links_nav").removeClass("in"), $(".side_links_group nav").removeClass("in")) : ($(".side_filter_group form").addClass("in"),
            $("#side_links_nav").addClass("in"), $(".side_links_group nav").addClass("in"))
    }).resize();
    $(".hero-scroll").click(function() {
        $("html, body").animate({
            scrollTop: f
        }, 400)
    })
});

и посмотреть код, который я установил в файле шаблона, которыйманипулировать с опцией выбора. Это только скрипт сценарий 

<script type="text/javascript">
   let selectItem = document.getElementById('pneu');
   //let additionalRow = document.getElementById('additionalRow');
   let detached = '';
   function checkSelected() {
      if (selectItem.selectedIndex == "1") {
         detached = $('#reifenmontage-input').detach();
      } else {
         detached.appendTo('#additionalRow');
      }
   }
</script> 

<script type="text/javascript">
$('#button-getdata').on('change', function() {
    $.ajax({
        url: 'index.php?route=api/reifenmontage/get_marka_data',
        type: 'post',
        data: $('#reifenmontage-input select'),
        dataType: 'json',
        beforeSend: function() {

        },
        success: function(json) {

            if (json['success']) {
               $("#result").empty();
                for (i in json['success']) {
                var element = json['success'][i];
                var o = new Option(element['model'], element['model']);
               $("#result").append(o);
                    html = "\t<option  value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
                    $("#result").append(o); 

                }
               //  document.getElementById("schedule_form").reset();

            }   

        }
    });
});
</script>  

<script type="text/javascript">

$.ajax({
 url: 'index.php?route=api/reifenmontage/mark',
 context: document.body,
 success: function(data) {
   const selectControl = $('#button-getdata');
   selectControl.html(data.map(ExtractData).join(''));
 }
});

function ExtractData(item) {
return ` <option value="${item.value}">${item.label}</option>`;
}

</script>
...