doubt select with modal

Asked

Viewed 1,370 times

2

I’m having trouble executing an action on my website. I have a select with some options, I need to select one of the options and give Submit on a button, while doing this would have to open a modal (popup)?

That is, I selected the option, I clicked on the "send" button and this opens the specific modal of the selected option.

I’m doing it in the Wordpress and using Bbootstrap

HTML of modal:

<div id="sintomas">
	<div class="options">
		<select class="custom-select custom-sintomas">
			<option selected>Selecione um sintoma aparente</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</select>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
	</div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

javascript html css bootstrap

1 answer

0


You can detect with Jquery the option value when you select one of the options and open the specific modal as follows

        $('select').change(function () {

           $('[id^="modal"]').modal('hide');

           var qualModal = "#modal"+$(this).val();

           $(qualModal).modal('show');

        });

Example:

    	$('select').change(function () {
    	
    	   $('[id^="modal"]').modal('hide');
    	   
    	   var qualModal = "#modal"+$(this).val();

    	   $(qualModal).modal('show');

    	});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	


    <div id="sintomas">
    	<div class="options">
    		<select class="custom-select custom-sintomas">
    			<option selected>Selecione um sintoma aparente</option>
    			<option value="1">One</option>
    			<option value="2">Two</option>
    			<option value="3">Three</option>
    		</select>
    	</div>
    </div>

    <!-- Modal 1-->
    <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title 111111</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          1111111111
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
          
        </div>
      </div>
    </div>

    <!-- Modal 2-->

    <div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title 222222</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            2222222222
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
          
        </div>
      </div>
    </div>

     <!-- Modal 3-->

    <div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title 333333</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            3333333333
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
             
        </div>
      </div>
    </div>

With specific modal opening button

$( document ).ready(function() {
    $('select').change(function () {

       $('[id^="modal"]').modal('hide');

       var targetBotao = "#modal"+$(this).val();

       $('#testButton').attr('data-target',targetBotao);

    });
});

When you select an option from select the data-target button will take the variable value targetBotao which will be composed by the string #modal concatenated by value option selected. This way when clicked will open the specific modal.

Example:

$( document ).ready(function() {
	$('select').change(function () {
	   
	   $('[id^="modal"]').modal('hide');
	   
	   var targetBotao = "#modal"+$(this).val();
	
	   $('#testButton').attr('data-target',targetBotao);

	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	


<div id="sintomas">
	<div class="options">
		<select class="custom-select custom-sintomas">
			<option selected>Selecione um sintoma aparente</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</select>
<!-- Button trigger modal -->
<button type="button" id="testButton" class="btn btn-primary" data-toggle="modal" data-target="">
  Launch demo modal
</button>
	</div>
</div>

<!-- Modal 1-->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 111111</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      1111111111
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      
    </div>
  </div>
</div>

<!-- Modal 2-->

<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 222222</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        2222222222
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      
    </div>
  </div>
</div>

 <!-- Modal 3-->

<div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 333333</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        3333333333
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
         
    </div>
  </div>
</div>

About the date attributes-*

  • yes, I managed to do it this way, only it’s not what I need 100%, I’ve researched a lot and could not do the function, I need the modal only if I select an option and click a button, in the example above the modal already appears when you select the option. in case it would be like this, for example: I select option 1 and click on a button, then modal 1 is shown. If I select option 2 and click on a button, modal 2 is shown. The big problem is that I need a button to confirm the process.

  • That button besides showing the modal what else would do?

  • nothing, it just has to open the correct modal, because I will need to use some 10 different modal models, then in case, I selected option 1, clicked on the button and it showed me the respective modal of option 1

  • In this case the button will only make the user spend one more click!

  • yes, I understand, for me would also do this way, I work in a communication agency, and the client wants this way :(if you can help me I will be very grateful!

  • @Miguelcampos answer edited with version to button. Please read this post https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

  • Thank you so much for your help!

  • Leo, please, I have another problem, the script for some reason does not want to work, I already added jquery and bootstrap, apparently the two are working, I tested even the modal function only on the button I took straight from the bootstrap site and it worked.

  • @Miguelcampos, I believe it is due to the placement of the script on the page. Either you put it at the bottom of the page or you put it inside $( document ).ready(function() { the script .... }); as edited reply

  • thank you very much, it worked perfectly now!

Show 5 more comments

Browser other questions tagged javascript html css bootstrap

You are not signed in. Login or sign up in order to post.