Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making a function dynamic

    I currently have this working function for populating a field of a web form.
    Code:
    	function fill(thisValue) {
    		$('#inputString').val(thisValue);
    		setTimeout("$('#suggestions').hide();", 200);
    	}
    What I want to do is change this function to allow me to reuse it with multiple fields of my form, not just the one with ID 'inputString'. So, I did what I thought was logical and modified it to look like this...
    Code:
    	function fill(thisValue) {
    		var someVar =  new String($(event.target).attr("id"));		
    		$('#'+someVar).val(thisValue);
    		setTimeout("$('#suggestions').hide();", 200);
    	}
    but it's not working. I even went so far as to change test that my variable had the proper value in it that I was anticipating with an alert, and it does show correctly. So then i figured my issue was in my use of the '#'+someVar instead of the hard coded value. So I set someVar manually to the name I wanted to test and that worked. So, I can't for the life of me understand why my updated function isn't working as I would expect. Any insight, to this very green javascripter, would be greatly appreciated.

    Thanks in advance

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    $(event.target).attr("id") should be returning a string by itself already; no need for the new String() object (which is redundant anyway). After changing that, try alerting $('#'+someVar).val(thisValue); and see what you get.

    Also, you could most likely do the entire thing differently (without requiring inline event handlers) but it’s impossible to give any useful advice without seeing the HTML.

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    899
    Thanks
    0
    Thanked 118 Times in 117 Posts
    If $('#inputString') is the event caller in your original version.

    Then:
    Code:
    	function fill(thisValue) {
    		$(this).val(thisValue);
    		setTimeout("$('#suggestions').hide();", 200);
    	}
    should work.

  • #4
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by lerura View Post
    If $('#inputString') is the event caller in your original version.

    Then:
    Code:
    	function fill(thisValue) {
    		$(this).val(thisValue);
    		setTimeout("$('#suggestions').hide();", 200);
    	}
    should work.

    I have the code above and it still didn't work. There is obviously something I'm not understanding about how javascript works.

    Someone mentioned it would be easier to help if you saw the HTML as well, so I've included that here as well.

    Code:
    <form>
    		
    	<div>
    		Sample Field:
    		<br />
    		<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
    	</div>
    			
    	<div class="suggestionsBox" id="suggestions" style="display: none;">
    		<img src="_images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    		<div class="suggestionList" id="autoSuggestionsList">
    			&nbsp;
    		</div>
    	</div>
    			
    </form>
    This javascript works but is not dynamic enough to use with multiple fields...
    Code:
    	function fill(thisValue) {
    		$('#inputString').val(thisValue);
    		setTimeout("$('#suggestions').hide();", 200);
    	}
    so as suggested, I tried this...
    Code:
    	function fill(thisValue) {
    		$(this).val(thisValue);
    		setTimeout("$('#suggestions').hide();", 200);
    	}
    which did not work, it no longer fills in the field as it should.

    Any other help would be greatly appreciated.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    I cannot believe that this worked in the first place. You call the function fill() without any parameter, so how would it know what to put into "thisValue"?

    Maybe it would help if you describe exactly(!) what you want to do? On what action do you want to put which value into which field?

  • #6
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    I cannot believe that this worked in the first place. You call the function fill() without any parameter, so how would it know what to put into "thisValue"?

    Maybe it would help if you describe exactly(!) what you want to do? On what action do you want to put which value into which field?
    To be totally honest Devnull, I was a bit confused by that myself. This is some code I picked up that does an "autocomplete" for a form. I found that strange myself, that there wasn't a supplied parameter, but I assumed it was over my head as I really don't know much about javascript. Somehow, it gets the value "thisValue" from the div element selected from the previous event...
    Code:
    onkeyup="lookup(this.value);"
    My whole goal is to create a "suggestion" list as a user types into a field. I have a form with many fields, and a lot of options. I want to control the input to a degree to get the best dataset possible in my database. So, I want to offer a suggestion list for the user to select from, rather than having to blindly enter the data every time. If the data they want exists, they will select it, from the suggestion list.


  •  

    Tags for this Thread

    Posting Permissions

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