When div option clicked, move to another div JavaScript

Question

In my Asp.Net MVC application, I created a simple assistant to get help to users. I created questions and related answers and when the user selects one it shows the other.

But there is an issue when the question path is too long, some results that need to show is not showing, So I thought If I can direct it to the correct div question from javascript would work.

So here is my current code

<div class="chat_box">
  <div class="conv-form-wrapper">
    <form action="" method="get" class="hidden">
      <div data-conv-fork="Selfintro">
        <input type="text" name="name" data-conv-question="Hi! I am virtual assistant. Please, tell me your name first.">
        <input type="text" data-conv-question="Hi!, {name}:0 It's a pleasure to meet you. " data-no-answer="true">
      </div>
      <select name="Questions" data-callback="storeState" data-conv-question="How may I help you today?" class="mnht">
        <option value="Requests">About Requests</option>
        <option value="sendRemind" id="sendRem">Send Remind</option>
        <option value="ApprovRequest">Report an Issue</option>
      </select>
      <!-- #Question 01 page -->
      <div data-conv-fork="Questions">
        <div data-conv-case="Requests">
          <select name="SelectCato" data-conv-question="What type of request you hoping to create?">
            <option value="OutsidePurchase">Purchasing</option>
            <option value="PaymentRequest">Payment Request</option>
            <option value="More1">More</option>
          </select>
        </div>
        <div data-conv-fork="SelectCato">
          <div data-conv-case="OutsidePurchase">
            <input type="text" data-conv-question="Okay {name}, First click<b>Create Request</b>." data-no-answer="true">
          </div>
        </div>
        <div data-conv-fork="SelectCato">
          <div data-conv-case="PaymentRequest">
            <input type="text" data-conv-question="okay,First<b>click Create Request</b>." data-no-answer="true">
          </div>
        </div>
      </div>
      <!-- #endregion -->
      <!-- #Question 02 Page -->
      <div data-conv-fork="SelectCato">
        <div data-conv-case="More1">
          <input type="text" data-conv-question="Further request types" data-no-answer="true">
        </div>
        <select name="ReqTypes" data-conv-question="What type of request you hoping to create?">
          <option value="suspence">Suspense</option>
          <option value="cashVouch">Cash Voucher</option>
          <option value="More2">More</option>
        </select>
        <div data-conv-fork="ReqTypes">
          <div data-conv-case="suspence">
            <input type="text" data-conv-question="okay,First>click Create Request</b>.data-no-answer="true">
          </div>
        </div>
        <div data-conv-fork="ReqTypes">
          <div data-conv-case="cashVouch">
            <input type="text" data-conv-question="okay,First<b>click Create Request</b>." data-no-answer="true">
          </div>
        </div>
      </div>
      <!-- #endregion -->
      <!-- #Question 03 page -->
      <div data-conv-fork="ReqTypes">
        <div data-conv-case="More2">
          <input type="text" data-conv-question="Try these..'" data-no-answer="true">
        </div>
        <select name="ReqTypes2" data-conv-question="Request types conti.">
          <option value="general">General</option>
          <option value="medical">Medical</option>
          <option value="rollback">Start Again</option>
        </select>
        <div data-conv-fork="ReqTypes2">
          <div data-conv-case="general">
            <input type="text" data-conv-question="okay,First click Create Request</b>." data-no-answer="true">
          </div>
        </div>
        <div data-conv-fork="ReqTypes2">
          <div data-conv-case="medical">
            <input type="text" data-conv-question="okay,First<b>click Create Request</b>." data-no-answer="true">
          </div>
        </div>
        <select name="callbackTest" data-conv-question="Do you need to continoue this conversation">
          <option value="yes" data-callback="rollback">Yes</option>
          <option value="no" data-callback="restore">No</option>
        </select>
      </div>
      <!-- #endregion -->
      <div data-conv-fork="Questions">
        <div data-conv-question="sendRemind" id="ssremind">
          <input type="text" data-conv-question="Hi!, {name}:0 It's a pleasure to meet you. " data-no-answer="true">
        </div>
      </div>
      <div></div>
    </form>
  </div>
</div>

So when the user select (clicks) the second Option, I want to direct it to this div

<div data-conv-fork="Questions" id="ssremind">
  <div data-conv-question="sendRemind">
    <input type="text" data-conv-question="Hi!, {name}:0 It's a pleasure to meet you. " data-no-answer="true">
  </div>
</div>

This is the javascript

<script >
  function google(stateWrapper, ready) {
    window.open("https://google.com");
    ready();
  }

function bing(stateWrapper, ready) {
  window.open("https://bing.com");
  ready();
}
var rollbackTo = false;
var originalState = false;

function storeState(stateWrapper, ready) {
  rollbackTo = stateWrapper.current;
  console.log("storeState called: ", rollbackTo);
  ready();
}

function rollback(stateWrapper, ready) {
  console.log("rollback called: ", rollbackTo, originalState);
  console.log("answers at the time of user input: ", stateWrapper.answers);
  if (rollbackTo != false) {
    if (originalState == false) {
      originalState = stateWrapper.current.next;
      console.log('stored original state');
    }
    stateWrapper.current.next = rollbackTo;
    console.log('changed current.next to rollbackTo');
  }
  ready();
}

function restore(stateWrapper, ready) {
  if (originalState != false) {
    stateWrapper.current.next = originalState;
    console.log('changed current.next to originalState');
  }
  ready();
}

