CODEWITHSUNDEEP
javascriptjqueryhtml
James Nixon
James Nixon

Reputation: 327

Show only two select boxes

Basically, i want it so every time someone clicks on the button it will show one select box and then they click it again it will show the other one. So my question is how can I make it so on click it will show a select box one at a time?

Select box add function:

function addChooseSub() {
    window["maxAppend"] = 3;
    maxAppend = maxAppend + 1;
    $("select.signUp[name=\"option" + maxAppend +"\"]").show();
    console.log("sdasd"+maxAppend)          
}

Click Function:

<script>
$('body').on('click', '.addSelect', function() {
    addChooseSub()
});
</script>

Box HTML:

<div class="signup box">
        Hello, <strong><?php echo $session->getSessionInfo("register", "firstName")." ".$session->getSessionInfo("register", "lastName"); ?></strong> and welcome to <strong>LetsChat</strong>, please choose up to <strong>5 courses</strong> you're currently taking.
        <hr>
        <form method="POST" action="#" class="chooseCourse">
            <select class="signUp" name="option1">
                    <option value="empty" disabled selected hidden>Course Option 1</option>
                    <?php $core->pullCourses(); ?>
            </select>
            <select class="signUp" name="option2">
                    <option value="empty" disabled selected hidden>Course Option 2</option>
                    <?php $core->pullCourses(); ?>
            </select>
            <select class="signUp" name="option3">
                    <option value="empty" disabled selected hidden>Course Option 3</option>
                    <?php $core->pullCourses(); ?>
            </select>
            <select class="signUp" name="option4" style="display: none;">
                    <option value="empty" disabled selected hidden>Course Option 4</option>
                    <?php $core->pullCourses(); ?>  
            </select>
            <select class="signUp" name="option5" style="display: none;">
                    <option value="empty" disabled selected hidden>Course Option 5</option>
                    <?php $core->pullCourses(); ?>  
            </select>
            <div class="addSelect"> + </div>
            <input type="submit" name="signupSubmit" onclick="choosingSubjects()" class="purple btn signup" value="Finish" style="margin-top: 0;">
        </form>
    </div>

Upvotes: 0

Views: 52

Answers (2)

mplungjan
mplungjan

Reputation: 177689

You have a few more issues than I saw from the start.

  • You need to move the counter outside the function
  • There is no hidden attribute on an option.

Like this - assuming you want to initially have the last two SELECTS hidden and show next two SELECTs one by one

var maxAppend = 3;
$(function() {
  $(".addSelect").on("click", function(e) {
    maxAppend++;
    if (maxAppend <= $("select.signUp").length) {
      $("select.signUp[name=\"option" + maxAppend + "\"]").show();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="signup box">

  <hr>
  <form method="POST" action="#" class="chooseCourse">
    <select class="signUp" name="option1">
      <option value="empty" disabled selected>Course Option 1</option>
    </select>
    <br>
    <select class="signUp" name="option2">
      <option value="empty" disabled selected>Course Option 2</option>
    </select>
    <br>
    <select class="signUp" name="option3">
      <option value="empty" disabled selected>Course Option 3</option>
    </select>
    <br>
    <select class="signUp" name="option4" style="display: none;">
      <option value="empty" disabled selected>Course Option 4</option>
    </select>
    <br>
    <select class="signUp" name="option5" style="display: none;">
      <option value="empty" disabled selected>Course Option 5</option>
    </select>
    <br>
    <div class="addSelect">+</div>
    <input type="submit" name="signupSubmit" class="purple btn signup" value="Finish" style="margin-top: 0;" />
  </form>
</div>

Upvotes: 1

krillgar
krillgar

Reputation: 12805

What's happening is your window.maxAppend = 3; at the top of your function is resetting it every time your function is called.

There are a few ways to accomplish what you want, but the easiest will be to just move maxAppend outside of the function. This way, it will not get reset, and its value will be preserved from the last time it was called.

var maxAppend = 3;

function addChooseSub() {
    maxAppend++;

    if (maxAppend > 5) return;

    $("select.signUp[name=\"option" + maxAppend +"\"]").show();
    console.log("sdasd"+maxAppend)          
}

Upvotes: 1

Related Questions