eric eric - 7 days ago 4
HTML Question

How to alert error when second row text field has same value with first row text field

enter image description here

This is jQuery’s AutoComplete using Multiple Inputs in Same Table. When I select 1000 in Item Code, It will help me autocomplete Item Description, Item Price.

However, when I adding second item, It allow user enter same Item code as previous. How I can alert error when user enter same Item Code with previous Item Code.

I have try a lot of method but still cannot work. Anyone know pls help me.Thanks!! Below is the source code.



$(document).ready(function(){

// Use the .autocomplete() method to compile the list based on input from user
$('#itemCode').autocomplete({
source: 'data/item-data.php',
minLength: 1,
select: function(event, ui) {
var $itemrow = $(this).closest('tr');
// Populate the input fields from the returned values
$itemrow.find('#itemCode').val(ui.item.itemCode);
$itemrow.find('#itemDesc').val(ui.item.itemDesc);
$itemrow.find('#itemPrice').val(ui.item.itemPrice);

// Give focus to the next input field to recieve input from user
$('#itemQty').focus();

return false;
}
// Format the list menu output of the autocomplete
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
.appendTo( ul );
};

// Get the table object to use for adding a row at the end of the table
var $itemsTable = $('#itemsTable');

// Create an Array to for the table row. ** Just to make things a bit easier to read.
var rowTemp = [
'<tr class="item-row">',
'<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
'<td><input name="itemCode[]" class="tInput" value="" id="itemCode" /> </td>',
'<td><input name="itemDesc[]" class="tInput" value="" id="itemDesc" readonly="readonly" /></td>',
'<td><input name="itemQty[]" class="tInput" value="" id="itemQty" /></td>',
'<td><input name="itemPrice[]" class="tInput" value="" id="itemPrice" /></td>',
'</tr>'
].join('');

// Add row to list and allow user to use autocomplete to find items.
$("#addRow").bind('click',function(){

var $row = $(rowTemp);

// save reference to inputs within row
var $itemCode = $row.find('#itemCode');
var $itemDesc = $row.find('#itemDesc');
var $itemPrice = $row.find('#itemPrice');
var $itemQty = $row.find('#itemQty');

if ( $('#itemCode:last').val() !== '' ) {

// apply autocomplete widget to newly created row
$row.find('#itemCode').autocomplete({
source: 'data/item-data.php',
minLength: 1,
select: function(event, ui) {
$itemCode.val(ui.item.itemCode);
$itemDesc.val(ui.item.itemDesc);
$itemPrice.val(ui.item.itemPrice);

// Give focus to the next input field to recieve input from user
$itemQty.focus();

return false;
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
.appendTo( ul );
};
// Add row after the first row in table
$('.item-row:last', $itemsTable).after($row);
$($itemCode).focus();

} // End if last itemCode input is empty
return false;
});

$('#itemCode').focus(function(){
window.onbeforeunload = function(){ return "You haven't saved your data. Are you sure you want to leave this page without saving first?"; };
});

}); // End DOM

// Remove row when clicked
$("#deleteRow").live('click',function(){
$(this).parents('.item-row').remove();
// Hide delete Icon if we only have one row in the list.
if ($(".item-row").length < 2) $("#deleteRow").hide();
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery AutoComplete tutorial using multiple input boxes</title>

<style type="text/css" title="currentStyle">
@import "css/layout-styles.css";
@import "css/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<!-- jQuery libs -->
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>

<!-- Our jQuery Script to make everything work -->
<script type="text/javascript" src="js/jq-ac-script.js"></script>

</head>
<body>

<div id="container">

<div class="panel">
<div class="title-large">
<div class="theme"></div>
</div>
<div class="content inpad">
<div id="messageBox" style="margin-left:15px; padding-left:20px; padding-bottom:5px; border:1px #ccc solid; display:none;"></div>
<form action="" id="itemsForm">

<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Item Code</th>
<th>Item Description</th>
<th>Item Qty</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr class="item-row">
<td></td>
<td><input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1"/> </td>
<td><input name="itemDesc[]" value="" class="tInput" id="itemDesc" readonly="readonly" /></td>
<td><input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2"/></td>
<td><input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly /> </td>
</tr>
</tbody>
</table>
</form>
<a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Add Item</span>sadsada</a>
</div>
</div>
</div>

</body>
</html>





<?php
/* Database setup information */
$dbhost = 'localhost'; // Database Host
$dbuser = 'root'; // Database Username
$dbpass = ''; // Database Password
$dbname = 'itemsdb'; // Database Name

/* Connect to the database and select database */
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname);


$return_arr = array();
$param = $_GET["term"];

$fetch = mysql_query("SELECT * FROM items WHERE itemCode REGEXP '^$param' LIMIT 5");

/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {

$row_array['itemCode'] = $row['itemCode'];
$row_array['itemDesc'] = $row['itemDesc'];
$row_array['itemPrice'] = $row['itemPrice'];

array_push( $return_arr, $row_array );
}

/* Free connection resources. */
mysql_close($conn);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);


I have using $('input').blur(function() Example: jsfiddlethis method but the condition in if function always can't achieve. Anyone please help me if you know it. Thanks

Answer

This is a barebones version that works. https://jsfiddle.net/bindrid/cwj41grx/19/

     var $itemsTable = $('#itemsTable');

      // Create an Array to for the table row. ** Just to make things a bit easier to read.
      var rowTemp = [
        '<tr class="item-row">',
        '<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
        '<td><input name="itemCode[]" class="tInput" value="" id="itemCode" /> </td>',
        '<td><input name="itemDesc[]" class="tInput" value="" id="itemDesc"  readonly="readonly" /></td>',
        '<td><input name="itemQty[]" class="tInput" value="" id="itemQty" /></td>',
        '<td><input name="itemPrice[]" class="tInput" value="" id="itemPrice" /></td>',
        '</tr>'
      ].join('');


                 $("#itemsTable").on("change", ".tInput", function(evtObj) {

          var currentvalue = $(evtObj.target).val();
          var $all = $("#itemsTable").find(".tInput");
          $all.each(function(i, obj) {
            if (this.value == currentvalue && !$(this).is(evtObj.target)) {
              alert("oops, duplicate");
              $(this).css("backgroundColor", "red");
              return false;
            }
          });
        });


$("#addRow").on('click', function() {
        var $row = $(rowTemp);

        // save reference to inputs within row
        var $itemCode = $row.find('#itemCode');
        var $itemDesc = $row.find('#itemDesc');
        var $itemPrice = $row.find('#itemPrice');
        var $itemQty = $row.find('#itemQty');

        $itemsTable.append($row);
        return false;
      });

for this html

    <div id="container">

      <div class="panel">
        <div class="title-large">
          <div class="theme"></div>
        </div>

        <div class="content inpad">

          <div id="messageBox" style="margin-left:15px; padding-left:20px; padding-bottom:5px; border:1px #ccc solid; display:none;"></div>

          <form id="itemsForm" action="">

            <table class="general-table" id="itemsTable">
              <thead>
                <tr>
                  <th></th>
                  <th>Item Code</th>
                  <th>Item Description</th>
                  <th>Item Qty</th>
                  <th>Item Price</th>
                </tr>
              </thead>
              <tbody>
                <tr class="item-row">
                  <td></td>
                  <td>
                    <input name="itemCode[]" tabindex="1" class="tInput ui-autocomplete-input" id="itemCode" role="textbox" aria-haspopup="true" aria-autocomplete="list" value="" autocomplete="off"> </td>
                  <td>
                    <input name="itemDesc[]" class="tInput" id="itemDesc" readonly="readonly" value="">
                  </td>
                  <td>
                    <input name="itemQty[]" tabindex="2" class="tInput" id="itemQty" value="">
                  </td>
                  <td>
                    <input name="itemPrice[]" class="tInput" id="itemPrice" readonly="readonly" value=""> </td>
                </tr>
                <tr class="item-row">
                  <td>
                    <a id="deleteRow"><img title="Remove Item" alt="Remove Item" src="images/icon-minus.png"></a>
                  </td>
                  <td>
                    <input name="itemCode[]" class="tInput ui-autocomplete-input" id="itemCode" role="textbox" aria-haspopup="true" aria-autocomplete="list" value="" autocomplete="off"> </td>
                  <td>
                    <input name="itemDesc[]" class="tInput" id="itemDesc" readonly="readonly" value="">
                  </td>
                  <td>
                    <input name="itemQty[]" class="tInput" id="itemQty" value="">
                  </td>
                  <td>
                    <input name="itemPrice[]" class="tInput" id="itemPrice" value="">
                  </td>
                </tr>
                <tr class="item-row">
                  <td>
                    <a id="deleteRow"><img title="Remove Item" alt="Remove Item" src="images/icon-minus.png"></a>
                  </td>
                  <td>
                    <input name="itemCode[]" class="tInput ui-autocomplete-input" id="itemCode" role="textbox" aria-haspopup="true" aria-autocomplete="list" value="" autocomplete="off"> </td>
                  <td>
                    <input name="itemDesc[]" class="tInput" id="itemDesc" readonly="readonly" value="">
                  </td>
                  <td>
                    <input name="itemQty[]" class="tInput" id="itemQty" value="">
                  </td>
                  <td>
                    <input name="itemPrice[]" class="tInput" id="itemPrice" value="">
                  </td>
                </tr>
              </tbody>
            </table>



          <a class="button-clean large" id="addRow" href="#"><span> <img title="Add Row" alt="Add" src="images/icon-plus.png"> Add Item</span></a>

        </div>



      </div>
    </div>
Comments