Условная логика в моей форме, один вариант приведет вас к следующему

Итак, реальный сценарий...

У меня есть форма на странице, которая нуждается в некоторой условной логике.

form fields...

Затем у меня есть куча вопросов для моего клиента, которые определят, что (форма) будет отображаться или нет.

(i.e) Какой тип маркетингового списка вы ищете?

(варианты) Насыщенный или Целевой

Если они выбирают «Насыщенный», то отображается «Насыщенный».

Если они выбирают Targeted, то отображается Targeted

либо одно, либо другое, обе формы не могут отображаться одновременно.

и так далее...

одна подсказка ведет вас к следующей.

Я был бы очень признателен за любую помощь, которую я мог бы получить в этом

Это код, который у меня есть до сих пор:

<script language="javascript" type="text/javascript">
       $(document).ready(function() {
    var url = window.location.href;
    var option = url.match(/option=(.*)/);
    if (option !== null) {
        $(".link ." . option[1]).trigger('click');
    }

    $(".link").bind('click', function () {
        $('#intro-tekst').hide();
        $('.boxes').hide();
        $('.link').removeClass('selected');
        $(this).removeClass('link');
        $('#' + $(this).prop('class')).show();
        $(this).addClass('link selected');       
    });   
});
</script>

<body>


    <p>
        Who Do You Want to Mail to?
        <ul>
            <li><a href="javascript:void(0);" class="link business">Business</a></li>
            <li><a href="javascript:void(0);" class="link residents">Residents</a></li>
            <li><a href="javascript:void(0);" class="link have-list">Have a list?</a></li>
        </ul>
    </p>
    <div class="boxes hidden" id="business">
What Type of Business List Do You Want?
        <ul>
            <li><a href="javascript:void(0);" class="link saturation">Saturation</a></li>
            <li><a href="javascript:void(0);" class="link targeted">Targeted</a></li>
        </ul>
    </div>
    <div class="boxes hidden" id="saturation">
Do You Want To: Mail to an Entire Zip Code or Mail to a Radius from an Address?
        <ul>
            <li><a href="javascript:void(0);" class="link zipcode">Zipcode</a></li>
            <li><a href="javascript:void(0);" class="link radius">Radius</a></li>
        </ul>
    </div>
    <div class="boxes hidden" id="zipcode">
<form>
    <label for="fname1">First Name: </label>    
    <input type="text" id="fname1" value="" name="fname1"/>
    </form>
    </div>
    <div class="boxes hidden" id="radius">
<form>
    <label for="fname1">First Name: </label>    
    <input type="text" id="fname1" value="" name="fname1"/>
    </form>
    </div>
    <div class="boxes hidden" id="targeted">
<div id="intro-tekst">Do You Want To: Mail to an Entire Zip Code or Mail to a Radius from an Address?
        <ul>
            <li><a href="javascript:void(0);" class="link zipcode">Zipcode</a></li>
            <li><a href="javascript:void(0);" class="link radius">Radius</a></li>
        </ul></div> 
    </div>
    <div class="boxes hidden" id="zipcode">
<form>
    <label for="fname1">First Name: </label>    
    <input type="text" id="fname1" value="" name="fname1"/>
    </form>
    </div>
    <div class="boxes hidden" id="radius">
<form>
    <label for="fname1">First Name: </label>    
    <input type="text" id="fname1" value="" name="fname1"/>
    </form>
    </div>
    <div class="boxes hidden" id="residents">
    <div id="intro-tekst">What Type of Consumer List Do You Want?
        <ul>
            <li><a href="javascript:void(0);" class="link saturation">Saturation</a></li>
            <li><a href="javascript:void(0);" class="link targeted">Targeted</a></li>
        </ul></div> 
    </div>
    </div>
    <div class="boxes hidden" id="have-list">
    <form>
    <label for="fname1">First Name: </label>    
    <input type="text" id="fname1" value="" name="fname1"/>
    </form>
    </div>
</body>

javascript forms jquery logic conditional
person Kyle Poyser    schedule 23.05.2014    source источник
comment
on() предпочтительнее bind(), начиная с jQuery 1.7 и выше: api.jquery.com/on   -  person Jesan Fafon    schedule 24.05.2014
comment
Любые комментарии о том, как я могу настроить свой код для выполнения задачи? Один вопрос приведет вас к следующему в зависимости от выбранного варианта.   -  person Kyle Poyser    schedule 24.05.2014

Ответы (1)


arrow_upward
0
arrow_downward

Это приведет вас к большей части пути: http://jsfiddle.net/rym2g/

Единственное, что он не делает на данный момент, — это закрытие всех других панелей, когда вы выбираете что-то дальше по списку. Это я оставляю вам. :)

<form>
    <ul class="form-nav">
        <li><a href="#a-1">AAA</a></li>
        <li><a href="#a-2">BBB</a></li>
    </ul>
</form>

<form class="hidden" id="a-1">
    <ul class="form-nav">
        <li><a href="#a-1-1">aaa</a></li>
        <li><a href="#a-1-2">bbb</a></li>
    </ul>
</form>

<form class="hidden" id="a-1-1">
    <p>A-1-1</p>
</form>

<form class="hidden" id="a-1-2">
    <p>A-1-2</p>
</form>

<form class="hidden" id="a-2">
    <ul class="form-nav">
        <li><a href="#a-2-1">111</a></li>
        <li><a href="#a-2-2">222</a></li>
    </ul>
</form>

<form class="hidden" id="a-2-1">
    <p>A-2-1</p>
</form>

<form class="hidden" id="a-2-2">
    <p>A-2-2</p>
</form>

И JavaScript:

$(document).on("click", "ul.form-nav a", function(event) {
    event.preventDefault();
    var id = event.target.href.replace(/^[^#]+/, "");
    console.log("Going to: " + id);
    $(id).show().focus();
});
person Greg Burghardt    schedule 23.05.2014
comment
Спасибо за вашу помощь, это выглядит здорово! Разберусь с остальным, потом отпишусь! - person Kyle Poyser; 24.05.2014