Tim Tim - 3 months ago 25
Javascript Question

Set Hidden Field value to Javascript Variable using Jquery or Javascript

Very Brief Background:

I am using Jquery Autocomplete to lookup the the value of an item from a database. That value is then somehow given to a hidden field within the same form and then inserted to the database.

What complicates this slightly is that I am working through Jquery Ui Tabs, which I haven't had a lot of fun with in the past.

So some code within the file that creates the tabs:

<script type="text/javascript">
function findValue(li) {
// if( li == null ) return alert("No match!");

// if coming from an AJAX call, let's use the CityId as the value
if( !!li.extra ) var sValue = li.extra[0];

// otherwise, let's just display the value in the text box
else var sValue = li.selectValue;
}

function selectItem(li) {
findValue(li);
}

function formatItem(row) {
return row[0];
}

function lookupAjax(){
var oSuggest = $(".role")[0].autocompleter;

oSuggest.findValue();

return false;
}

function lookupLocal(){
var oSuggest = $("#role")[0].autocompleter;

oSuggest.findValue();

return false;
}
</script>


The same file creates the tabs and also has a callback initiating the Jquery Autocomplete

<script type="text/javascript">
$(function() {
$("#tabs").tabs({
load: function(event, ui) { setTimeout( function() { $(".title").focus(); }, 500 );
var ac = $(".role").autocomplete(
"/profile/autocomplete",
{
delay:10,
minChars:1,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true
}
);

ac[0].autocompleter.findValue();
}
});
});
</script>


Then in the actual tab code is the form

<?php $tab_id = $this->uri->segment(4);
$hidden = array('tab_id' => $tab_id);
$attributes = array('name' => 'additem');
echo form_open('profile/new_item', $attributes, $hidden); ?>
<input type="hidden" value="" name="rolehidden"/>
<?php echo validation_errors(); ?>
<table width="100%" padding="0" class="add-item">
<tr>
<td>Title: <input class="title" type="text" name="title" value="<?php echo set_value('title'); ?>"></input></td>
<td>Role: <input class="role" type="text" name="role" size="15"></input></td>
<td>Year: <input type="text" name="year" size="4" maxlength="4"></input></td>
<td align="right"><input type="submit" value="Add"></input></td>
</tr>
</table>
</form>t


All I want to do is get sValue and make it the value of the hidden field in the form.

I should also mention that the JQuery Tabs have multiple tabs that all have the same form. This means that there are several different input fields all with the same name/id/class across all of the tabs.

I know this is a problem for ID attributes, but not sure if the same applies to the name attributes.

I have tried so many different code snippets of Javascript and Jquery that I just can't think anymore.

BREAKTHROUGH ... But still a problem

$("[name='rolehidden']").val(sValue);


Just had a break through. This code does work... BUT only on an
<input ="text">
Element. It fails to work on
<input ="hidden">
Is there a work around or should I use CSS to hide the text input box?

Please help

Tim

Answer

"All I want to do is get sValue and make it the value of the hidden field in the form."

Have you tried?

$("[name='rolehidden']").val(sValue);