Javascript: Loading data into an hidden form element

Question

I'm working on a school assignment, which consists of creating a social network (Basically: Facebook :P). This is in groups, and one of us wrote an auto-complete search engine, which works like this:

http://img585.imageshack.us/img585/333/194d61cbc3fe4cc98005ea1.png

You enter a name, it used some js and php to query the DB to find profiles matching the part of the string you entered. Now, I want to use this functionality to implement the tagging of photos. Now the problem is this: This .js script returns an unordered list of elements, consisting of links (hrefs), and if one is selected:

select: function( event, ui ) {
    if (ui.item) {
        window.location.href = ui.item.href;    
    }
}

gets called to navigate to the appropriate profile. Now what I'd like to do is: Enter a string, get the list of query results, and when I click one, i want to load it inside the box. Now I have almost 0 experience with PHP and JavaScript (I had to learn it from scratch basically, I can handle most of it now, but still... :P), and I can't get it to work

Basically that text box is "defined" in the html like this:

<div class="widget" id="search">
    <form id="search" method="POST" enctype="multipart/form-data">
        <input type="hidden" name="search" value="3559d7accf00360971961ca18989adc0614089c0" />
        <div class="field text term "><label for="term">Zoeken</label>
            <input type="text" name="term" id="term" class="text" value="" />
        </div>
    </form>
</div>

How do I access that actual textbox, and put data in it? Any takers? :) I can't seem to get it to work, despite trying almost every name, id or class that I see there. I just need to get the clicked name into the box, so I can just submit it & enter it into the database, as having to enter the entire exact name manually isn't really... Fancy enough

IDs should be unique. Moreover, in some old browsers, using a name that already exists as id can cause problems. — Marcel Korpel
– Marcel Korpel, Commented May 2, 2011 at 10:56
If the site's client-side will grow in size (as expected), it's probably for the best to use a javascript library like MooTools or jQuery for cross-browser consistency, and just ease of us. But keep with vanilla js for simple DOM operations and things like that. — Zirak
– Zirak, Commented May 2, 2011 at 11:03
Marcel: True, but I did not write this part of the code myself, I'm just trying to adapt to it :) Zirak: We do indeed use jQuery, and this code is part of it (or atleast based on it), but almost all of our javascript is based on the jQuery libraries & plugins. — Licargon
– Licargon, Commented May 2, 2011 at 11:15
Then you should go back to the one who wrote it and tell him/her that there's a serious problem with the markup. Really, you shouldn't try to adapt to such an error (and perhaps you even can't work around it). — Marcel Korpel
– Marcel Korpel, Commented May 2, 2011 at 11:19

Marcel Korpel · Accepted Answer · 2011-05-02 11:04:54Z

1

document.getElementById('term').value = newValue;

or, using jQuery (as you specified in the tags):

$('#term').val(newValue);

edited May 2, 2011 at 11:04

answered May 2, 2011 at 10:56

Marcel Korpel

21.9k6 gold badges63 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Licargon Over a year ago

I had already tried both, with no results whatsoever. I click a name in the list, the dropdown box disappears and the field stays empty. The strange thing is that this is basically plain jQuery autocomplete code, and in the jQ demos on that, when one of the results is clicked it DOES get loaded inside the box. Got the feeling I've got to annoy that group member that wrote it then, unless anyone has a different idea? :)

Marcel Korpel Over a year ago

@Licargon: Where did you try that in your code? And are you sure that there's only element with ID term? And if jQuery autocomplete should provide that by itself, then you shouldn't try to workaround it this way, but ensure that the plugin works correctly (and that might still be because there's another element with ID term).

Licargon Over a year ago

The ID "term" is unique on that page, so that shouldn't matter. (As it's also used in the php data source, so the guy made sure that it was unique). And I've tried it in the "select" function of the autocomplete code (the same part that'll redirect my browser when I click the link that should be associated with the name). When I just put alert("Test"); in there, it alerts me with that message when I click it, so I have the right spot to put the code, but it just doens't seem to work.

Marcel Korpel Over a year ago

@Licargon: I can't see it in your code, but it might as well be that your select function overrides the one of jQuery. Another guess is that term is no longer a text input, but transformed by the plugin to some complex thing, so the value attribute no longer has effect on it.

Licargon Over a year ago

I did some more testing, and by using alert(document.getElementById('term').value); I can actually read what I typed in, but I can't seem to put something in it. SO it seems I got the right id & all, but I guess It's something the author f**ked up, and it's not just my basic knowledge of js. Thanks for the help, I'll go poke him now instead of wasting my time trying the same code 500 times :)

Collectives™ on Stack Overflow

Javascript: Loading data into an hidden form element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related