how to send some values to 'filename.php', the value of item selected in the dropdrown, on click of a 'Submit' button

Question

I have to load a php file inside a 'div' in my html code. For this I've used 'required_once('filename.php') which works.

I tried JQuery way,

         $("#btnSubmit").click(function(){
            $("#earth").load('filename.php');
            });
          });

Can anyone tell me a way to send data(value of dropdown) to 'filename.php' and then load the 'filename.php' inside the div with id='earth' ?

This is my HTML code

<body>
    <div class="row">
    <form class="form-inline" action="" method="post">
        <div class="btn-group"> 
            <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="javascript:;">
                Select Country/City
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="javascript:;">Africa</a></li>
                <li><a href="javascript:;">London</a></li>
                <li><a href="javascript:;">South Africa</a></li>
                <li><a href="javascript:;">Korea</a></li>
                <li><a href="javascript:;">Delhi</a></li>
                <li><a href="javascript:;">Las Vegas</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="submit" id="btnSubmit" class="btn btn-green">Read</button>
        </div>
    </form> 
</div>

<div class="row">
    <div class="col-md-12">
        <div class="portlet box blue">
            <div class="portlet-body">
                <div class="dataTable_wrapper">
                    <div id="earth">
                        <?php require_once 'filename.php'; ?>     (1) <-- Pass value to this file
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

This is the filename.php

  <?php
   HERE I WANT TO GET THE VALUE SELECTED IN THE DROPDOWN i.e Africa/London etc?
   $selectedCity = ??
   echo "<h2> Hello User! </h2>";
   echo "<p> You selected ".$selectedCity."</p>";
   ?>

may be you need to `preventDefault` behaviour of `submit` button on click event — Amit Soni, May 18 '15 at 05:05
possible duplicate of [How to load PHP file into DIV by jQuery?](http://stackoverflow.com/questions/12524228/how-to-load-php-file-into-div-by-jquery) — Nagaraj S, May 18 '15 at 05:07

score 1 · Answer 1 · answered May 18 '15 at 05:41

Try something like this

On client Side

 [akshay@localhost tmp]$ cat test.html
 <html>
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 </head>
 <body>
     <div class="row">
     <form class="form-inline" action="" method="post">
         <div class="btn-group"> 
             <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="javascript:;">
                 Select Country/City
                 <span class="caret"></span>
             </a>
             <ul class="dropdown-menu">
                 <li><a href="javascript:;">Africa</a></li>
                 <li><a href="javascript:;">London</a></li>
                 <li><a href="javascript:;">South Africa</a></li>
                 <li><a href="javascript:;">Korea</a></li>
                 <li><a href="javascript:;">Delhi</a></li>
                 <li><a href="javascript:;">Las Vegas</a></li>
             </ul>
         </div>
         <div class="btn-group">
             <button type="submit" id="btnSubmit" class="btn btn-green">Read</button>
         </div>

    <input type="hidden" id="country" name="country" />

     </form> 
 </div>
 <script>
    $(document).ready(function(){
        $(".dropdown-menu li a").click(function()
        {
            $("#country").val($(this).text());      
        });

        $("#btnSubmit").click(function()
        {
            $.ajax({ 
                    url:"filename.php", 

                    type:"POST", data : $('.form-inline').serialize(),  
                    success : function(data){ alert(data); },
                    error: function(jqXHR, exception) {
                                    if (jqXHR.status === 0) {
                                        alert('Not connect.\n Verify Network.');
                                    } else if (jqXHR.status == 404) {
                                        alert('Requested page not found. [404]');
                                    } else if (jqXHR.status == 500) {
                                        alert('Internal Server Error [500].');
                                    } else if (exception === 'parsererror') {
                                        alert('Requested JSON parse failed.');
                                    } else if (exception === 'timeout') {
                                        alert('Time out error.');
                                    } else if (exception === 'abort') {
                                            alert('Ajax request aborted.');
                                    } else {
                                        alert('Uncaught Error.\n' + jqXHR.responseText);
                                    }
                        }
                });

            return false;
        });
    }); 
 </script>
 </html>

On Server Side

 [akshay@localhost tmp]$ cat filename.php
 <?php  
      // HERE I WANT TO GET THE VALUE SELECTED IN THE DROPDOWN i.e Africa/London etc?
      if(isset($_POST['country']) && $_POST['country'] != '')
      { 
            $selectedCity = $_POST['country'];
            echo "<h2> Hello User! </h2>";
            echo "<p> You selected ".$selectedCity."</p>";
      }else
      {
        echo "<h2> Hello User! you didn't select anything </h2>";
      }

 ?>

I tried it. it is giving error as 'Undefined index: country in filename.php' — Neha, May 18 '15 at 06:19

score 0 · Answer 2 · answered May 18 '15 at 05:05

0

Use the below code:

$("#btnSubmit").click(function(){
            $("#earth").load('complete url to the filename.php');
            });
          });

And the use that result that you get to pass the value where you wish to pass .

I hope this helps you.

answered May 18 '15 at 05:05

Sourabh Kumar Sharma

2,864
3
25
33

how to send some values to 'filename.php', the value of item selected in the dropdrown, on click of a 'Submit' button

2 Answers2