Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: ЧекБокс по button, но не работает другой скрипт

Добрый день!
Есть чекбокс, который становится активным при нажатии по button (и работает при нажатии просто по чекбоксу). Как только чекбокс активный, то отображается нужный текст (это при нажатии на сам чекбокс). Но при нажатии на button, чекбокс активным становится, а текст не появляется.

Вот сам код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Карта</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />

</head>

<body>
<input type="checkbox" id="che" onclick="changeButtonState()" value="123">
<div id="Summ"></div>

<input onclick="shlep()" type="button" id="link" />

<script>
function changeButtonState(){

var SummDok = document.getElementById('Summ'),

SummSumm=document.querySelectorAll(":checked").length ? '22': '777';
SummDok.innerHTML = SummSumm
};

function shlep(a,b){
che.checked = che.checked ? false : true;

};
</script>


</body>
</html>
Ответ: qwe88,

<!DOCTYPE HTML>
<html>
<head>
<title>Карта</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>

<body>
<label> <input type="checkbox" id="che" value="123" onclick="shlep(this)">Переключить</label>
<div id="Summ"></div>
<input onclick="shlep(this)" type="button" id="link" value="Run">

<script>
function gid(idx) {return document.getElementById(idx);}
function shlep(el){
  var che = gid('che'), SummDok = gid('Summ');

  if (el.type.toUpperCase() == 'BUTTON') {che.checked = !che.checked;}

  if (che.checked) {
    SummDok.innerHTML = 'vit';
  } else {
    SummDok.innerHTML = "ovs"
  }
}
</script>
</body>
</html>
Вопрос: Вывести кнопки button в отдельный div

Помогите пожалуйста, есть кнопки button от 0 до 9, при нажатии на любую из них, значение кнопки должно переходить в div, если нажимать подряд разные button, то в div сумма постоянно должна суммироваться

вот html

<body>

<form>
<button type="button">0</button>
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
<button type="button">7</button>
<button type="button">8</button>
<button type="button">9</button>
</form>

<div></div>

<script src="js/script.js" type="text/javascript"></script>
</body>
Ответ: спасибо, буду разбирать!
Вопрос: Передача значения в БД из <button>

Всем привет. Прошу помощи в таком вопросе, т.к goggle не всех спасает...
Не могу понять как можно обработать значение кнопки. Т.е при выборе одной из трех кнопок, данные должны записываться в разные таблицы.
Есть такая форма.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<form method="POST" action="/new">
<button type="button" name="name_1">Название_1</button>
<button type="button" name="name_2">Название_2</button>
<button type="button" name="name_3">Название_3</button>
<select name="name_4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="name_5">
<button type="submit" value="save" name="submit">Сохранить</button>
</form>
Я думал, что можно все решить при помощи php, но мне говорят, что тут что то из js нужно.
Ответ: D0RmId0nT,
1. Не type="button" , а type="submit" для отправки;
2. PHP здесь отлично справится:
PHP
1
2
3
4
5
6
7
8
9
if(isset($_POST['name_1'])) {
    echo "один\n";
} else if(isset($_POST['name_2'])) {
    echo "два\n";
} else if(isset($_POST['name_3'])) {
    echo "три\n";
} else if(isset($_POST['submit'])) {
    echo "четыре: name_4 = {$_POST['name_4']}; name_5 = {$_POST['name_5']}\n";
}
Вопрос: событие click() по элементу <button

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="margin-left: 40px;" type="button" value="1"><span class="ui-button-text">Cancel</span></button>

document.getElementsByClassName("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only")[2].click();
получаю undefined...

Подскажите как быть...
Ответ: да вот самое и веселое что там null

Добавлено через 3 минуты
а, все, допер, я на сохраненной копии страницы пробовал делать, там почему-то слетали события... хотя вроде весь код сохранял... теперь мой изначальный код
document.getElementsByClassName("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only")[2].click();
заработал...

