CODEWITHSUNDEEP
javascripthtmlcss
hurricane
hurricane

Reputation: 91

disable an input field after a button is clicked

I am configuring a chatbot and I want to give the user three options to choose from. The user will choose the option by clicking the buttons; this means if button 1 was clicked, the input field 1 will be shown in the next instance (same html file). If buttenter image description hereon 2 was clicked, the input field 2 will be shown etc.

In the first image the user should choose an intention and according to their intention one of the input fields should disappear in the second image.

I have tried to do with show and hide configurations of CSS and JavaScript. However it did not work. Could anyone suggest me a solution? The trick is that one can not use show and hide div method, because the input field is not shown at the same time as the button but after one selects an option. Thank you in advance!

Here is some code:

function faqact() {
  var x = document.getElementById("python");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
$(document).ready(function() {
  $(".select2_el").select2({});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
  <button id="faqact" onclick="faqact()" type="button">I just want to ask a question</button>
  <button id="alexact" type="button">I want to make the BOT do something for me!</button>
  <button id="connectact" type="button">I want to connect to a human asap!</button>
</div>
different input fields because if the button 1 is clicked, i want the javascript to connect to python through flask.

<div id="conversation" class="chat-input hide">
  <!-- <input type="text" placeholder="Type a message..."> -->
  <form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
    <textarea type="text" id="wisdom" size="80" value="" placeholder="I need a hotel room"> </textarea>
    <div class="input-action-icon">
      <button type="submit" id="completed-task" class="fabutton" onsubmit="return pushChat();">
                    <i class="fa fa-paper-plane" aria-hidden="true"></i>
              </button>
    </div>
  </form>

</div>

<div id="python" class="chat-input hide">
  <!-- <input type="text" placeholder="Type a message..."> -->
  <form id="pythonform" style="margin-top: 10px" onsubmit="return pushChat();">
    <textarea type="text" id="faq" size="80" value="" placeholder="I need a hotel room"> </textarea>
    <div class="input-action-icon">
      <button type="submit" id="pythonsend" class="fabutton" onsubmit="return pushChat();">
                    <i class="fa fa-paper-plane" aria-hidden="true"></i>
              </button>
    </div>
  </form>

</div>

In the first image, i give the user to choose their intention and in the second image one of the input fields should disappear

Upvotes: 1

Views: 968

Answers (3)

hurricane
hurricane

Reputation: 91

I have finally solved it with jquery. I have made out of my buttons radio buttons and finally used the below script to solve my issue:

$('#startchat').click(function() {
   if($('#radiobutton').is(':checked')) { $("#python").show(); }
});

Thank you all for your support

Upvotes: 0

user15786743
user15786743

Reputation:

Use attribute readonly in input field.

so your if statement in javascript should be like this: (here x is id of your input field)

var x= Id_Of_InputField

if (x.hasAttribute("readonly")) {
    x.removeAttribue("readonly")
  } 
else {
    x.addAttribute("readonly")
  }
}

Upvotes: 0

Chris W.
Chris W.

Reputation: 23280

Sounds like you're basically wanting a radio group to control visibility associated to a button, kind of like below for a quick proof of concept. Cheers.

label {
  background-color: #0f0;
  padding: .5rem 1rem;
  margin: .5rem;
  display: block;
  cursor: pointer;
}

input, div, textarea {
  display: none;
}

input[type=radio]:checked + label {
  background-color: #00f;
  color: #fff;
}

#btn1:checked ~ #btn1input {
  display: block;
}
#btn2:checked ~ #btn2input {
  display: block;
}
#btn3:checked ~ #btn3input {
  display: block;
}
<input id="btn1" type="radio" name="test">
<label for="btn1" type="button">Ask a question or something.</label>
<input id="btn2" type="radio" name="test">
<label for="btn2" type="button">Make bot do something.</label>
<input id="btn3" type="radio" name="test">
<label for="btn3" type="button">Talk to a human</label>

<hr>

<input id="btn1input" type="text" placeholder="Ask your question">
<div id="btn2input">
<button>bot stuff1</button><button>bot stuff2</button>
</div>
<textarea id="btn3input" placeholder="Talk to a human"></textarea>

Upvotes: 2

Related Questions