将数据从3个选择传递到一个输入

时间：2015-08-27 12:51:38

标签： javascript jquery css forms

我有三个选择字段（日，月，年）。我需要将它们的值自动传递给一个（在隐藏的）输入字段（它将被转移到数据库。我写的jquery代码是下面的。

不幸的是 - 它似乎错了/有错误。我怎样才能更好地编写它以避免这些错误？目前没有传递数据。完整的代码在这里：

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <p>Pick one of two:</p>
    <div class="cc-selector">
        <input id="visa" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa"></label>
        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
    <hr />
    <div>
        <select id="dd_value">
            <option>- Day -</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
        </select>
        <select id="mm_value">
            <option>- Month -</option>
            <option value="0">Unknown</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">Nobember</option>
            <option value="12">December</option>
        </select>     
         <select id="yy_value">
            <option>- Year -</option>
            <option value="2008">2008</option>
            <option value="2007">2007</option>
            <option value="2006">2006</option>
            <option value="2005">2005</option>
            <option value="2004">2004</option>
            <option value="2003">2003</option>
            <option value="2002">2002</option>
            <option value="2001">2001</option>
            <option value="2000">2000</option>
            <option value="1999">1999</option>
            <option value="1998">1998</option>
            <option value="1997">1997</option>
            <option value="1996">1996</option>
            <option value="1995">1995</option>
            <option value="1994">1994</option>
            <option value="1993">1993</option>
            <option value="1992">1992</option>
            <option value="1991">1991</option>
            <option value="1990">1990</option>
            <option value="1989">1989</option>
            <option value="1988">1988</option>
            <option value="1987">1987</option>
            <option value="1986">1986</option>
            <option value="1985">1985</option>
            <option value="1984">1984</option>
            <option value="1983">1983</option>
            <option value="1982">1982</option>
            <option value="1981">1981</option>
            <option value="1980">1980</option>
            <option value="1979">1979</option>
            <option value="1978">1978</option>
            <option value="1977">1977</option>
            <option value="1976">1976</option>
            <option value="1975">1975</option>
            <option value="1974">1974</option>
            <option value="1973">1973</option>
            <option value="1972">1972</option>
            <option value="1971">1971</option>
            <option value="1970">1970</option>
            <option value="1969">1969</option>
            <option value="1968">1968</option>
            <option value="1967">1967</option>
            <option value="1966">1966</option>
            <option value="1965">1965</option>
            <option value="1964">1964</option>
            <option value="1963">1963</option>
            <option value="1962">1962</option>
            <option value="1961">1961</option>
            <option value="1960">1960</option>
            <option value="1959">1959</option>
            <option value="1958">1958</option>
            <option value="1957">1957</option>
            <option value="1956">1956</option>
            <option value="1955">1955</option>
            <option value="1954">1954</option>
            <option value="1953">1953</option>
            <option value="1952">1952</option>
            <option value="1951">1951</option>
            <option value="1950">1950</option>
            <option value="1949">1949</option>
            <option value="1948">1948</option>
            <option value="1947">1947</option>
            <option value="1946">1946</option>
            <option value="1945">1945</option>
            <option value="1944">1944</option>
            <option value="1943">1943</option>
            <option value="1942">1942</option>
            <option value="1941">1941</option>
            <option value="1940">1940</option>
            <option value="1939">1939</option>
            <option value="1938">1938</option>
            <option value="1937">1937</option>
            <option value="1936">1936</option>
            <option value="1935">1935</option>
            <option value="1934">1934</option>
            <option value="1933">1933</option>
            <option value="1932">1932</option>
            <option value="1931">1931</option>
            <option value="1930">1930</option>
            <option value="1929">1929</option>
            <option value="1928">1928</option>
            <option value="1927">1927</option>
            <option value="1926">1926</option>
            <option value="1925">1925</option>
            <option value="1924">1924</option>
            <option value="1923">1923</option>
            <option value="1922">1922</option>
            <option value="1921">1921</option>
            <option value="1920">1920</option>
            <option value="1919">1919</option>
            <option value="1918">1918</option>
            <option value="1917">1917</option>
            <option value="1916">1916</option>
            <option value="1915">1915</option>
            <option value="1914">1914</option>
            <option value="1913">1913</option>
            <option value="1912">1912</option>
            <option value="1911">1911</option>
            <option value="1910">1910</option>
            <option value="1909">1909</option>
            <option value="1908">1908</option>
            <option value="1907">1907</option>
            <option value="1906">1906</option>
            <option value="1905">1905</option>
            <option value="1904">1904</option>
            <option value="1903">1903</option>
            <option value="1902">1902</option>
            <option value="1901">1901</option>
            <option value="1900">1900</option>
        </select>   
        <br />
        <input name="bdaysummary" id="bdayummary" type="text" />
    </div>