Спасибо всем, за то что приняли участие!!!
Вопрос: Не работает location.href при onclick в теге <button>

function goGoogle(){
    location.href='http://www.google.ru'
}


<input type="button"  value="Button1" onclick="goGoogle()">
- переходит на гугль
<button onclick="goGoogle()"> Button1</button>
- никакой реакции
alert\console.log отрабатывает и там и там нормально
Ответ: хм, действительно так, но если посм на вот такой код:
<!DOCTYPE html>
<html>
<head>
    <title>goGoogle</title>
</head>
<body onload="console.log(new Date());">
    <form>
        <button>goGoogle tag-button</button>
    </form>

</body>
</html>

то можно усмотреть, что страница передергивается при нажатии на кнопку.
п.с. запускать у себя, здесь не хотит

поэтому надо прописывать так: <button type="button">goGoogle tag-button</button>, видимо по дефаулту идет submit
Вопрос: Добавить переменную из button в text

Добрый день! Ни как не могу понять как добавить переменную из button в input type text.
Прошу подсказать что делаю не так????
Вот так работает:
HTML5
1
2
3
4
5
6
<div id="div">
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3">
<p name="p"></p>
</div>
Javascript
1
2
3
4
5
div.querySelectorAll('input[type="button"]').forEach(function(item){
  item.addEventListener('click', function(){
    div.querySelector('p[name="p"]').innerHTML += this.value;
  })
})
Если все меняю на текстовое поле ничего не работает:
HTML5
1
2
3
4
5
6
<div id="div">
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3">
<input type="text" name="textlabel">
</div>
Javascript
1
2
3
4
5
div.querySelectorAll('input[type="button"]').forEach(function(item){
  item.addEventListener('click', function(){
    div.querySelector('input[name="textlabel"]').innerHTML += this.value;
  })
})
Ответ:
Сообщение от HoseMose
Javascript
1
div.querySelector('input[name="textlabel"]').innerHTML += this.value;
Потому что у input нет свойства innerHTML. Используйте value.
Javascript
1
2
3
4
5
div.querySelectorAll('input[type="button"]').forEach(function (item) {
    item.addEventListener('click', function () {
        div.querySelector('input[name="textlabel"]').value += this.value;
    });
});
Вопрос: Paper button disabled

пытаюсь написать стиль для дисебленной кнопки, но ничего не работает
HTML5
1
<paper-button raised class="slg-paper-button" disabled>{{title}}</paper-button>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
.slg-paper-button:disabled{
    font-family:Roboto-Medium;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
 
    border-radius: 2px;
    width: 200px;
    height: 35px;
 
    background: rgba(131,190,241);
}
установил paper button командой, bower install --save PolymerElements/paper-icon-button . Не отображается мой стиль, выдает стандартный. что не так? как я только не пробовал.
Ответ: c disabled кнопкой разобрался, там надо было добавить !important. А вот с цвета и функции paper button почему-то не работают.
Вопрос: Вывод модального окна при нажатии на button

Добрый день. Есть модальное окно, в котором расположена форма. При заполнении формы и нажатии на кнопку "отправить" страница перегружается, а нужно вывести "спасибо за обращение". Делал разными способами, но в любом случае, всплывающее окно "спасибо за обращение" активно только в модальном окне формы, т.е. если еще раз нажать на форму, в сплывающем окне видем еще одно всплывающее. А на стартовой странице не выводиться.

Скажите, как это исправить? Я так понимаю, должно быть типа "если на class-button нажать, в index.php показать class2"

Форма кнопки
<button type="button" class="button-submit" onclick="check_required13(&quot;submit&quot;, &quot;13&quot;">Отправить</button>
Ответ:
Цитата:
Добрый день. Есть модальное окно, в котором расположена форма. При заполнении формы и нажатии на кнопку "отправить" страница перегружается, а нужно вывести "спасибо за обращение".
AJAX используй.
Вопрос: после нажатия на button, через 2-3 секунды блок должен перезагружаться

