CODEWITHSUNDEEP
phphtml
Manish Suthar
Manish Suthar

Reputation: 48

How to get select value on same page without clicking submit

<html>
<head>
</head>
<body>
    <form action="" method="post">
        <select name="state" >
            <option value="GOA">1. GOA</option>
            <option value="Gujarat">2. Gujarat</option>
            <option value="Rajasthan">3. Rajasthan</option>
        </select> 
        <input type="submit" value="Submit">
    </form>
<?php 
if($_SERVER["REQUEST_METHOD"] == "POST"){
    $st = $_POST["state"];
    echo $st; 
?>
</body>
</html>

I want state value in $st variable by selecting option but without click on submit button. Any suggestions would be appreciated.

Upvotes: 0

Views: 14868

Answers (2)

Nana Partykar
Nana Partykar

Reputation: 10548

<html>
<head>
</head>
<body>
    <form action="" method="post">
        <select name="state" class="Destination">
            <option value="GOA">1. GOA</option>
            <option value="Gujarat">2. Gujarat</option>
            <option value="Rajasthan">3. Rajasthan</option>
        </select> 
        <input type="submit" value="Submit">
        <div class='ShowSelectedValueDiv'>
               //Add This Div
        </div>
    </form>
<script>
$('.Destination').change(function(){
    var Destination=$('.Destination').val();
    $.ajax({url:"ShowSelectedValue.php?Destination="+Destination,cache:false,success:function(result){
        $(".ShowSelectedValueDiv").html(result);
    }});
});
</script>
</body>
</html>

Make One New Page, ShowSelectedValue.php

<?
echo $a=$_GET['Destination'];
?>

Upvotes: 0

CY5
CY5

Reputation: 1580

Just you can do with Javascript attach onchange event handler to Select tag

<html>
<head>
</head>
<body>
    <form action="" method="post">
        <select name="state" onchange="getValue(this)">
            <option value="GOA">1. GOA</option>
            <option value="Gujarat">2. Gujarat</option>
            <option value="Rajasthan">3. Rajasthan</option>
        </select> 
        <input type="submit" value="Submit">
    </form>
<script>
function getValue(obj){
   alert(obj.value);
}
</script>
</body>
</html>

Upvotes: 2

Related Questions