javascript从文本字段切换到选择时停止工作 [英] javascript stops working when switching from text field to select

问题描述

我想做javascript，但我是一个红宝石的家伙，真的很吸引javascript。我有一个字段形式（文本字段和提交按钮），其中JavaScript只允许提交表单，如果在字段中有文本。但是，我将字段类型从文本字段切换为选择。现在，表单不能提交。我几乎肯定的问题是与我的javascript。这里是我有一个文本字段的代码。如何使其与选择工作？

表单：

 < form id =new_skillclass =new_skillmethod =postaction =/ skills> 
< li> 
< input id =resume-fieldclass =field field288type =text
 value =输入要添加到您的个人资料的专业
 title =输入您要添加到个人资料中的专业
 name =skill [label]>< / input> 
< / li> 
< li> 
< input class =button button-add button-add-disabled
 type =submitvalue =ADD +name =commit>< / input> 
< / li> 
< / form> 
  

Javascript：

 code>（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：

 code> .button-add {width：49px; height：28px; border：solid 1px＃8c8c8c;显示：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-fieldname =skill [label]> 
< option value =1title =option_1>< / option> 
< option value =2title =option 2selected =selected>< / option> 
< / select> 
  

解决方案

http://jsfiddle.net/andrelaszlo/2NCXs/2/rel =nofollow> jsfiddle ），做我想你问的，但不使用你的代码。

$ p> < form>
< select id =selectme>
< option value => - 请选择一个 - < / option>
< option value =1> 1< / option>
< option value =2>两个< / option>
< option value =3> III< / option>
< / select>
< input type =submitvalue =submitid =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; 
} 
  
 
I'm trying to do javascript, but I'm a ruby guy and really suck with javascript.  I have a one field form (text field and submit button) in which javascript only allows the form to be submitted if there is text in the field.  However, I switched the field type from a text field to a select.  Now, the form can't submit.  I am almost certain the problem is with my javascript.  Here is the code I have that word with a text field.  How do I get it to work with the select?

Form:
<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 for form with drop down:
<select id="resume-field" name="skill[label]">
    <option value="1" title="option_1"></option>
    <option value="2" title="option 2" selected="selected"></option>
</select>

解决方案
I made a minimal example (jsfiddle), doing what I think you asked for, but not using your code. You can probably adapt it if it does what you want.

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


                        
这篇关于javascript从文本字段切换到选择时停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！