2014-11-25 2 views
1

У меня есть три элемента, которые я пытаюсь получить на странице. Первые два не проблема. Третий зависит от того, что выбрано во втором выборе, если требуется более подробная информация. Третий вариант скрывает или показывает на основе второго. Так что проблем нет. Код здесь: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 не является объектом. Я скрываю или показываю div на основе выбора «источника».

Пожалуйста, обратите внимание, что я был в состоянии получить эту работу на функцию Submit формы, как этот

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 других предметов на этой странице, которые будут работать очень похоже на это.

Заранее спасибо. (Первый раз отправлять что-либо, так что дайте мне знать, если я забыл что-то, что должно быть здесь)

ответ

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 + "' ]"); 
     } 
    }; 
}