0

Hi,
I need to make a small plugin/ module.

There would be a text field with submit button. This text field to enter zipcode. Onece an user submit a zipcode some info will be fetched from database. I know how to connect database, basic php mysql, javascript.

Thanks

2
Contributors
3
Replies
10
Views
3 Years
Discussion Span
Last Post by diafol
0

So what exactly do you need? Seems that you have the knowledge to complete this task. Show us your code so far and point out where it's going wrong or which bits are causing confusion.

0

Hi Diafol, Here is the code I have. This script send http request once I load it in the browser. But I want to send http request when submit button is clicked.

<html>
  <head>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script id="source" language="javascript" type="text/javascript">

  $(function myFunction() 
  {

    $.ajax({                                      
      url: 'api.php',                  //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {
        var id = data[0];              //get id
        var vname = data[1];           //get name
        //--------------------------------------------------------------------
        // 3) Update html content
        //--------------------------------------------------------------------
        $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); 

      } 
    });
  }); 

  </script>
  </head>
  <body>


  <h2> Client example </h2>
  <form onSubmit="myFunction()">
<input type="submit" value="Submit">
</form>
  <h3>Output: </h3>
  <div id="output">this element will be accessed by jquery and this text replaced</div>


  </body>
</html>

Scrips below is the api.php file

<?php 

  //--------------------------------------------------------------------------
  // Example php script for fetching data from mysql database
  //--------------------------------------------------------------------------
  $host = "localhost";
  $user = "root";
  $pass = "";

  $databaseName = "ajax01";
  $tableName = "variables";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------
  include 'DB.php';
  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------
  $result = mysql_query("SELECT * FROM $tableName");          //query
  $array = mysql_fetch_row($result);                          //fetch result    

  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($array);

?>
0

I generally place all js references and scripts at the end of the page - just before the close </body> tag. That way you can avoid the onready stuff.

<html>
  <head>
  <title>Ajax Trial</title>  
  </head>
  <body>
  <h2> Client example </h2>

  <input type="submit" id="submit" value="Submit">

  <h3>Output: </h3>

  <div id="output">this element will be accessed by jquery and this text replaced</div>

  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <script id="source" language="javascript" type="text/javascript">

  function myFunction() 
  {
    $.ajax({                                      
      url: 'api.php',                  //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {
        var id = data[0];              //get id
        var vname = data[1];           //get name
        //--------------------------------------------------------------------
        // 3) Update html content
        //--------------------------------------------------------------------
        $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); 
      } 
    });
  };

  $('#submit').click(function(){
      myFunction();
  });
  </script>
  </body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.