Get selected value from drop down and pass selected value into submit button in php

Question

I have two drop down from two different array.

i want to get/store selected value from drop down. so that i can pass/send selected value in submit button (href)

Example:supoose user select email as 123 and center as "training",so i need to pass thoes two value in submit button like below-

 <main role="main"> <div class="row"> <div class="col-md-12"> <h4 class="heading-theme page-header pdt">Create Email Template</h4> <span class="border-bottom display-block mb-20"></span> </div> </div> <div class="row mb-3"> <div class="col-lg-3 col-md-12 mb-1"> <select class="custom-select" id="status" title="Status"> <option value="" selected>Select Template</option> <?php foreach ($emailTemplate as $row) {?> <option value="<?= $row['temp_desc']?>"><?= $row['temp_desc']?></option> <?php }?> </select> </div> <div class="col-lg-3 col-md-12 mb-1"> <select class="custom-select" id="status" title="Status"> <option value="" selected>Select Center</option> <?php foreach ($trainingCenter as $row) {?> <option value="<?= $row['organization_name']?>"><?= $row['organization_name']?></option> <?php }?> </select> </div> <div class="col-lg-4"></div> </div> <div> <div class="row"> <div class="col-md-12"> <div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 "> Submit </a> </div> </div> </div> </main>

Answer 1

You can get both selected values using each loop inside some variable then split that values and finally add them to href of your tag.

Demo Code :

 $("select").on("change", function() { var values = ""; //traverse through all selects $(".status").each(function() { //separate values using "." values += $(this).val() + "."; }) //split values var new_values = values.split("."); var select_text= $('#status:selected').text();//getting selected text $new_href = "/Mycenter/testmailtemplate/" + new_values[0] + "/" + new_values[1]+"/"+ select_text; //add value to your href $(".pri-btn").attr("href", $new_href) console.log($new_href) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main role="main"> <div class="row"> <div class="col-md-12"> <h4 class="heading-theme page-header pdt">Create Email Template</h4> <span class="border-bottom display-block mb-20"></span> </div> </div> <div class="row mb-3"> <div class="col-lg-3 col-md-12 mb-1"> <!--added class="status"--> <select class="custom-select status" id="status" title="Status"> <option value="" selected>Select Template</option> <option value="1">1th</option> <option value="2">2th</option> <option value="3">3th</option> </select> </div> <div class="col-lg-3 col-md-12 mb-1"> <!--added class="status"--> <select class="custom-select status" title="Status"> <option value="" selected>Select Center</option> <option value="1"> 1</option> <option value="2"> 2</option> <option value="3">3 </option> </select> </div> <div class="col-lg-4"></div> </div> <div> <div class="row"> <div class="col-md-12"> <div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 "> Submit </a> </div> </div> </div> </main>

Answer 2

 $(".custom-select").on("change", function() { var value1 = $("#status1").val(); var value2 = $("#status2").val(); var url = '/Mycenter/testmailtemplate/'+value1+'/'+value2; $(".pri-btn").attr("href", url ); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main role="main"> <div class="row"> <div class="col-md-12"> <h4 class="heading-theme page-header pdt">Create Email Template</h4> <span class="border-bottom display-block mb-20"></span> </div> </div> <div class="row mb-3"> <div class="col-lg-3 col-md-12 mb-1"> <!--added class="status"--> <select class="custom-select status" id="status1" title="Status"> <option value="" selected>Select Template</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="col-lg-3 col-md-12 mb-1"> <!--added class="status"--> <select class="custom-select status" id="status2" title="Status"> <option value="" selected>Select Center</option> <option value="1"> 1</option> <option value="2"> 2</option> <option value="3">3 </option> </select> </div> <div class="col-lg-4"></div> </div> <div> <div class="row"> <div class="col-md-12"> <div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 "> Submit </a> </div> </div> </div> </main>