function SendRemind(stateWrapper, ready) {

  if (originalState != false) {
    stateWrapper.current.next = originalState;
    console.log('changed current.next to originalState');
  }
  ready();
} <
/script>

Source from -- > https://github.com/eduardotkoller/convForm

Answer 1

You can use .focus() to get the effect you want.

$('select[name=Questions]').change(function() {
  if ($(this).val() == "sendRemind"){
    $('#ssremind input').focus()
  }
});

Demo

$('select[name=Questions]').change(function() {
  if ($(this).val() == "sendRemind") {
    $('#ssremind input').focus()
  }
});

function google(stateWrapper, ready) {
  window.open("https://google.com");
  ready();
}

function bing(stateWrapper, ready) {
  window.open("https://bing.com");
  ready();
}
var rollbackTo = false;
var originalState = false;

function storeState(stateWrapper, ready) {
  rollbackTo = stateWrapper.current;
  console.log("storeState called: ", rollbackTo);
  ready();
}

function rollback(stateWrapper, ready) {
  console.log("rollback called: ", rollbackTo, originalState);
  console.log("answers at the time of user input: ", stateWrapper.answers);
  if (rollbackTo != false) {
    if (originalState == false) {
      originalState = stateWrapper.current.next;
      console.log('stored original state');
    }
    stateWrapper.current.next = rollbackTo;
    console.log('changed current.next to rollbackTo');
  }
  ready();
}

function restore(stateWrapper, ready) {
  if (originalState != false) {
    stateWrapper.current.next = originalState;
    console.log('changed current.next to originalState');
  }
  ready();
}

function SendRemind(stateWrapper, ready) {

  if (originalState != false) {
    stateWrapper.current.next = originalState;
    console.log('changed current.next to originalState');
  }
  ready();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat_box">
  <div class="conv-form-wrapper">
    <form action="" method="get" class="hidden">
      <div data-conv-fork="Selfintro">
        <input type="text" name="name" data-conv-question="Hi! I am virtual assistant. Please, tell me your name first.">
        <input type="text" data-conv-question="Hi!, {name}:0 It's a pleasure to meet you. " data-no-answer="true">
      </div>
      <select name="Questions" data-callback="storeState" data-conv-question="How may I help you today?" class="mnht">
        <option value="Requests">About Requests</option>
        <option value="sendRemind" id="sendRem">Send Remind</option>
        <option value="ApprovRequest">Report an Issue</option>
      </select>
      <!-- #Question 01 page -->
      <div data-conv-fork="Questions">
        <div data-conv-case="Requests">
          <select name="SelectCato" data-conv-question="What type of request you hoping to create?">
            <option value="OutsidePurchase">Purchasing</option>
            <option value="PaymentRequest">Payment Request</option>
            <option value="More1">More</option>
          </select>
        </div>
        <div data-conv-fork="SelectCato">
          <div data-conv-case="OutsidePurchase">
            <input type="text" data-conv-question="Okay {name}, First click<b>Create Request</b>." data-no-answer="true">
          </div>
        </div>
        <div data-conv-fork="SelectCato">
          <div data-conv-case="PaymentRequest">
            <input type="text" data-conv-question="okay,First<b>click Create Request</b>." data-no-answer="true">
          </div>
        </div>
      </div>
      <!-- #endregion -->
      <!-- #Question 02 Page -->
      <div data-conv-fork="SelectCato">
        <div data-conv-case="More1">
          <input type="text" data-conv-question="Further request types" data-no-answer="true">
        </div>
        <select name="ReqTypes" data-conv-question="What type of request you hoping to create?">
          <option value="suspence">Suspense</option>
          <option value="cashVouch">Cash Voucher</option>
          <option value="More2">More</option>
        </select>
        <div data-conv-fork="ReqTypes">
          <div data-conv-case="suspence">
            <input type="text" data-conv-question="okay,First>click Create Request</b>" .data-no-answer=" true ">
          </div>
        </div>
        <div data-conv-fork="ReqTypes ">
          <div data-conv-case="cashVouch ">
            <input type="text " data-conv-question="okay,First<b>click Create Request</b>." data-no-answer="true">
          </div>
        </div>
      </div>
      <!-- #endregion -->
      <!-- #Question 03 page -->
      <div data-conv-fork="ReqTypes">
        <div data-conv-case="More2">
          <input type="text" data-conv-question="Try these..'" data-no-answer="true">
        </div>
        <select name="ReqTypes2" data-conv-question="Request types conti.">
          <option value="general">General</option>
          <option value="medical">Medical</option>
          <option value="rollback">Start Again</option>
        </select>
        <div data-conv-fork="ReqTypes2">
          <div data-conv-case="general">
            <input type="text" data-conv-question="okay,First click Create Request</b>." data-no-answer="true">
          </div>
        </div>
        <div data-conv-fork="ReqTypes2">
          <div data-conv-case="medical">
            <input type="text" data-conv-question="okay,First<b>click Create Request</b>." data-no-answer="true">
          </div>
        </div>
        <select name="callbackTest" data-conv-question="Do you need to continoue this conversation">
          <option value="yes" data-callback="rollback">Yes</option>
          <option value="no" data-callback="restore">No</option>
        </select>
      </div>
      <!-- #endregion -->
      <div data-conv-fork="Questions">
        <div data-conv-question="sendRemind" id="ssremind">
          <input type="text" data-conv-question="Hi!, {name}:0 It's a pleasure to meet you. " data-no-answer="true">
        </div>
      </div>
      <div></div>
    </form>
  </div>
</div>