how to display the textbox2 based on textbox1 value with jquery

Question

rpv_sen 59 Junior Poster

9 Years Ago

Hi

I am having two textbox, textbox1 is having autosuggest feature. i want to display related value based on textbox1 value.

can any one pls help me.

i collected the code from internet

Output Example

Report Name : PHP

Report Version: It has to display the Verison from the database.

one.php

<div class="form-group">
    <label class="col-sm-4 control-label">Report Name</label>
    <div class="col-sm-3">
        <input type='text' class="form-control" name='report_name' id='report_name' tabindex="0"/>
        <img src="images/loading.gif" id="loading">
        <div id="ajax_response"></div>
    </div>
</div>

<div class="form-group">
    <label class="col-sm-4 control-label">Report Version 1</label>
    <div class="col-sm-3">
        <input type='text' class="form-control" name='report_ver' id='report_ver' tabindex="0"/>
        <img src="images/loading.gif" id="loading1">
        <div id="ajax_response1"></div>
    </div>
</div>

script.js

/*
 cc:scriptime.blogspot.in
 edited by :midhun.pottmmal
*/
$(document).ready(function(){
    $(document).click(function(){
        $("#ajax_response").fadeOut('slow');
    });
    $("#report_name").focus();
    var offset = $("#report_name").offset();
    var width = $("#report_name").width()-2;
    $("#ajax_response").css("left",offset.left); 
    $("#ajax_response").css("width",width);
    $("#report_name").keyup(function(event){
         //alert(event.keyCode);
         var report_name = $("#report_name").val();
         if(report_name.length)
         {
             if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
             {
                 $("#loading").css("visibility","visible");
                 $.ajax({
                   type: "POST",
                   url: "name_fetch.php",
                   data: "data="+report_name,
                   success: function(msg){  
                    if(msg != 0)
                      $("#ajax_response").fadeIn("slow").html(msg);
                    else
                    {
                      $("#ajax_response").fadeIn("slow");   
                      $("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');
                    }
                    $("#loading").css("visibility","hidden");
                   }
                 });
             }
             else
             {
                switch (event.keyCode)
                {
                 case 40:
                 {
                      found = 0;
                      $("li").each(function(){
                         if($(this).attr("class") == "selected")
                            found = 1;
                      });
                      if(found == 1)
                      {
                        var sel = $("li[class='selected']");
                        sel.next().addClass("selected");
                        sel.removeClass("selected");
                      }
                      else
                        $("li:first").addClass("selected");
                     }
                 break;
                 case 38:
                 {
                      found = 0;
                      $("li").each(function(){
                         if($(this).attr("class") == "selected")
                            found = 1;
                      });
                      if(found == 1)
                      {
                        var sel = $("li[class='selected']");
                        sel.prev().addClass("selected");
                        sel.removeClass("selected");
                      }
                      else
                        $("li:last").addClass("selected");
                 }
                 break;
                 case 13:
                    $("#ajax_response").fadeOut("slow");
                    $("#report_name").val($("li[class='selected'] a").text());
                 break;
                }
             }
         }
         else
            $("#ajax_response").fadeOut("slow");
    });
    $("#ajax_response").mouseover(function(){
        $(this).find("li a:first-child").mouseover(function () {
              $(this).addClass("selected");
        });
        $(this).find("li a:first-child").mouseout(function () {
              $(this).removeClass("selected");
        });
        $(this).find("li a:first-child").click(function () {
              $("#report_name").val($(this).text());
              $("#ajax_response").fadeOut("slow");
        });
    });
});

// Report Version

$(document).ready(function(){
    $(document).click(function(){
        $("#ajax_response1").fadeOut('slow');
    });
    $("#report_ver").focus();
    var offset = $("#report_ver").offset();
    var width = $("#report_ver").width()-2;
    $("#ajax_response1").css("left",offset.left); 
    $("#ajax_response1").css("width",width);
    $("#report_ver").keyup(function(event){
         //alert(event.keyCode);
         var report_ver = $("#report_ver").val();
         if(report_ver.length)
         {
             if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
             {
                 $("#loading1").css("visibility","visible");
                 $.ajax({
                   type: "POST",
                   url: "name_fetch_ver.php",
                   data: "data="+report_ver,
                   success: function(msg){  
                    if(msg != 0)
                      $("#ajax_response1").fadeIn("slow").html(msg);
                    else
                    {
                      $("#ajax_response1").fadeIn("slow");  
                      $("#ajax_response1").html('<div style="text-align:left;">No Matches Found</div>');
                    }
                    $("#loading1").css("visibility","hidden");
                   }
                 });
             }
             else
             {
                switch (event.keyCode)
                {
                 case 40:
                 {
                      found = 0;
                      $("li").each(function(){
                         if($(this).attr("class") == "selected")
                            found = 1;
                      });
                      if(found == 1)
                      {
                        var sel = $("li[class='selected']");
                        sel.next().addClass("selected");
                        sel.removeClass("selected");
                      }
                      else
                        $("li:first").addClass("selected");
                     }
                 break;
                 case 38:
                 {
                      found = 0;
                      $("li").each(function(){
                         if($(this).attr("class") == "selected")
                            found = 1;
                      });
                      if(found == 1)
                      {
                        var sel = $("li[class='selected']");
                        sel.prev().addClass("selected");
                        sel.removeClass("selected");
                      }
                      else
                        $("li:last").addClass("selected");
                 }
                 break;
                 case 13:
                    $("#ajax_response1").fadeOut("slow");
                    $("#report_ver").val($("li[class='selected'] a").text());
                 break;
                }
             }
         }
         else
            $("#ajax_response1").fadeOut("slow");
    });
    $("#ajax_response1").mouseover(function(){
        $(this).find("li a:first-child").mouseover(function () {
              $(this).addClass("selected");
        });
        $(this).find("li a:first-child").mouseout(function () {
              $(this).removeClass("selected");
        });
        $(this).find("li a:first-child").click(function () {
              $("#report_ver").val($(this).text());
              $("#ajax_response1").fadeOut("slow");
        });
    });
});

name_fetch_ver.php

<?php
    include("conn.php");
    $keyword = $_POST['data'];
    echo $query = "SELECT distinct VRVERS FROM $version_type where VRVERS= '".$keyword."%'";
    //$sql = "select name from ".$db_table."";
    //$result = mysql_query($sql) or die(mysql_error());
    $sql_res = odbc_exec($connection,$query);
    if(odbc_num_rows($sql_res)>0)
    {
        echo '<ul class="list-unstyled">';
        while(odbc_fetch_row($sql_res))
        //while($row = mysql_fetch_array($result))
        {
            $VRVERS = odbc_result($sql_res,"VRVERS");
            $str = strtoupper(trim($VRVERS));
            $start = strpos($str,$keyword); 
            $end   = similar_text($str,$keyword); 
            $last = substr($str,$end,strlen($str));
            $first = substr($str,$start,$end);

            $final = '<span class="bold">'.$first.'</span>'.$last;

            echo '<li><a href=\'javascript:void(0);\'>'.$final.'</a></li>';
        }
        echo "</ul>";
    }

?>

jquery mssql php

3 Contributors
4 Replies
460 Views
6 Days Discussion Span
Latest Post 9 Years Ago Latest Post by rpv_sen

milil 24 Newbie Poster

9 Years Ago

You can use functions like:

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

this will generate event while somebody is typing so you can do with other text box what you want.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rpv_sen 59 Junior Poster · Answer 1 · 2015-01-23T15:46:41+00:00

Thanks Milil

But i was not good at jquery. can you please give me some example link.

Alicera Nz 0 Newbie Poster · Answer 2 · 2015-01-24T02:16:38+00:00

If I'm not wrong, this is what you want (I'm modifying the code):

<script>
$(document).ready(function() {
$('#btnClick').click(function() {
    var text_value = $("#text1").val();
        document.getElementById('text2').value=text_value;
    });
});
</script>

To see the demo, check here:

http://jsfiddle.net/alicera/8h3ngqrk/

rpv_sen 59 Junior Poster · Answer 3 · 2015-01-29T15:40:49+00:00

Thanks Alicera Nz

But my out is differ from your sample.