從文本字段切換為選擇時，javascript停止工作

Question

我正在嘗試使用javascript，但是我是一個紅寶石家伙，真的很喜歡javascript。 我有一個字段表單（文本字段和提交按鈕），其中javascript僅允許在字段中有文本的情況下提交表單。 但是，我將字段類型從文本字段切換為選擇字段。 現在，該表單無法提交。 我幾乎可以確定問題出在我的JavaScript上。 這是我有一個帶有文本字段的單詞的代碼。 如何使它與select一起使用？

形成：

<form id="new_skill" class="new_skill" method="post" action="/skills" >
    <li>
        <input id="resume-field" class="field field288" type="text"
          value="Type a speciality you want to add to your profile" 
          title="Type a speciality you want to add to your profile" 
          name="skill[label]"></input>
    </li>
    <li>
        <input class="button button-add button-add-disabled" 
         type="submit" value="ADD +" name="commit"></input>
    </li>
</form>

使用Javascript：

(function($){
    $(document).on('focusin', '#resume-field', function() {
        $(this).parents().find('.button-add-disabled').removeClass('button-add-disabled');
    }).on('focusout', '#resume-field', function(){
        if(this.value==' '||this.title==this.value) {
            $(this).parents().find('.button-add').addClass('button-add-disabled');
        } else {
            $(this).parents().find('.button-add').removeClass('button-add-disabled');
        }

    });     

    $('.button-add-disabled').click(function(){
        return !$(this).hasClass('button-add-disabled');
    });
}(jQuery));

CSS：

.button-add { width: 49px; height: 28px; border: solid 1px #8c8c8c; display: block; 
   font-size: 11px; line-height: 28px ; color: #fff; text-align: center; 
   font-family: 'Ubuntu', sans-serif; transition: none; margin: 0 0 0 auto; 
   border-radius: 3px; }
.button-add:hover { text-decoration: none;
   -webkit-transition:none; 
      -moz-transition:none; 
       -ms-transition:none; 
        -o-transition:none; 
           transition:none; 
}
.button-add-disabled { background: url(/assets/add-specialities-disabled.png) 
   repeat-x 0 0; box-shadow: 0 0 0 0; margin-left:35px;  }
.button-add-disabled:hover { background: url(/assets/add-specialities-disabled.png) 
   repeat-x 0 0; box-shadow: 0 0 0 0;  }

帶有下拉菜單的HTML：

<select id="resume-field" name="skill[label]">
    <option value="1" title="option_1"></option>
    <option value="2" title="option 2" selected="selected"></option>
</select>

Answer 1

我做了一個最小的示例（ jsfiddle ），按照我認為的要求進行了操作，但沒有使用您的代碼。 如果它可以滿足您的要求，則可以對其進行調整。

HTML

<form>
    <select id="selectme">
        <option value="">-- Please select one --</option>
        <option value="1">1</option>
        <option value="2">Two</option>
        <option value="3">III</option>
    </select> 
    <input type="submit" value="submit" id="clickme">
</form>

JS

$(function(){
    $("#clickme").prop("disabled", true);
    $("#selectme").change(function(){
        if ($("#selectme").val() != "") {
            $("#clickme").removeAttr("disabled");
        } else {
            $("#clickme").prop("disabled", true);
        }
    });
})

CSS

#clickme {
    background-color: #f00;
}

#clickme:disabled {
    background-color: #eee;
}

Answer 2

您表示已將輸入字段類型從文本切換為選擇。 因此，您需要添加這種html：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 

Answer 3

首先，您的HTML稍微有些偏離：

<form id="new_skill" class="new_skill" method="post" action="/skills" >
    <!-- needs a parent UL element -->
    <li>
        <input id="resume-field" class="field field288" type="text"
          value="Type a speciality you want to add to your profile" 
          title="Type a speciality you want to add to your profile" 
          name="skill[label]"></input>
          <!-- as a side not, input tags can be self-close (<input type="text" />)
    </li>
    <li>
        <input class="button button-add button-add-disabled" 
         type="submit" value="ADD +" name="commit"></input>
    </li>
</form>

如果將輸入更改為select元素，則需要option元素，每個元素都可以具有“ value”屬性，如下所示：

<select>
    <option value="something">Something</option>
</select>

在您要執行的操作中，如果您希望用戶在其中鍵入內容，我不確定select元素是否會滿足您的需求。您可以在select元素中預先填充option元素，每個元素對應於特定的“他們想添加到個人資料中的專業”。

Answer 4

更新和簡化：

假設您確實將<input>元素更改為<select><option></select>元素，則您的代碼僅需進行少量更改即可正常工作。

jsFiddle演示

實際上，您只需要跟蹤更改事件：

HTML：

<form id="new_skill" class="new_skill" method="post" action="/skills" >
    <li>
        Select a specialty to add to your profile:<br>
        <select id="resume-field" name="skill[label]">
            <option value="default">Select a speciality:</option>
            <option value="cod3r">Programming</option>
            <option value="pizza">Pizza consumption</option>
        </select>
    </li>
    <li>
        <input class="button button-add button-add-disabled" 
         type="submit" value="ADD +" name="commit"></input>
    </li>
</form>

使用Javascript / jQuery的：

$(document).on('change', '#resume-field', function() {
    if(this.value=='default') {
        $(this).parents().find('.button-add').addClass('button-add-disabled');
    } else {
        $(this).parents().find('.button-add').removeClass('button-add-disabled');
    }

});     

PS：當然，要使jsFiddle工作，我還必須從您的CSS中臨時刪除url()等。