</form>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<sec:authorize access="hasAnyAuthority('ROLE_ADMIN', 'ROLE_USER')" var="isAuthenticated"/>


    ${isAuthenticated}

                        <c:choose>
                            <c:when test="${isAuthenticated}">
                             **do smth**
                            </c:when>
                            <c:otherwise>
                             **do smth**
                            </c:otherwise>
                        </c:choose>

6 个答案:

答案 0 :(得分：4)

<script>
$(document).ready(function(){
    $('#dd_value, #mm_value, #yy_value').change(function(){
        dd_value = $('#dd_value').val();
        mm_value = $('#mm_value').val();
        yy_value = $('#yy_value').val();
        result = dd_value+'-'+mm_value+'-'+yy_value;
        $('#bdayummary').val(result);
    });
})
</script>

<强>建议：
使用零填充格式表示天数和月数（例如01而不是1）以防止出现不需要的行为。

<强>注意： 正如休伯特所说，你必须考虑解决第一个没有效价值的选择。此代码仅关注从选择输入中收集数据并将其放入另一个输入中。

答案 1 :(得分：1)

你的问题在于

(dd_value+mm_value+yy_value).onchange  = function() {...}

＆＃34; +＆＃34;元素上的运算符将元素强制转换为字符串并将它们连接起来。所以基本上你要分配＆＃34; onchange＆＃34;属性为字符串，而不是元素。逐个分配它们或像这样使用jQuery：

$([dd_value, mm_value, yy_value]).change(function() {...})

答案 2 :(得分：1)

你走了。查看内联评论以获取详细说明。

<强> http://some/file/url

首先，我想为您的每个选择说class添加一个.bd，然后将更改事件写入class 

$('.bd').on('change',function(){
    var allSelect=true; //for validation purpose
    $.each($('.bd'),function(){
        var value=$(this).find('option:selected').text();//store the current value
        if(value=='- Day -' || value=='- Month -' || value=='- Year -')
        //if value selected is any of these value then set allSelect=false
            allSelect=false
    });
    if(allSelect) //Proceed only if its true
    {
        var date=$('#dd_value option:selected').text(); //get date
        var month=$("#mm_value option:selected").text(); //get month
        var year=$("#yy_value option:selected").text(); //get year
        var newDate=date +"-"+month+"-"+year; //combine it
        $("#bdayummary").val(newDate); //display in textbox
    }
});
  

注意：您可以按任意顺序选择日期，但仍会进行验证

<强>更新

根据 DEMO 的评论，我正在更新此答案和DEMO。现在这是val()并指定相同的内容。

<强> Hubert 

$('.bd').on('change',function(){
    var allSelect=true;
    $.each($('.bd'),function(){
        var value=$(this).find('option:selected').val();
        if(value=='- Day -' || value=='- Month -' || value=='0' || value=='- Year -')
        {
           allSelect=false;
           return false; //to break loop if any found
        }
    });
    if(allSelect)
    {
        var date=$('#dd_value option:selected').val();
        var month=$("#mm_value option:selected").val();
        var year=$("#yy_value option:selected").val();
        if(month<10)
            month="0"+month;
        var newDate=date +"-"+month+"-"+year;
        $("#bdayummary").val(newDate);
    }
});

答案 3 :(得分：0)

尝试类似的东西（jQuery）：

$(dd_value, mm_value, yy_value).on('change', function(){
   ....
});

答案 4 :(得分：0)

<?php

    if($productCount == 0)
    {
        echo "<div class='row'>";               }
    }
        $productCount++;

    if($productCount==4)
    {
        echo "</div>" ;
        $productCount = 0;
    }

?>

尝试此代码这将适用于您应该包括jquery为此

的修改 

$("#yy_value,#dd_value,#mm_value").change(function() {
var dd_value = $("#dd_value").val();
var mm_value = $("#mm_value").val();
var yy_value = $("#yy_value").val();
alert(dd_value+"-"+mm_value+"-"+yy_value); 
});

要

if(dd_value != '- Day -' && mm_value !='- Month -' && yy_value != '- Year -') { alert(dd_value+"-"+mm_value+"-"+yy_value); }

由于alert(dd_value+"-"+mm_value+"-"+yy_value);功能，仅当所有字段都更改为
时才会对此进行评估 change所以这将解决此问题

答案 5 :(得分：0)

这基本上是穆罕默德通过一些价值检查和零填充扩展的答案：

$(document).ready(function(){
    $('#dd_value, #mm_value, #yy_value').change(function(){
        var dd_value = $('#dd_value').val();
        var mm_value = $('#mm_value').val();
        var yy_value = $('#yy_value').val();
        var result = "";
        // check that the values are not undefined (missing value)
        if ($.inArray("undefined", [ typeof dd_value, typeof mm_value, typeof yy_value ]) < 0)
        {
            // add padding zero
            dd_value = dd_value.length === 1 ? "0"+dd_value : dd_value;
            mm_value = mm_value.length === 1 ? "0"+mm_value : mm_value;
            var result = dd_value+'-'+mm_value+'-'+yy_value;
        }
        $('#bdayummary').val(result);
    });
})
相关问题
最新问题