Change button link according to a select

Asked

Viewed 1,089 times

-1

I am developing a plan table, where the values of these plans vary according to the options selected in (are 4 selection options).

This part of changing the value of the plan according to the options chosen has already been resolved, however, the "JOIN" buttons to the plans, do not vary according to the options selected. (These links will direct to the purchase of this subscription plan, as each combination of the selected options is a value, I would like the links of the buttons to vary as well as the selected options.)

Follow the table link: https://piscinafacil.com.br/tabela_teste.html#

javascript html css

  • Do you want to change only the link according to each table and its respective information? If understood correctly just generate the full link in js and print next to HTML.

  • This @Lucasthibaupaulino , was going to be a different link for each combination of the 4 select options. Since I don’t have much experience with js, I would like to ask for your help in structuring this part of js. Because the js that is already in the table was done by another person, I only developed the html and css part myself. If you can help me, I would be extremely grateful, because that’s all that’s left to finalize the table. Thank you!

  • @Lucasthibaupaulino I saw that you had posted an answer but was deleted... Can you help me?

  • Basically you will assemble an array with the options that are being sent to mount the table, from this array, you concatenate everything and generate the link. To know how to do this exactly, you need to see your code.

  • @Lucasthibaupaulino Certo Lucas, was not getting to post the whole code here. But if you enter the link that is the table will be able to display its source code. The other boy who answered the question has already posted an example of what the code would look like, but the link only changes when an option is selected. In my case, the link would have to change when a set of options is selected. Thanks again for the help!

  • The answer of @Leandro Silva was correct and serves to solve your problem, the question is that instead of only one if you will have several if and concatenate the results of each if to in order generate a url.

Show 1 more comment

1 answer

1


To change the link according to the selected option, you could do in several ways, among them, the form shown below. I took the volume field as an example to demonstrate how to do:

   jQuery(function($){
        $('#volume, #visitas').change(function(){
		var volume = $('#volume').val();
		var visitas = $('#visitas').val();
		if (volume == "50" && visitas == "4") {
	            $('.Linkbotao').attr('href', 'http://www.google.com');
		}
		else if (volume == "80" && visitas == "4") {
		    $('.Linkbotao').attr('href', 'http://www.uol.com.br');
		}
		else if (volume == "50" && visitas == "8") {
		    $('.Linkbotao').attr('href', 'http://www.yahoo.com.br');
		}
	});
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
     Volume <select name="volume" id="volume">
	<option value="" selected>Selecione</option>
	<option value="50">50</option>
	<option value="80">80</option>
     </select>
     <br>
     <br>
     Visitas <select name="visitas" id="visitas">
    	<option value="" selected>Selecione</option>
    	<option value="4">4</option>
    	<option value="8">8</option>
     </select>
     <br>
     <br>
     <a href="#" class="Linkbotao" target="_blank">
       <input type="button" name="aderir" id="aderir" value="aderir"> 
     </a>
</form>

  • Thanks for the help @Leandrosilva. Since I’m a Javascript layman, I wanted to ask you for help on how to make the combination of more than one select generate a link, and another combination, generate another link. For example: There are two selects: Volume(50 or 80) and Visits(4 or 8) 1 combination: Volume [50] + Visits [4] = google.com 2 combination: Volume [80] + Visits [4] = Uol.com.br 3 combination: Volume [50] + Visits [8] = yahoo.com And so on. Because in this table that I am creating, the links would be generated by combining several selects, and not only a select.

  • @Eduardo Marotti I edited the post for the case in question, I put the two selects as informed and the combinations with the respective links.

  • Show ball bro, thank you very much! I will try to adapt now to the options there of my table. Anything I come back here to ask. :)

  • Next, I have a question regarding a select of my table. The select "state" and "city" they are not defined in html, but "pulled" from the database. For example, the city of São Paulo will only appear when the SP state is selected. And these do not appear in select, so I do not know how to indicate the value of each city. It is possible to use this data, state and city, to generate Linkbotao?

  • Are there many options of cities and states? If there are not many options you can do in this IF mode, If if even, but at the time of the check you would have to put the value identical to the returned from the bank. Ex.: if (volume == "50" && visitas == "4" && estado == "SP" && cidade == "São Paulo"){ .

  • So @Leandrosilva There are few cities, I tried to do it this way and it’s not working. Is it because "value" (in this case the name of the city) is not in the select options? Is it in the database? Anyway, very grateful for the help so far. We are almost there. Hahah

Show 1 more comment

Browser other questions tagged javascript html css

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