SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery autocomplete with identical IDs

    Hi there,

    I've hit a brick wall in the sense that I can't seem to think up the logic required to perform this task.

    Basically I have a number of rows that are populated by a MySQL database. There are a few columns which a user must fill in to update certain information which are input fields. Without using Jquery/Ajax, everything is working fine. The only issue is that, to make data entry easier, autocomplete these fields based on a first name entered. This first name entered retrieves information from a MySQL database via PHP and Jquery autocomplete.

    I have this working well when only one row is modified but as you can imagine there are many rows on a page and each one needs to be validated separately.

    Here is the Jquery which works on a single row.

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	 $('input#inst_fname').autocomplete({
    
     
        source: "contractor_prefill.php",
        minLength: 1,
    	
    	select: function(event, ui) {
    			$('#inst_suburb').val(ui.item.suburb);
    			$('#inst_state').val(ui.item.state);	
    			$('#inst_lname').val(ui.item.second_name);		
    			$('#inst_unit_type').val(ui.item.unit_type);		
    			$('#inst_num').val(ui.item.unit_no);		
    			$('#inst_street_num').val(ui.item.street_no);		
    			$('#inst_street_name').val(ui.item.street_name);		
    			$('#inst_street_type').val(ui.item.street_type);		
    			$('#inst_postcode').val(ui.item.postcode);		
    			$('#inst_phone_num').val(ui.item.phone_no);		
    					
    		}
        });
    
    })
    ;
    </script>
    Here is an example of the HTML:

    Code:
     <input type=\"text\" name=\"inst_fname[]\" id=\"inst_fname\"  ></td> <td>
     	 <input type=\"text\" name=\"inst_lname[]\" id=\"inst_lname"\"></td> <td>
    I understand that you need unique IDs for this to work but this is where I fall short. I tried to use classes but that just duplicated the data on all rows. I have even started thinking about using for loops but it's starting to get messy.

    If anyone can point me in the right direction I would be truly grateful.

    Thanks.

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Remove the id attribute, and instead use a class.

    Code:
     <input type=\"text\" name=\"inst_fname[]\" class=\"autocomplete\"  ></td> <td>
     	 <input type=\"text\" name=\"inst_lname[]\" class=\"autocomplete"\"></td> <td>
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	 $('input.autocomplete').autocomplete({
    
     
        source: "contractor_prefill.php",
        minLength: 1,
    	
    	select: function(event, ui) {
    			$('#inst_suburb').val(ui.item.suburb);
    			$('#inst_state').val(ui.item.state);	
    			$('#inst_lname').val(ui.item.second_name);		
    			$('#inst_unit_type').val(ui.item.unit_type);		
    			$('#inst_num').val(ui.item.unit_no);		
    			$('#inst_street_num').val(ui.item.street_no);		
    			$('#inst_street_name').val(ui.item.street_name);		
    			$('#inst_street_type').val(ui.item.street_type);		
    			$('#inst_postcode').val(ui.item.postcode);		
    			$('#inst_phone_num').val(ui.item.phone_no);		
    					
    		}
        });
    
    })
    ;
    </script>
    Be sure to congratulate xMog on earning April's Member of the Month
    Go ahead and blame me, I still won't lose any sleep over it
    My Blog | My Technical Notes

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi cpradio,

    I have done this but the other fields won't populate now.

    As mentioned in my previous post, I did try using a class but it duplicated on each row the same information.

    From your suggestion I'm trying to understand how $('#inst_suburb').val(ui.item.suburb); is identified if it's replaced with a class. The only reference is the name attribute.

    Thanks.

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    What is the HTML surrounding the input fields? Are they in a table?
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ScallioXTX,

    Yes they are. I'll post more of the code here:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	 $('input.autocomplete').autocomplete({
    
     
        source: "contractor_prefill.php",
        minLength: 1,
    	
    	select: function(event, ui) {
    			$('#inst_suburb').val(ui.item.suburb);
    			$('#inst_state').val(ui.item.state);	
    			$('#inst_lname').val(ui.item.second_name);		
    			$('#inst_unit_type').val(ui.item.unit_type);		
    			$('#inst_num').val(ui.item.unit_no);		
    			$('#inst_street_num').val(ui.item.street_no);		
    			$('#inst_street_name').val(ui.item.street_name);		
    			$('#inst_street_type').val(ui.item.street_type);		
    			$('#inst_postcode').val(ui.item.postcode);		
    			$('#inst_phone_num').val(ui.item.phone_no);		
    					
    		}
        });
    
    })
    ;
    </script>
    HTML Code:
    <table width="100%" class="results">
    <tr>
    <form action='file.php' method='post' width='100%'>
    <td>
     <input type=\"text\" name=\"inst_fname[]\" class=\"autocomplete\"  ></td> <td>
     	 <input type=\"text\" name=\"inst_lname[]\" class=\"autocomplete\"></td> 
    <td>	<input type=\"submit\" > </td>
    	</tr>
    	</form>

  6. #6
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Couldn't you use $(this).parent().find('.classname').val()
    Be sure to congratulate xMog on earning April's Member of the Month
    Go ahead and blame me, I still won't lose any sleep over it
    My Blog | My Technical Notes

  7. #7
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    Try this:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
      $('input.autocomplete').autocomplete({
        source: "contractor_prefill.php",
        minLength: 1,
        select: function(event, ui) {
          var p = $(this).parent(), i=ui.item;
          $('.inst_suburb', p).val(i.suburb);
          $('.inst_state', p).val(i.state);
          $('.inst_lname', p).val(i.second_name);
          $('.inst_unit_type', p).val(i.unit_type);
          $('.inst_num', p).val(i.unit_no);
          $('.inst_street_num', p).val(i.street_no);
          $('.inst_street_name', p).val(i.street_name);
          $('.inst_street_type', p).val(i.street_type);
          $('.inst_postcode', p).val(i.postcode);
          $('.inst_phone_num', p).val(i.phone_no);
        }
      });
    });
    </script>
    And put the class 'autocomplete' only on 'inst_fname' fields.

    Also, as a tip, use only one name for one thing in all programming languages concerned. For example you are referring to 'phone_num' in HTML/JS while at the same time referring to 'phone_no' in your PHP. This practice will just confuse you. and makes your code overly complicated (e.g., there's no chance to optimise this code with 'foreach' like constructs because of the irregularities). Pick one of them and stick with it throughout all languages.
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  8. #8
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that ScallioXTX and removed the autocomplete class from all fields except from inst_fname however it is not populating the rest of the fields.

    Also, completely agree with the naming scheme you mentioned. I have just changed all references.

  9. #9
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cpradio, do you mean like the example ScallioXTX posted?

  10. #10
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by jonesy001 View Post
    I tried that ScallioXTX and removed the autocomplete class from all fields except from inst_fname however it is not populating the rest of the fields.

    Also, completely agree with the naming scheme you mentioned. I have just changed all references.
    Forgot to mention, you should also replace the ID of all other fields to classes. So id="inst_state" becomes class="inst_state", etc.

    Quote Originally Posted by jonesy001 View Post
    cpradio, do you mean like the example ScallioXTX posted?
    Yup, different code to do the same thing.
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  11. #11
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Forgot to mention, you should also replace the ID of all other fields to classes. So id="inst_state" becomes class="inst_state", etc.
    Ok, just tried that and still no results.

    I'll post updated code here to make sure I'm on the right page.

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.autocomplete').autocomplete({
    		source: "contractor_prefill.php",
    		minLength: 1,
    		select: function(event, ui) {
    			var p = $(this).parent(), i=ui.item;
    			$('.inst_suburb', p).val(i.suburb);
    			$('.inst_state', p).val(i.state);
    			$('.inst_lname', p).val(i.second_name);
    			$('.inst_unit_type', p).val(i.unit_type);
    			$('.inst_unit_no', p).val(i.unit_no);
    			$('.inst_street_no', p).val(i.street_no);
    			$('.inst_street_name', p).val(i.street_name);
    			$('.inst_street_type', p).val(i.street_type);
    			$('.inst_postcode', p).val(i.postcode);
    			$('.inst_phone_no', p).val(i.phone_no);
    		}
        });
    });
    </script>
    
    
    
    
     <input type=\"text\" name=\"inst_fname[]\" class=\"autocomplete\"  ></td> <td>
     	 <input type=\"text\" name=\"inst_lname[]\" class=\"inst_lname\"></td> <td>
     	 <input type=\"text\" name=\"inst_unit_type[]\" class=\"inst_unit_type\"></td> <td>
     	 <input type=\"text\" name=\"inst_unit_no[]\" class=\"inst_unit_no\"></td> <td>
     	 <input type=\"text\" name=\"inst_street_no[]\" class=\"inst_street_no\"></td> <td>
     	 <input type=\"text\" name=\"inst_street_name[]\" class=\"inst_street_name\"></td> <td>
     	 <input type=\"text\" name=\"inst_street_type[]\" class=\"inst_street_type\"></td> <td>
     	 <input type=\"text\" name=\"inst_suburb[]\" class=\"inst_suburb\"></td> <td>
      	 <input type=\"text\" name=\"inst_state[]\" class=\"inst_state\" ></td> <td>
      	 <input type=\"text\" name=\"inst_postcode[]\" class=\"inst_postcode\"></td> <td>
       	 <input type=\"text\" name=\"inst_phone_no[]\" class=\"inst_phone_no\"></td> "
    I should make mention that these input fields are created in a php while loop.

  12. #12
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    Right, so all the inputs are in different <td>'s. I missed that. Try this

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
      $('.autocomplete').autocomplete({
        source: "contractor_prefill.php",
        minLength: 1,
        select: function(event, ui) {
          var p = $(this).parent().parent(), i=ui.item;
          p.find('.inst_suburb').val(i.suburb);
          p.find('.inst_state').val(i.state);
          p.find('.inst_lname').val(i.second_name);
          p.find('.inst_unit_type').val(i.unit_type);
          p.find('.inst_unit_no').val(i.unit_no);
          p.find('.inst_street_no').val(i.street_no);
          p.find('.inst_street_name').val(i.street_name);
          p.find('.inst_street_type').val(i.street_type);
          p.find('.inst_postcode').val(i.postcode);
          p.find('.inst_phone_no').val(i.phone_no);
        }
        });
    });
    </script>
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  13. #13
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ScallioXTX,

    That worked perfectly!

    Thank you very much.

  14. #14
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jonesy001 View Post
    cpradio, do you mean like the example ScallioXTX posted?
    Yup, but I was trying to do it from a mobile phone (way too complicated). @ScallioXTX ; thanks for the assist
    Be sure to congratulate xMog on earning April's Member of the Month
    Go ahead and blame me, I still won't lose any sleep over it
    My Blog | My Technical Notes

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    It should be mentioned, that the HTML posted is invalid. To make it valid, the table could be a child entirely of the form.
    <form>
    <table>
    ...
    </table>
    </form>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •