Stepformwizard не скрывается. Переполнение в правой части экрана - PullRequest
1 голос
/ 24 апреля 2020

Я не очень опытен в jquery и пошаговом мастере. Я работаю над кодом, написанным кем-то другим. Проблема в том, что используется набор полей multistepformwizard, и следующий шаг должен быть загружен только при нажатии кнопки Next. Но в настоящее время оба шага видны на экране с дополнительной горизонтальной полосой прокрутки. Я не хочу, чтобы форма шага 2 была видимой. Вот код html и jquery.

<div class="ztab-sec ztab-desbrd bksrvsec bksecrv2">
        <div class="row">
            <div class="col-md-12">                 
                <form  action="<?php echo base_url()?>service/service_request" method="POST" id="wizard_example_6" autocomplete="off">
                    <input type="hidden" value="<?php echo $ownerArr[0]['email_id']; ?>" name="email_id">
                <input type="hidden" value="<?php echo $ownerArr[0]['phone']; ?>" name="mobile">
                    <fieldset>
                            <legend>Basic information about your car</legend>

                                <div class="row bkmargin">
                                <div class="col-lg-4 col-sm-4">
                                    <div class="form-group">
                                        <label>Vehicle Brand</label>
                                        <select id="u_car_id" class="form-control" name="car_id" required>
                                            <option selected disabled value="">Select a Car</option>
                                            <?php foreach ($cars as $car_details) : ?>
                                            <option value="<?php echo $car_details['user_car_id']; ?>"><?php echo $car_details['makesTitle']; ?>   (<?php echo $car_details['modelsTitle']; ?>) <?php echo $car_details['car_reg_no']; ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>                                  
                                </div>
                                <div class="col-lg-4 col-sm-4">
                                    <div class="form-group">
                                        <label>Variants</label>
                                        <input type="text" class="form-control"  name="variant" placeholder="Variants" required data-parsley-group="block0"  id="variant" readonly pattern="^[a-zA-Z\s]*$">
                                    </div>                                  
                                </div>
                                <div class="col-lg-4 col-sm-4">
                                    <div class="form-group">
                                        <label>Transmission</label>
                                        <input type="text" class="form-control" placeholder="Transmission" name="transmission" readonly required data-parsley-group="block0" id="transmission" pattern="^[a-zA-Z\s]*$">
                                    </div>                                  
                                </div>
                            </div>

                            <legend class="clearfix">Select service for your car?  <a href="#"  class="car-link pull-right" data-toggle="modal" data-target="#myModal3" >Add New Car</a></legend>                                   
                            <div class="row bkmargin">  
                                <div class="col-md-4 col-sm-4">
                                    <div class="form-group besrvx">
                                        <input id="option-one" name="service_type" value="1" class="styled-radio " type="radio" data-parsley-group="block0" required data-required-message="Please check one service">
                                        <label class="srvlabel" id="1" for="option-one"><strong>Basic Service: </strong> 
                                            <span class="srvspa">3 months or 5000 kms (whichever is earlier)</span>                                        
                                        </label>                    
                                    </div>                                          
                                </div>
</fieldset>
<fieldset>
                            <legend>Vehicle picked up address  </legend>
                            <div class="row bkmargin">
                                <div class="col-lg-4 col-sm-4">
                                    <div class="form-group">
                                        <label>Select Address</label>
                                        <select class="form-control" id="user_add_id" name="pick_id">
                                            <option selected disabled>Select Address</option>
                                            <?php $i=1; foreach ($address as $user_details) : ?>
                                            <option value="<?php echo $user_details['add_id'] ?>"> Address <?php echo $i; ?></option>
                                            <?php $i++; endforeach; ?>
                                            <option id="neww" class="neww" value="neww">Select new Address</option>
                                        </select>                                       
                                    </div>                                  
                                </div>
                                <div class="col-lg-4 col-sm-4">
                                    <div class="form-group">
                                        <label>Address Type</label>
                                        <select class="form-control" id="add_type" name="add_type" disabled>
                                            <option value="" selected disabled>Select Address Type</option>
                                            <option value="Home">Home Address</option>
                                            <option value="Office">Office Address</option>
                                            <option value="Other">Other Address</option>
                                        </select>
                                    </div>  
<div class="row bkmargin">  
                                <noscript>
                                    <input class="nocsript-finish-btn sf-right nocsript-sf-btn" type="submit" value="submit"/>
                                </noscript>                             
                                </div>          

</fieldset>
        </form>

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

, вот это jquery

 w6 = $("#wizard_example_6").stepFormWizard({
        onNext: function(b, a) {
            return $("#wizard_example_6").parsley().validate("block" + b)
        },
        onFinish: function(b) {
            return $("#wizard_example_6").parsley().validate()
        }
    });
    var d = window.location.hash.match(/^#step-(\d+)/),
        c = 0;
    null !== d && (c = d[1] - 1);
    w7 = $("#wizard_example_7").stepFormWizard({
        startStep: c,
        onNext: function(b, a) {
            window.location.hash = "#step-" + (b + 2)
        },
        onPrev: function(b, a) {
            window.location.hash = "#step-" + b
        },
        onFinish: function(b) {
            window.location.hash = "#form-sended"
        }
    })
};
$(document).ready(function() {
    prepare_example();
    $("pre code").each(function(c, b) {
        hljs.highlightBlock(b)
    });
    var d = $(location).attr("search").match(/t=([a-z]+)/);
    "undefined" != typeof d && null != d ? ($(".sf-wizard").parent().removeClass("sf-sea").addClass("sf-" + d[1]), $(".bt-" + d[1]).removeClass("btn-default").addClass("btn-info")) : $(".bt-sea").removeClass("btn-default").addClass("btn-info")
});

Пожалуйста, помогите мне с этим. Я попытался использовать, но не повезло, также изменил css дисплей: ни один на месте блока, но не смог решить проблему.

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