Получить текстовое поле с текстовыми полями по щелчку переключателя

Question

Получить текстовое поле с текстовыми полями по щелчку переключателя

0

Я кодирую страницу с некоторыми переключателями и застрял с некоторыми проблемами. Вот мой текущий вывод

Ниже мой код

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
        #sitehtn {
            display: none
        }

        .container {
            width: 100%;
            height: 600px;
            background-color: rgb(179, 174, 174);
        }
        #datepickerT {
            margin-left: 2em;
        }
        .eventDateDiv {
            height: 150px;
            width: 30%;
            margin-left: auto;
            margin-right: auto;
        }
        #daysBetween {
            margin-top: -1.4em;
            margin-left: 30%;
        }
        .eventShowDiv {
            height: 250px;
            width: 30%;
            margin-left: auto;
            margin-right: auto;
        }
        .event {
            color: green;
            margin-top: 5px;
        }
    </style>
    <script>
        $(function() {
            $( "#datepickerF" ).datepicker({
                      showOn : "button",
                 buttonImage : "calendar.gif",
             buttonImageOnly : true
            });

            $( "#datepickerT" ).datepicker({
                      showOn : "button",
                 buttonImage : "calendar.gif",
             buttonImageOnly : true
            });

            $('#getdays').click(function() {
                var start = $('#datepickerF').datepicker('getDate');
                var end   = $('#datepickerT').datepicker('getDate');
                var days   = (end - start)/1000/60/60/24;
                document.getElementById("daysBetween").innerText=days;
            });

            $('input[type=radio]').change(function() {
                $('#sitehtn').hide()
                $(this).parent().next().show()
            });

            function displayResult(browser) {
                document.getElementById("result").value=browser
            }
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="eventDateDiv">
            <div class="event">
                EVENT DATE
            </div>
            <p>FROM: <input type="text" id="datepickerF" /></p>
            <p>To: <input type="text" id="datepickerT" /></p>
            <button id="getdays">NO.OF DAYS </button>
            <p id="daysBetween"> </p>
        </div> 
        <div class="eventShowDiv">
            <div class="event">
                EVENT SHOW TIME
            </div>
            <p>TYPE OF SHOW: </p>
            <label>
                <input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
                Unique
            </label>
            <input type="text" name="site" id="sitehtn" />
            <br />
            <label>
                <input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
                Varied
            </label>
            <input type="text" name="textfield3" id="sitehtn" />
        </div> 
    </div> 
</body>
</html>

Мой фактический ожидаемый результат.

Когда я нажимаю на Unique radioButton, появится текстовое поле и автоматически. Следующая кнопка радио (Varied) скроет
Текстовое поле включает в себя... Четыре текстовых поля Внутри него... два поля Для выбора FROM и TO Date и Content Placeholder и Last a Button Чтобы добавить те же 4 поля к следующей строке в том же текстовом поле

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

Manu 09 нояб. 2013, в 08:12

Источник

0

Сделай скрипку ..
Hiral 09 нояб. 2013, в 07:10
0

где часть HTML?
Sunil Kumar 09 нояб. 2013, в 07:17
0

@SunilKumar: извините, теперь я редактирую свой код .. проверьте его
Manu 09 нояб. 2013, в 07:24
0

Для # 2 Вы имеете в виду, что textbox рядом с unique переключателем должно иметь значения ОТ
Praveen 09 нояб. 2013, в 07:31
0

id должен быть уникальным, <input type="text" name="site" id="sitehtn" /> и <input type="text" name="textfield3" id="sitehtn" /> имеют одинаковый идентификатор, Вы можете изменить идентификатор или использовать класс вместо этого. С классом $('.sitehtn').hide(); работает.
Alex Ball 09 нояб. 2013, в 07:58
0

@AlexBall: Спасибо, я исправляю это ... но как я могу скрыть следующую кнопку-переключатель, когда я выбираю первую
Manu 09 нояб. 2013, в 08:06
0

@ user2503857 если вы хотите скрыть вторую радио-кнопку, когда вы проверяете первую, вы можете попробовать это (используя класс): $('input[type=radio]').change(function(e) { if(e.target.id == 'courtierRadio') $('#agenceRadio').parent().hide(); $('.sitehtn').hide(); $(this).parent().next().show(); }); , Это пример, но может быть и лучше.
Alex Ball 09 нояб. 2013, в 13:02

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

radio-button

2 ответа

Ещё вопросы

@SunilKumar: извините, теперь я редактирую свой код .. проверьте его
Для # 2 Вы имеете в виду, что textbox рядом с unique переключателем должно иметь значения ОТ
id должен быть уникальным, <input type="text" name="site" id="sitehtn" /> и <input type="text" name="textfield3" id="sitehtn" /> имеют одинаковый идентификатор, Вы можете изменить идентификатор или использовать класс вместо этого. С классом $('.sitehtn').hide(); работает.
@AlexBall: Спасибо, я исправляю это ... но как я могу скрыть следующую кнопку-переключатель, когда я выбираю первую
@ user2503857 если вы хотите скрыть вторую радио-кнопку, когда вы проверяете первую, вы можете попробовать это (используя класс): $('input[type=radio]').change(function(e) { if(e.target.id == 'courtierRadio') $('#agenceRadio').parent().hide(); $('.sitehtn').hide(); $(this).parent().next().show(); }); , Это пример, но может быть и лучше.

user2975123 · Answer 1 · 2013-11-09T20-48-00.000Z

Это может работать с установщиком даты. Однако вы должны добавить держателя контента и текстовое поле.

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <style>
            #sitehtn {
                display: none
            }

            .container {
                width: 100%;
                height: 600px;
                background-color: rgb(179, 174, 174);
            }
            #datepickerT {
                margin-left: 2em;
            }
            .eventDateDiv {
                height: 150px;
                width: 400px;
                margin-left: 0;
                margin-right: auto;
            }
            #daysBetween {
                margin-top: -1.4em;
                margin-left: 30%;
            }
            .eventShowDiv {
                height: 250px;
                width: 30%;
                margin-left: auto;
                margin-right: auto;
            }
            .event {
                color: green;
                margin-top: 5px;
            }
        </style>
        <script>
        function loading() {
                $( ".datepickerF" ).datepicker({
                          showOn : "button",
                     buttonImage : "calendar.gif",
                 buttonImageOnly : true
                });

                $( ".datepickerT" ).datepicker({
                          showOn : "button",
                     buttonImage : "calendar.gif",
                 buttonImageOnly : true
                });

                $('.getdays').click(function() {
                    var start = $(this).prev().prev().find('input').datepicker('getDate');
                    var end   = $(this).prev().find('input').datepicker('getDate');
                    var days   = (end - start)/1000/60/60/24;
                    $(this).next().text(days);
                });

                $('input[id=courtierRadio]').change(function() {
                    $('#hideRadio').html("");
                    $('#hideRadio').append(getAppleInfo());
                });
                function displayResult(browser) {
                    document.getElementById("result").value=browser
                }
            };
            window.onload = loading;

        // anti-pattern! keep reading...
        function getAppleInfo() {
            var eventDateDiv ="";
            eventDateDiv = $("<div></div>").addClass("eventDateDiv");
            eventDateDiv.append($("<p></p>").text("FROM: ").append($("<input>").attr("class", "datepickerF").attr("type", "text")));
            eventDateDiv.append($("<p></p>").text("TO: ").append($("<input>").attr("class", "datepickerT").attr("type", "text")));
            eventDateDiv.append($("<button></button>").text("NO.OF DAYS ").attr("class", "getdays"));
            eventDateDiv.append($("<p></p>").attr("class", "daysBetween"));
            eventDateDiv.append($("<a>").text("Add Another").attr("href", "#").attr("onclick", "belowDiv(this)"));
            return eventDateDiv;

        }
        function belowDiv(self){
            $('#hideRadio').append(getAppleInfo());
            loading();
        }
        </script>
    </head>
    <body>
        <div class="container">
            <div class="eventDateDiv" title="numb">
                <div class="event">
                    EVENT DATE
                </div>
                <p>FROM: <input type="text" class="datepickerF" /></p>
                <p>To: <input type="text" class="datepickerT" /></p>
                <button class="getdays">NO.OF DAYS </button>
                <p class="daysBetween"> </p>
            </div> 
            <div class="eventShowDiv" title="dumb">
                <div class="event">
                    EVENT SHOW TIME
                </div>
                <p>TYPE OF SHOW: </p>
                <label>
                    <input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
                    Unique
                </label>
                <input type="text" name="site"  />
                <br />
                <div id="hideRadio">
                <label>
                    <input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
                    Varied
                </label>
                <input type="text" name="textfield3" />
                </div>
            </div> 
        </div> 
    </body>
    </html>

Praveen · Answer 2 · 2013-11-09T07-00-00.000Z

0

Для вашего вопроса №1 попробуйте это.

$('#courtierRadio').on('change', function () {
   $('#sitehtn').show();
   $('#agenceRadio').hide();
});

Praveen 09 нояб. 2013, в 07:00

0

спасибо за ваш код, он работает, но у меня есть еще одно замечание, что изменится в приведенном ниже коде, который я делаю, чтобы отобразить все мои текстовые поля рядом с моим первым переключателем, теперь он показывает только одно текстовое поле ... если я добавлю больше, он не отображается
Manu 09 нояб. 2013, в 09:30
0

$ ('input [type = radio]'). change (function () {$ ('# sitehtn'). hide () $ (this) .parent (). next (). show ()}); // это ма код
Manu 09 нояб. 2013, в 09:30