當從文本字段切換到選擇時javascript停止工作

Question

我正在嘗試JavaScript，但我是一個紅寶石的傢伙，真的很吸食javascript。我有一個字段形式（文本字段和提交按鈕），其中JavaScript只允許在字段中有文本時提交表單。但是，我將字段類型從文本字段切換到了select。現在，表單無法提交。我幾乎可以肯定的問題是我的JavaScript。這是我用文本字段包含該詞的代碼。我如何使它與選擇一起工作？

形式：

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

[jQuery的點擊功能不會被調用]的

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="something">Something</option> 
</select> 

在您正在嘗試做的事情中，我不確定選擇元素是否符合您的需求，如果您想讓用戶在...中輸入內容...您可以預先填寫選擇元素與選項元素，每個元素對應於特定的「他們想要添加到他們的配置文件中的專業」。

Answer 4

更新和簡化的：

假設你沒有改變<input>元素<select><option></select>元素，你的代碼將正常工作，只有輕微的變化。

jsFiddle Demo

真的，你只需要跟蹤變化事件：

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()等...