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>
  <script src="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>
 <select name="modelname" id="modelname" class="form-control">
  <option value="" selected="">Model Selection</option>
  <option value="0">1.4 TB Distinctive</option>
  <option value="1">1.4 TB MultiAir Distinctive</option>
  <option value="2">1.4 TB MultiAir Progression Pluse</option>
  <option value="3">1.4 TB MultiAir Super TCT</option>
  <option value="4">1.4 TB Progression Plus</option>
  <option value="5">1.6 JTD Distinctive</option>
  <option value="6">1.6 JTD Progression</option>
  <option value="7">1.6 JTD Progression Plus</option>
  <option value="8">1.6 JTD Progression Pluse</option>
  <option value="9">1.6 JTD Super TCT</option>
  <option value="10">1.75 TBI Quadrifoglio Verde</option>
</select>
<button type="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>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <form id="MySelection" accept-charset="UTF-8" method="post">
                <select name="modelname" id="modelname" class="form-control">
                  <option value="" selected="">Model Selection</option>
                  <option value="0">1.4 TB Distinctive</option>
                  <option value="1">1.4 TB MultiAir Distinctive</option>
                  <option value="2">1.4 TB MultiAir Progression Pluse</option>
                  <option value="3">1.4 TB MultiAir Super TCT</option>
                  <option value="4">1.4 TB Progression Plus</option>
                  <option value="5">1.6 JTD Distinctive</option>
                  <option value="6">1.6 JTD Progression</option>
                  <option value="7">1.6 JTD Progression Plus</option>
                  <option value="8">1.6 JTD Progression Pluse</option>
                  <option value="9">1.6 JTD Super TCT</option>
                  <option value="10">1.75 TBI Quadrifoglio Verde</option>
                </select>
                <input type="hidden" name="authenticity_token" value="xyz123">
                <input type="hidden" name="hiddenmodelname" id="hiddenmodelname" value="">
                <button type="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?"