【问题标题】:Set Hidden Field value to Javascript Variable using Jquery or Javascript使用 Jquery 或 Javascript 将隐藏字段值设置为 Javascript 变量
【发布时间】:2010-01-14 04:27:27
【问题描述】:

非常简短的背景:

我正在使用Jquery Autocomplete 从数据库中查找项目的值。然后以某种方式将该值赋予同一表单中的隐藏字段,然后插入到数据库中。

使这稍微复杂的是,我正在使用 Jquery Ui 选项卡,过去我没有玩过很多乐趣。

因此,文件中的一些代码会创建选项卡:

<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>

同一个文件创建选项卡,并有一个回调启动 Jquery 自动完成

<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>

那么在实际的tab代码中就是表单

<?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 

我要做的就是获取 sValue 并将其设置为表单中隐藏字段的值。

我还应该提到,JQuery 选项卡有多个选项卡,它们都具有相同的形式。这意味着在所有选项卡中都有多个具有相同名称/id/类的不同输入字段。

我知道这是 ID 属性的问题,但不确定是否同样适用于名称属性。

我已经尝试了这么多不同的 Javascript 和 Jquery 的 sn-ps 代码,我实在想不出来了。

突破……但仍然是个问题

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

刚刚突破。此代码确实有效...但仅适用于 &lt;input ="text"&gt; 元素。它无法在 &lt;input ="hidden"&gt; 上工作 有解决方法还是应该使用 CSS 来隐藏文本输入框?

请帮忙

提姆

【问题讨论】:

    标签: javascript jquery jquery-autocomplete setvalue


    【解决方案1】:

    “我要做的就是获取 sValue 并使其成为表单中隐藏字段的值。”

    你试过了吗?

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

    【讨论】:

    • 我应该把这个放在哪里?我必须在提交按钮上触发这个吗???抱歉,我需要更多帮助
    • 把它放在你的findValue()函数的末尾。据我所知,这就是创建 sValue 的地方。
    • 您好,是的,我已经尝试过了,只是再次尝试,但是它不起作用。请注意,我添加了更多信息,这些信息可能对其工作至关重要......我还应该提到 JQuery 选项卡有多个选项卡,它们都具有相同的形式。这意味着在所有选项卡中都有几个不同的输入字段,它们都具有相同的名称/id/类。我知道这是 ID 属性的问题,但不确定是否同样适用于名称属性。
    • 刚刚突破。此代码确实有效...但仅在 元素上。它无法在 上工作是否有解决方法或者我应该使用 CSS 来隐藏文本输入框?
    • @Jonathan 非常感谢乔纳森的这段代码!你过去曾多次帮助过我,但这一次让我感到困惑。非常感谢!
    【解决方案2】:

    试试这个

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

    【讨论】:

    • 好主意。当然值得多解释一下。
    【解决方案3】:

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

    【讨论】:

    • 我应该把这个放在哪里?我必须在提交按钮上触发这个吗???抱歉,我需要更多帮助
    【解决方案4】:

    您可以通过$(selector).attr(key, value); 完成此操作

    例如:

    $('input.classname').attr('value','value to set');
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-11-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-08-25
      相关资源
      最近更新 更多