Computing desk
< June 25	<< May \| June \| Jul >>	Current desk >

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is a transcluded archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

June 26

Editable Combobox

I want to post the contents of the editable combo box other fields i can handle except the editable combo box.Please help me the combo box and other fields are filled with default values from MySQL database when form page is opened by clicking on a hyperlink reference anchor tag list with individual ticket numbers.Based on ticket number containing database row containing ticket number is selected and all form fields except the editable Combo box is correctly filled so please help to post the data of Combo box to the form handling.At least the Combo box is now correctly filled with default data from database on clicking the correct number inside anchor tag but post is not working for Combo box data whether it selected data or data entered intext field

Extended content

                
           <?php $sl=$_GET["sl"];

 

 $dsn2 = "mysql:dbname=reqdetails;host=192.168.28.51;port=3306";
 $username2 = "%";$password2 = "";
 $con4=new PDO($dsn2, $username2, $password2);
$con4->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$con4->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
//$con4->beginTransaction();
$stmt99=$con4->prepare("SELECT id,employeemis,menu,Tonerrequisitionstatus,reamsofa4paperrequisitioned,paperrequisitionstatus FROM requisitionbyuserdetails WHERE id=:id");$stmt99->bindValue(':id',$sl);
 //$con4->commit();
 $stmt99->execute();
 $stmt100=$stmt99->fetch(PDO::FETCH_OBJ);
 $issuno=(string)$stmt100->id;$emis=(string)$stmt100->employeemis;
 $rmenu=(string)$stmt100->menu; $tonerstatus=(string)$stmt100->Tonerrequisitionstatus;$rpaper=(string)$stmt100->reamsofa4paperrequisitioned;$paperstatus=(string)$stmt100->paperrequisitionstatus;
// $jsonn=json_encode($stmt100);
 //$jsonn2 = json_decode($jsonn);echo "new output";echo"<br>";
//echo json_encode($jsonn2, JSON_PRETTY_PRINT);
 
//echo"<br>"; echo "old output";echo"<br>";
$ticketno=$sl;
 //echo $sl; echo "<br>";echo $_GET["sl"]; 
 $sl=NULL; $_GET["sl"]=NULL;
?><!--<script>
var data = {
    "id": "368",
    "employeemis": "im5",
    // always use "name" to find radio or checkbox multiple
    "menu": "HP LaserJet1606dn"
	 "Tonerrequisitionstatus": "No issue", "reamsofa4paperrequisitioned": "8", "paperrequisitionstatus": "No issue"

	
	}</script>-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>default data</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.prefillForm.js"></script>
 <style>
  .custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $.widget( "custom.combobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element );
 
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },
 
      _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";
 
        this.input = $( "<input>" )
          .appendTo( this.wrapper )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy( this, "_source" )
          })
          .tooltip({
            classes: {
              "ui-tooltip": "ui-state-highlight"
            }
          });
 

enter code here
        this._on( this.input, {
          autocompleteselect: function( event, ui ) {
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },
 
          autocompletechange: "_removeIfInvalid"
        });
      },
 
      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;
 
        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Show All Items" )
          .tooltip()
          .appendTo( this.wrapper )
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass( "ui-corner-all" )
          .addClass( "custom-combobox-toggle ui-corner-right" )
          .on( "mousedown", function() {
            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
          })
          .on( "click", function() {
            input.trigger( "focus" );
 
            // Close if already visible
            if ( wasOpen ) {
              return;
            }
 
            // Pass empty string as value to search for, displaying all results
            input.autocomplete( "search", "" );
          });
      },
 
      _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return {
              label: text,
              value: text,
              option: this
            };
        }) );
      },
 
      _removeIfInvalid: function( event, ui ) {
 
        // Selected an item, nothing to do
        if ( ui.item ) {
          return;
        }
 
        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() {
          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
            this.selected = valid = true;
            return false;
          }
        });
 
        // Found a match, nothing to do
        if ( valid ) {
          return;
        }
 
        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " didn't match any item" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
          this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
      },
 
      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
    });
 
    $( "#combobox" ).combobox();
    $( "#toggle" ).on( "click", function() {
      $( "#combobox" ).toggle();
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget"><form id="f" action= "http://192.168.28.51/req/easyissue1.php" method="POST">
 <b>Enter ticket number for issuing paper or toner:</b><input required type="text"  name="ticketno" value="<?php echo $issuno ;?>" /> 
 <b>Enter MIS No of Requisitioning employee</b><input required type="text" size="5" name="employeemis" value="<?php echo $emis ;?>"/><br><br> 
  <label><b>Select Model No of Printer for Toner Replacement:</b></label>
  <select id="combobox">
 <br><br><b>   <option value="">Select one...</option>
     </b>
	<!--<select name="menu" onchange="process_choice(this,document.demoform.choicetext)">-->
<option value="0" selected><?php echo $rmenu; ?></option>
<option value="HP LaserJet1606dn">HP LaserJet1606dn</option>
<option value="HP MFP Pro1005">HP MFP Pro1005</option>
<option value="HP LaserJet P1007">HP LaserJet P1007</option>
<option value="HP LaserJet P1008">HP LaserJet P1008</option>
<option value="HP OfficeJet1020">HP OfficeJet1020</option>
<option value="No requisition">No requisition</option>
    
  </select>
<!--</div>-->
<!--<button id="toggle">Show underlying select</button>-->
<!--<div>-->

<br><br><b>Enter number of reams of A4 paper required:</b><input required type="text" size="2" name="reamsofa4paperrequisitioned" value="<?php echo $rpaper ;?>" />

<b>Update paper requisition status</b><input required type="text" name="paperrequisitionstatus" value="<?php echo $paperstatus ;?>"/><br><br>
<b>Update toner requisition status</b><input required type="text" name="Tonerrequisitionstatus" value="<?php echo $tonerstatus ;?>"/>
<input type="submit" name="Issue" value="Issue"/>
<!--<h4>Please don't forget to logout after sending requisition</h4>-->

</form>

</div> 
 
</body>
</html>

<script>
//var data = {
    //"id": "368",
    //"employeemis": "im5",
    // always use "name" to find radio or checkbox multiple
    //"menu": "HP LaserJet1606dn"
	// "Tonerrequisitionstatus": "No issue", "reamsofa4paperrequisitioned": "8", "paperrequisitionstatus": "No issue"

	
	//}
$("#f_findbyname .btn").bind("click", function() {
    $("#f_findbyname").autofill(data, {
        findbyname: false
    });
});
var options = {
    findbyname: true,
    restrict: true
}
// autofill with options :
$("#f").autofill( data, options );
$("#f").autofill( data );
</script><?php echo"<div>";
echo'<form action="http://192.168.28.51/req/x55.php" method="post">';
echo'<input name="return" type="hidden" value="';echo urlencode($_SERVER["PHP_SELF"]);echo'"/>'; 
echo'<input type="submit" value="Logout"/>';
echo'</form>';echo'</div>';?>

— Preceding unsigned comment added by 45.120.17.7 (talk) 10:44, 26 June 2018 (UTC)reply

This page was redesigned at the edge.

A page that knows where it met you.

Wikipedia:Reference desk/Archives/Computing/2018 June 26

June 26

Editable Combobox