Skip to content Skip to sidebar Skip to footer
Home / Html / Jquery

How Can I Get The Text Value Of Select Option While Submitting Form?

Post a Comment
I have a page rendering dynamic forms, and when user submits; I would like to submit to server 'TEXT VALUE' of the selected SELECT OPTION instead of the VALUE attribute. Any kind o

Solution 1:

Try This Code

<!DOCTYPE html><html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
    $(document).ready(function(){
        $("#submit").on('click',function() {
          alert($("#modelname").find("option:selected").text()+' clicked!');
         });
    });
  </script></head><body><selectname="modelname"id="modelname"class="form-control"><optionvalue=""selected="">Model Selection</option><optionvalue="0">1.4 TB Distinctive</option><optionvalue="1">1.4 TB MultiAir Distinctive</option><optionvalue="2">1.4 TB MultiAir Progression Pluse</option><optionvalue="3">1.4 TB MultiAir Super TCT</option><optionvalue="4">1.4 TB Progression Plus</option><optionvalue="5">1.6 JTD Distinctive</option><optionvalue="6">1.6 JTD Progression</option><optionvalue="7">1.6 JTD Progression Plus</option><optionvalue="8">1.6 JTD Progression Pluse</option><optionvalue="9">1.6 JTD Super TCT</option><optionvalue="10">1.75 TBI Quadrifoglio Verde</option></select><buttontype="submit"id="submit"class="btn btn-default">Submit</button></body></html>

Solution 2:

we can't get selected dropdown text as posted value while submit a form via PHP. But it can be done using jQuery.

<?php 
print_r($_POST);
?><!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><divclass="container"><formid="MySelection"accept-charset="UTF-8"method="post"><selectname="modelname"id="modelname"class="form-control"><optionvalue=""selected="">Model Selection</option><optionvalue="0">1.4 TB Distinctive</option><optionvalue="1">1.4 TB MultiAir Distinctive</option><optionvalue="2">1.4 TB MultiAir Progression Pluse</option><optionvalue="3">1.4 TB MultiAir Super TCT</option><optionvalue="4">1.4 TB Progression Plus</option><optionvalue="5">1.6 JTD Distinctive</option><optionvalue="6">1.6 JTD Progression</option><optionvalue="7">1.6 JTD Progression Plus</option><optionvalue="8">1.6 JTD Progression Pluse</option><optionvalue="9">1.6 JTD Super TCT</option><optionvalue="10">1.75 TBI Quadrifoglio Verde</option></select><inputtype="hidden"name="authenticity_token"value="xyz123"><inputtype="hidden"name="hiddenmodelname"id="hiddenmodelname"value=""><buttontype="submit"id="submit"class="btn btn-default">Submit</button></form></div></body></html>
$(document).ready(function(){
    $("#MySelection").change(function(){
        var selectedVal = $( "#MySelection option:selected" ).text();
        $("#hiddenmodelname").val(selectedVal);
        $("#modelname").submit();
    });
}); 
</script>

Post a Comment for "How Can I Get The Text Value Of Select Option While Submitting Form?"