Здравствуйте уважаемые форумчане и специалисты программирования. Помогите решить задачку по Ajax - перезагрузка

Есть страница
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>PAGE</title>
   </head>
   <body>
 
<div id="name" class="name">
  content
  content
  content
</div>
 
<div class="name2">
    <form action="this-page" method="post" class="name3">
        <input type="" name="" value="">
        <button type="submit" class="name4">CLICK</button>
    </form>
</div>
 
   </body>
</html>
С отправкой данных из формы и их последующим отображением проблем нет - перезагрузка требуется не для этого.


Решить нужно вот что:
после нажатия на button, через 2-3 секунды блок с id="name" (всё, что находится внутри его) должен перезагружаться

Кто что знает, помогите PLEASE
Ответ: kalabuni,
Сообщение от kalabuni
перезагрузка reload по-аглицки)
я в курсе, с английским знаком, а когда не в курсе - google translate my helper!

Сообщение от kalabuni
это замена кода, отображаемого в окне (во вкладке) или вофрейме( в ифрейме) на новый код из того же источника
вы хотите перезагрузить содержимое отдельного контейнера -- нет проблем, только укажите источник, откуда надо брать код для замены текущего кода
это всё логически понятно, если "ты" конечно не 5 летний ребенок

Сообщение от kalabuni
нет проблем, только укажите источник
Нет проблем →→ это когда знаешь как сделать! Любой кто умеет водить, скажет тебе, а что тут сложного - включил передачу, нажал на педаль и поехал, но для человека, который по-настоящему ни разу этого не делал, всё не так прозрачно.
Вы - kalabuni, наверно недочитали:
Сообщение от ADON
Было наверно проще, если бы в javascript я разбирался, но это не так
поэтому ваша фраза: "только укажите источник, откуда надо брать" - это просто теория, которую на практике реализовать для меня сложно.

Тем не менее, вы наверно опять не дочитали - задача решена:
Сообщение от ADON
задача решена!
Я взял код который предложил nekosoku,
Код
<script>
button.onclick = function() {
    setTimeout(function() { 
        document.getElementById("name").innerHTML = "новое<br>содержимое<br>элемента";
    }, parseInt(Math.random()*(3000-2000)+2000))
};
</script>
немного его подкорректировал для своей задачи, onclick с вызовом функции вставил между тегами <button> и </button>

всё работает как мне нужно, nekosoku спасибо - направление задал верное
Вопрос: Теги <button> и <input> не работают на телефонах

Добрый день.
Подскажите пожалуйста, почему теги <button> и <input> не активны на мобильных телефонах. Не кликабельны или не работают (нет переходят по ссылке)? На ПК все норм работает.
Ответ: нашел два файла, которые мешали всему делу. убрал их (теперь не работает галерея - точнее ее меню + немного перекосило связанные товары - сейчас их убрал): вот для ознакомления эти файлы, может кто найдет косяк)))
первый думаю не причем... а вот второй второй, но думаю дело во втором больше:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
spnoConflict(function($){
    $('.sp-totop').on('click', function() {
        $('html, body').animate({
            scrollTop: $("body").offset().top
        }, 500);
    });  
    //tooltip
    $('.hasTip').tooltip({
        html: true
    });
});
 
/* FC - Related Products */
var isIE8 = jQuery.browser.msie && + jQuery.browser.version === 8;
if (isIE8 ) {
    function sliderInit6() {                                
        jQuery('#vina_caroufredsel').carouFredSel({
            auto: false,
            circular: false,
            infinite: false,
            prev: '#prev_FredSel',
            next: '#next_FredSel',
            mousewheel: false,
            height: null,
            swipe: {
                onMouse: false,
                onTouch: false
            },                 
            responsive: true,
            width: '100%',
            scroll: 1,
            items: {
                width: 350,
                height: null,   //  optionally resize item-height
                visible: {
                    min: 1,
                    max: 3
                }
            }
        });
    }
} else {
    function sliderInit6() {                                
        jQuery('#vina_caroufredsel').carouFredSel({
            auto :true , 
            circular: true,
            infinite: false,
            prev: '#prev_FredSel',
            next: '#next_FredSel',
            mousewheel: false,
            swipe: {
                onMouse: true,
                onTouch: true
            },                 
            responsive: true,
            width: '100%',
            height: null,
            scroll: 1,
            items: {
                width: 350,
                height: null,   //  optionally resize item-height
                visible: {
                    min: 1,
                    max: 3
                }
            }
        }); 
    }
}
jQuery(document).ready(function($){
 
    var galleryBlock = $("ul.gallery");
    
    /* Off-Canvas Menu Block */
    $sidebaroffcanvas = $(".sidebar-offcanvas");
    $sidebaroffcanvas.height($(window).height());
    
    galleryBlock.parents('.row-fluid').addClass('visiable-gallery');
    
    $sidebaroffcanvas = $(".sidebar-offcanvas");
    $sidebaroffcanvas.height($(window).height());
    
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        $('body').swipe({
            swipeLeft: function(event, phase, direction, distance) {
                $('.row-offcanvas').removeClass('active');
            },
            swipeRight: function(event, phase, direction, distance) {
                $('.row-offcanvas').addClass('active');
            }
        });
    }
    
    $('#product-details-tab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    })
    
    $('[data-toggle=offcanvas]').click(function () {
        $('.row-offcanvas').toggleClass('active');
    }); 
    
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(1);
        }
    });
    
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 1) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(1);
        }
    });
    
    /*Page My Projects*/
    $("#my_projects .projects a").on("click", function(e){
      e.preventDefault();
      var projects=$(this).parents(".projects"),
          projects_height = projects.height(),
          details= projects.find(".details"), 
          details_height=details.height(),
          new_height=details_height+40; 
          
          vina_projects = projects.parents(".vina_projects"),       
          vina_projects.toggleClass("active").siblings().find(".projects").removeClass("current");;
        
        projects.toggleClass("current").animate({
        paddingBottom: new_height,
        marginBottom: '20'
      }, { duration: 200, queue: false }).siblings().removeClass("current");
      $("#my_projects .projects:not(.current)").animate({
        paddingBottom: '0',
        marginBottom: '0'
      }, { duration: 200, queue: false }).find(".details").slideUp(200);
      $(".current").find(".details").slideDown(200);
    
    }); 
    
    $(".vina-carousel-jshopping").each( function() {
        $jshopmargin_Left   = parseInt($(this).find(".item").css('margin-left'),10);
        $jshopmargin_Right   = parseInt($(this).find(".item").css('margin-right'),10);
        $mod_featured = $(this).parents(".module").width();
        $(this).css({
            "width"  :  $mod_featured + $jshopmargin_Left + $jshopmargin_Right,
            "margin-left": -$jshopmargin_Left,
        });
        if($(this).parents("body.rtl").length){
            $(this).css({
                "margin-right": -$jshopmargin_Right,
                "margin-left": 0,
            });
        }
        $(this).parents(".module").css('overflow','visible');
    });
    $(".list_carousel").each( function() {
        $jshopcarousel_pright  = parseInt($(this).find(".product").css('margin-right'),10);
        $jshopcarousel_Left     = parseInt($(this).find(".product").css('margin-left'),10);
   
        $mod_featured = $(this).parents(".list_related").width();
        $(this).css({
            "width"  : $mod_featured +  30,
            "margin-left": -15,
        });
        if($(this).parents("body.rtl").length){
            $(this).css({
                "margin-right": -15,
                "margin-left": 0,
            });
        }
        $(this).parents(".jshop_list_product").css('overflow','visible');
 
    });
    
    /* Related Products */
    sliderInit6();
    
    $(window).resize(function(){    
        $(this).load();
    });
});