How to alert error when second row text field has same value with first row text field
Question
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: jsfiddle this method but the condition in if function always can't achieve. Anyone please help me if you know it. Thanks
2 answers
solution1
2 2016-11-28 03:45:54
I have no way to test it but I don't see any issues with this.
$(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
$row.find("input[type='text']").on("change", function(evtObj)
{
var currentvalue = $(evtObj.target).val();
var $all = $("#itemsTable").find("input[type='text']");
$all.each(function(i,obj)
{
if(this.value == currentvalue && !$(this).is(evtObj.target))
{
alert("oops, duplicate");
$(this).css("backgroundColor", "red");
return false;
}
});
});
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();
});
solution2
1 ACCPTED 2016-11-28 08:54:42
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to set same date first text box to second text box when field in counter?
Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row
alert text field value when someone enters
JavaScript: How to display alert box when value in text field is changed
How to get table row value into text field in JavaScript..?
Populating dropdown field with text when a row is selected
How to compare old value of one text field when it is clicked, with the value of the same text field when it loses a focus
how to set another field value in same row
Summation of text fields on keyup causes issues in first field of a row
Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row (continued)
Related Tags