另一个输入的jQuery动态输入值

时间:2014-11-25 20:07:35

标签: javascript jquery

我有三个项目,我试图在页面上。前两个不是问题。如果需要更多细节,第三个取决于第二个选择选项中选择的内容。第三个选项隐藏或显示基于秒。那没问题。代码在这里:

// Create a Javascript class to handle the form.
function InquiryCardForm() {
    var objSelf = this;

    // Get a jQuery reference to the form.
    this.Form = $( "#inqueryCard-form" );

    // Get jQuery references to the key fields in our contact
    // form. This way, we don't have to keep looking them up.
    // This will make it faster.
    this.DOMReferences = {
        // Form elements
        ID: this.Form.find( "input[ name = 'id' ]" ),
        SourceCode: this.Form.find( "input[ name = 'sourceCode' ]" ),
        SourceValue: this.Form.find( "select[ name = 'source' ]" ),
        SourceText: this.Form.find( "input[ name = 'other"
            +this.Form.find( "input[ name = 'sourceCode' ]" ).val()
            +this.Form.find( "select[ name = 'source' ]").val() +"' ]" )
    };

所以我有HTML:

<form action="" method="post" name="inqueryCard" id="inqueryCard-form">
...
    <tr>
        <td>
            <input type="hidden" name="sourceCode" value="SRCE">
            <select id="source" name="source">
                <option value="" selected>*** Select ***</option>
                <option value="1" data-more="N">Web Search</option>
                <option value="2" data-more="N">Word Of Mouth</option>
                <option value="3" data-more="O">Other</option>
                <option value="4" data-more="R">Other</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <div id="otherDIV_SRCE1">
                <p> <input type="text" name="otherSRCE1" value="" /></p>
            </div>
            <div id="otherDIV_SRCE2">
                <p> <input type="text" name="otherSRCE2" value="" /></p>
            </div>
            <div id="otherDIV_SRCE3">
                <p>Please Specify <input type="text" name="otherSRCE3" value="" /></p>
            </div>
            <div id="otherDIV_SRCE4">
                <p>Must Share <input type="text" name="otherSRCE4" value="" /></p>
            </div>
        </td>
    </tr>

这里的问题是SourceText对象不是对象。我根据&#34; source&#34;。

的选择隐藏或显示div

请注意,我能够像这样

使用提交表单功能
var code = objSelf.DOMReferences.SourceCode.val();
var value = objSelf.DOMReferences.SourceValue.val();
var SourceText = objSelf.Form.find( "input[ name = 'other" + code + value + "' ]" );

但是我想在this.DOMReferences中这样做。由于我在这个页面上有大约21个其他项目将与此非常相似。

提前谢谢你。 (第一次发布任何内容,如果我忘记了应该在这里的内容,请告诉我)

1 个答案:

答案 0 :(得分:0)

请更新您的功能:

function InquiryCardForm() 
{
    var objSelf = this;

    this.Form = $( "#inqueryCard-form" );

    var select = this.Form.find( "select[ name = 'source' ]" );

    this.DOMReferences = 
    {
        // Form elements
        ID: this.Form.find( "input[ name = 'id' ]" ),
        SourceCode: this.Form.find( "input[ name = 'sourceCode' ]" ),
        SourceValue: select ,
        SourceText: function()
        {
            var index = select.find(":selected").val();
            return this.Form.find( "input[ name = 'other" + SourceCode.val() + index + "' ]" );
        }
    };
}
相关问题