Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как изменить стиль input type="date", DSForm

Привет всем. ПОдскажите как можно изменить оформление input type="date" в таком виде. Ни разу просто не встречал.
Ответ: Это форма обратной вязи. Вот создаю input type="text". Присваиваю ему id как в примере. Подключаю все скрипты как в примере. А дата все равно не появляется.
Вопрос: Изменить span на input

Подскажите пожалуйста, есть код в котором по нажатию на span изменяется на input.
PHPHTML
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
 <span id="lblName" class="editable">Mudassar</span><p>Изменить</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    //Loop through all Labels with class 'editable'.
    $(".editable").each(function () {
        //Reference the Label.
        var label = $(this);
 
        //Add a TextBox next to the Label.
        label.after("<input type = 'text' style = 'display:none' />");
 
        //Reference the TextBox.
        var textbox = $(this).next();
 
        //Set the name attribute of the TextBox.
        textbox[0].name = this.id.replace("lbl", "txt");
 
        //Assign the value of Label to TextBox.
        textbox.val(label.html());
 
        //When Label is clicked, hide Label and show TextBox.
        label.click(function () {
            $(this).hide();
            $(this).next().show();
        });
 
        //When focus is lost from TextBox, hide TextBox and show Label.
        textbox.focusout(function () {
            $(this).hide();
            $(this).prev().html($(this).val());
            $(this).prev().show();
        });
    });
});
</script>
Как сделать что бы при нажатии на текст изменить span изменялся на input?
 Комментарий модератора 


4. Порядок создания тем.
4.9 Используйте тэги форматирования текста для удобства восприятия ваших сообщений другими пользователями.

Ответ: gogolik, не совсем вас понял, можете подсказать код?
Вопрос: Input file - скрипт заменяющий стиль, поправка

Добрый день, есть код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="dtpfile">
  <span class="formWD3" style="display: none;">Добавьте фото постановления ГБДД</span>
  <div class="input-group">
    <span class="input-group-btn">
      <span class="btn btn-primary btn-file">Обзор...
        <input type="file" name="f10" multiple>
      </span>
    </span>
    <input type="text" class="form-control" readonly>
  </div>
</div>
 
<div class="dtpfile">
  <span>Добавьте фото авто и повреждений <a>[?]</a></span>
  <div class="input-group">
    <span class="input-group-btn">
      <span class="btn btn-primary btn-file">Обзор...
        <input type="file" name="f12" multiple>
      </span>
    </span>
    <input type="text" class="form-control" readonly>
  </div>
</div>
CSS
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
.dtpfile {
    float: left;
    width: 335px;
    height: 56px;
    margin: 0 16px 20px;
}
 
.dtpfile > span {
    font-size: 14px;
    float: left;
}
 
 
.btn-file, .btn-filew {
  position: relative;
  overflow: hidden;
}
 
.btn-file input[type=file], .btn-filew input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
 
input.form-control {
    float: left;
    padding: 7px 10px;
    width: 213px;
    height: 23px;
    color: #919191;
}
 
.input-group, .input-groups {
    float: left;
    width: 333px;
    height: 37px;
    background: #f2f2f2;
    border: 1px solid #d3d3d3;
}
 
span.input-group-btn {
    float: left;
    width: 100px;
    height: 23px;
    text-align: center;
    padding: 7px 0;
    cursor: pointer;
    background: #0b8dc0;
    color: #fff;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).on('change', '.btn-file :file', function() {
  var input = $(this),
      numFiles = input.get(0).files ? input.get(0).files.length : 1,
      label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
  input.trigger('fileselecpt', [numFiles, label]);
});
 
$(document).ready( function() {
    $('.btn-file :file').on('fileselecpt', function(event, numFiles, label) {
        
        var input = $(this).parents('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' файла(ов)' : label;
        
        if( input.length ) {
            input.val(log);
        } else {
            if( log ) alert(log);
        }
        
    });
});
Все работало хорошо, пока я не вставил второй input=file, проблема в том что если выбираешь файл в первом input заносится он во второй, заменял уже классы, вставлял еще один такой же скрипт с другими класами в скрипте но ничего не меняется, помогите найти ошибку
Ответ: Goga5, спасибо, нашел в чем была проблема, в CSS стиле:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.btn-file input[type=file], .btn-filew input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
А именно:

CSS
1
2
  min-width: 100%;
  min-height: 100%;
заменил на:

CSS
1
2
width: 100px;
height: 37px;
и все стало отлично работать)
получается что сам input=file вылезал на вторую форму и при попытке нажать Обзор на второй форме нажимался инпут в первой)
Вопрос: Сохранение изменённой картинки, input[type=file]

Здравствуйте.
Помогите разобраться с такой задачей :

Есть страница, где пользователю предлагается загрузить картинку, например аватарку.

После клика на input[type=file] пользователь грузит картинку и она сразу обрабатывается плагином для обрезки (в моём случае croppie.js) в отдельном окне, после чего пользователь в этом окне подтверждает конечную обработанную картинку и она показывается в качестве preview в отдельном блоке на странице, и имеет вид data:image/png;base64 .
(Для примера - такая же технология используется на многих сайтах по поиску работы)

Сейчас, после отправки формы отправляется необработанная картинка.

Вопрос в том, как можно (и как лучше) дальше работать с картинкой, чтобы после сабмита формы на сервер отправлялась именно обработанная картинка ?
Ответ: Спасибо.
Вопрос: Получить значение input в javascript

Здравствуйте все!
Пишу сайт на РНР, в одном месте нужно сделать что-то типа маленького калькулятора. Т.к. РНР исполняется на стороне сервера, а Javascript на стороне клиента, то будем пользоваться последним... А я в нем ни бум-бум! Курил несколько дней мануалы - все безрезультатно.

В общем задача такая:
Есть поле <input name="input" id="input" type="text" value="">, есть РНР переменная $ppp.
Пользователь вводит цифры в input, скрипт введенное число умножает на переменную $ppp и выводит результат в нужном месте в блоке <div>. И все это на автомате без нажатия каких-либо кнопок.

Вторым этапом ЯваСкрипт должен выдать РНР скрипту
1. Значение, которое ввел Пользователь в input
2. Значение, которое высчитал ЯваСкрипт (хотя, его может быть и не обязательно, если у меня на руках Инфа из input и исходная переменная $ppp. РНРшкой посчитаю)

Как загнать переменную РНР в Скрипт я нашел. Ничего сложного:
Код Code
1
2
3
4
<? $var = "Hello, world"; ?>
<script>
var a = "<? echo $var ?>";
</script>
не проверял, но думаю работать должно.

Нашел в сети вот такую штуку:
Код Code
1
2
3
4
5
6
7
8
<input type="text"> oninput: <span id="result"></span>
<script>
  var input = document.body.children[0];
 
  input.oninput = function() {
    document.getElementById('result').innerHTML = input.value;
  };
</script>
Проверял. Работает.

Но я никак не могу понять как! из поля input в код взять значение переменных?
Что мы присваиваем переменной input вот этим: document.body.children[0]?
Как это вообще работает???
Повторюсь, курю мануалы уже несколько дней. Ничегошеньки не понимаю, а сделать надо.

Подскажите с какого конца подобраться, в какую сторону смотреть? Может есть хорошие инструкции, которые мне не попались?
Ответ:
Цитата Сообщение от Shakalaka Посмотреть сообщение
Но вообще, лучше select-у присвоить id и вместо document.getElementsByTagName('SELECT')[0] писать document.getElementById('select id');
Ну и понятное дело, вместо чисел 2, 3 вставить значения из php
Благодарю за помощь! Все заработало.
Так как я не являюсь заядлым форумчанином и к форумам обращаюсь только за помощью, то получив ее хочу выразить благодарность всем, кто отвечал на мои вопросы и выкладываю рабочую программу, которая у меня в итоге получилась для тех, кто попадет на эту тему форума с похожим вопросом:
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
            <form method="post" class="buyForm">
                <div class="buy-userpage-top">
                    <select name="wm_select" id="wm_select">
                        <option value="wmz">WMZ
                        <option value ="wmk">WMK
                    </select>
                </div>
                <div class="buy-userpage-tl">
                    <h4>Количество WebMoney</h4>
                    <div class="input">
                        <input name="wm_input" id="wm_input" type="text" value="">
                    </div>
                </div>
                <div class="buy-userpage-tr">
                    <h4>Сумма в тенге</h4>
                    <div class="input">
                        <div class="input_field" id="wm_output"></div>
                    </div>
                </div>
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
<script>                    
document.getElementById ('wm_input').oninput = function (){
    if (document.getElementById('wm_select').value == 'wmz') {
      jwm_buy = <?php echo $wmz_buy; ?>;
    } 
    else {
      jwm_buy = <?php echo $wmk_buy; ?>;
    }
document.getElementById ('wm_output').innerHTML = this.value*jwm_buy
}
</script>   
Значения переменных РНР я вывожу из базы, не вижу смысла их тут выкладывать.
Форма не окончена, поэтому закрывающего тэга у формы нет.
Вопрос: сложение лету данных из input number

Есть нижеуказанный код. Не получается динамически показывать сумму значений input id="number1"+input id="number2". В innerHtml я эти значения вывожу, в переменную по событию onchange значение я тоже получется, а сложить и вывести сумму динамически не могу Спасибо!


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
<div class="main1"><img src="images/voda1.png" alt="Вода 1">
 
<p>Выберите количество</p>
 
<input id="number1" action="application.php" type="number" name="watnumb1" value="0" min="0" max="1200" step="12" onchange="jsum1=+this.value*100;">
 </div>
 
 
 
<div class="main2"><img src="images/voda2.png" alt="Вода 2">
 
<p>Выберите количество</p>
 
 <input id="number2"  name="watnumb2" action="application.php" type="number" value="0" min="0" max="1200" step="12" onchange="jsum2=+this.value*50;"></div>
 
 
 
 </div>
 
   <div class="main3">
   
     <h3>Внимание</h3>
      <p>Оставьте ваши контактные данные</p>
       
        <form id="application" action=" application.php" method="POST" name=" application ">
            <input name="name" id="applicationName" maxlength="20" placeholder="Введите ваше имя" required />
            <input name="email" type="email" id="applicationEmail" maxlength="20" placeholder="Введите ваш E-mail" required/>
            <input name="telephone" type="Tel" id="applicationTelephone" maxlength="20" placeholder="Введите ваш телефон" required />
            
                    <input name="adress" type="Adr" id="applicationAdress" maxlength="20" placeholder="Введите ваш адрес" required />
                    
            <button class="applicationButton" type="submit" form="application"> Заказать </button>
        </form>
            
        
         <div id="summ1"></div>
 
 <script>
 
document.getElementById ('number1').oninput = function()
{document.getElementById ('summ1').innerHTML = this.value*100} 
</script>
 
 
 
             <div id="summ2"></div>
 
 <script>
document.getElementById ('number2').oninput = function ()
{document.getElementById ('summ2').innerHTML = this.value*50}
 
</script>
 
        
    </div>
    
    
    
    
 
        
    </div>
Ответ: Сергей, у Вас в этом месте какой-то бред написан:
HTML5
1
onchange="jsum1=+this.value*100;">
И мелкое замечание, слово "wat" пишется "what".
Вот, посмотрите мой вариант:
HTML5
1
2
3
<div id="summ2"></div>
<input type="number" id="number1" min="0" max="1200" step="12" value="0">
<input type="number" id="number2" min="0" max="1200" step="12" value="0">
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
var dp = document.getElementById('summ2');
var n1 = document.getElementById('number1');
var n2 = document.getElementById('number2');
var v1, v2, Sum, Sump;
document.getElementById('number1').oninput = function(){
v1 = parseInt(this.value);
v2 = parseInt(n2.value);
Sump = v1*100 + v2*50;
Sum =  v1 + v2;
dp.innerHTML = "Сумма равна: "+Sum+"<br>";
dp.innerHTML += "Сумма перемноженная равна: "+Sump+"<br>";
dp.innerHTML += "Первый input: "+v1+"<br>";
dp.innerHTML += "Второй input: "+v2+"<br>";}
//dp.innerHTML = this.value*100;
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
document.getElementById('number2').oninput = function (){
//document.getElementById('summ2').innerHTML = this.value*50;
v1 = parseInt(n1.value);
v2 = parseInt(this.value);
Sump = v1*100 + v2*50;
Sum =  v1 + v2;
dp.innerHTML = "Сумма равна: "+Sum+"<br>";
dp.innerHTML += "Сумма перемноженная равна: "+Sump+"<br>";
dp.innerHTML += "Первый input: "+v1+"<br>";
dp.innerHTML += "Второй input: "+v2+"<br>";}
Вопрос: Предосмотр выбранного изображения в input

Есть вот такой скрипт. (Предосмотр выбранного изображения в инпуте. "Pr" массив собирает инфу введенных данных: размер и координаты). На Пк работает нормально, да и на некоторых телефонах тоже. А вот некоторые телефоны не понимают этого.

Подскажите, мб есть другой скрипт, который понимал бы любой телефон.

п.с. на сколько я понял, они не понимают input.files[0], input.files[0].type.match('image.*') и reader
даже если убрать проверку if(input.files&&input.files[0]&&input.files[0].type.match('image.*')) все равно не пашет
CODE (javascript):

  1.  
  2. function Pres(){
  3.         Pr=[$('#pr1').val(),$('#pr2').val(),$('#pr3').val()];
  4.         input=$('#ch6')[0];
  5.         if(input.files&&input.files[0]&&input.files[0].type.match('image.*')){
  6.                 reader=new FileReader();
  7.                 reader.onload=function(e){
  8.                         $('.cropIm').css({
  9.                                 'background':'url('+e.target.result+')',
  10.                                 'background-position':'-'+Pr[0]+'px -'+Pr[1]+'px',
  11.                                 'height':''+Pr[2]+'px',
  12.                                 'width':''+Pr[2]+'px'
  13.                         })
  14.                 };
  15.                 reader.readAsDataURL(input.files[0]);
  16.         }
  17. }
  18. $('#pr1, #pr2, #pr3, #ch6').change(function(){Pres()});
  19. $('#prew').click(function(){Pres()});
  20.  

(Отредактировано автором: 12 Апреля, 2015 - 17:03:06)

Ответ:
CODE (javascript):

  1. if (!(window.File && window.FileReader && window.FileList && window.Blob)) {alert('The File APIs are not fully supported in this browser.');}

да мой браузер на андроиде выдает этот алерт. Т.е. не пашет у меня это...

Но почему оно работало пару недель назад, до хард резета телефона
печалька короче
Вопрос: Клонируем input checkbox значение name

Всем привет нужна помощь сам сильно не владею javascript в процессе изучения.
Нужно checkbox который по клику сделает clon значения name и сможет передать его в другой input в атрибут value без лишних элементов HTMl и при этом нужно чтоб были классы там чекбоксы будут множественные.

Мне удалось найти подходящий javascript для этой задачи но там есть проблема то что он делает клон и передает его в элемент label, а мне надо чтоб был чистое текстовое значение name.

Пробовал сам передать в input но получалась ерунда у меня туда по подали только элементы HTML


Прошу Вас специалисты javascripta помогите очень надо.

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

<div id="area">
<input type="checkbox" /> <label>1</label>
<input type="checkbox" /> <label>2</label>
<input type="checkbox" /> <label>3</label>
<input type="checkbox" /> <label>4</label>
<input type="checkbox" /> <label>5</label>
<input type="checkbox" /> <label>6</label>
<input type="checkbox" /> <label>7</label>
<input type="checkbox" /> <label>8</label>
<input type="checkbox" /> <label>9</label>
</div>

<div id="clones">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

<script type="text/javascript">
$('#area input:checkbox').each(function (i, g) {
	this.onchange = function () {
		if (this.checked) {
			$('#clones span').eq(i).html($(g).next().clone());
		} else {
			$('#clones span').eq(i).empty();
		}
	}
});
</script>
Ответ: Если честно, надоел уже это JavaScript. Записывал 2 раза в обработчик события onchange функцию, но эффект всегда один и тот же: пока идет запись видно что в строке-переменной onchange записывается функция, как только выходит из записи сразу же там ничего нет(null, если быть точным).
2 способа записи:
1)
$('#area input:checkbox').each(function(i, v){
document.body.innerHTML += "<br>Прошли по "+i+"-му элементу";

	this.onchange = function OnChangeFunction(){
	        document.body.innerHTML += "Изменен "+i+"-ый checkbox";
		if(this.checked){
			$('#clones span')[i].html = $('label')[i].html;
			document.body.innerHTML += "Выделен "+i+"-ый checkbox";
		} 
	}
});

2)
for(prop in mi)
{
//foreach
mi[prop].onchange = function mo()
    {
    document.body.innerHTML += "Изменен "+prop+"-ый checkbox";        
    }
}

Может кто-нибудь скажет почему так происходит, т.е. почему после окончания записи в строке-переменной onchange находится null???
Вопрос: Input и checkbox

Есть три input text и checkbox. В первые два вводятся значения, а третий считается по формуле исходя из первых двух (по умолчанию изменить данные в нем нельзя, readonly). Как сделать, чтобы при нажатии на checkbox, в третьем input можно было изменять значения, а первые два оставались неизменными?

Нашел такой код, он работает, но при попытке внести изменения в третий input, возвращает предыдущее значение


Javascript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
    $(".form-control").keyup(function (var1){
          val1 = +$(".value1").val();            
          val2 = +$(".value2").val();   
          val3 = val1-(val1*val2/100);
          
           $("#block3").val(val3);                     
          
   });
});
Ответ:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
<form action="javascript:void(0);">
  input1: <input type="text" class="inp" name="num1"><br>
  input2: <input type="text" class="inp" name="num2"><br>
  output: <input type="text" class="out" name="result" readonly> 
  <input type="checkbox" id="cbox"> input manually
  <br><br>
  <input type="submit" value="Calc sum" id="btn">
</form>
 
<p id="result"></p>
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
$(document).ready(function() {
    
  $(".inp").keyup(function() { // on input value change
    inputs = $.grep($(".inp"), function(n) {
      return $(n).val();
    }); // grep
    
 
    if (inputs.length == 2) { // if both inputs have values
      var sum = 0;
      $(inputs).each(function() { // calc sum 
        sum += Number($(this).val());
      }); // each
 
      $(".out").val(sum); // and output
    } 
  }); // keyup
 
 
  $('#cbox').change(function() { // change readonly property
    $(".out").prop("readonly", !$(this)[0].checked);;
  }) // change
 
 
  $("#btn").click(function() { // on button click
    $("#result").text(function() { // set result
        return inputs[0].value + " + " + inputs[1].value + " = " + $(".out").val();
    })
  }) // click
 
}) // ready
Вопрос: при клике изменить значение следующего input

Добрый день!
Алерт сообщает, что значение сменилось в соседнем элементе, а на странице как был 0 в поле, так и остается. Помогите пожалуйста
<table>
<tr>
 <td class="item_count"><input type="button" value="+" class="plus" />
 <input type="text" id="item1" value="0"/>
 <input type="button" value="-" class="minus" />
</td>
 </tr>
 <tr>
 <td class="item_count"><input type="button" value="+" class="plus" />
 <input type="text" id="item1" value="0"/>
 <input type="button" value="-" class="minus" />
 </td>
 </tr>
 </table>

(function () {
    var inputs = document.querySelectorAll("input.plus");  /*взяли все инпуты с классом plus*/
    var handler = function() {
        var index = this.getAttribute('data-index');    /*записали в переменную индекс элемента массива*/
        alert(index);
       /* var next_elem = inputs[index].nextSibling;*/
        inputs[index].nextSibling.value = 1;
        alert( inputs[index].nextSibling.value);
    }
    for (var i = 0; i < inputs.length; i++) {        /*каждому элементу массива повешали обработчик*/
        inputs[i].setAttribute('data-index', i);     
        inputs[i].onclick = handler;
    }
  }());
  (function () {
    var inputs = document.querySelectorAll("input.minus");
    var handler = function() {
        var index = this.getAttribute('data-index');
        alert(index);
    }
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].setAttribute('data-index', i);
        inputs[i].onclick = handler;
    }
  }());
Ответ: И вообще нафига козе баян, есть же type="number" min="1" max="100500" step="1" и щелкай.

Цитата:
var inputs = document.querySelectorAll("input.plus");
Это хтмл, а хтмл - это дерево. Хавать общим чохом елементы по классам можно только когда есть такая специальная задача, в остальных случаях надо пользоваться деревом, то есть родительскими элементами, дочерними и прочими родственниками. Если скажем разворачивается листинг на 100500 тумбочек и на каждой по 5 кнопок - на все кнопки что ли вешать листенера? Вешаешь на контейнер ровно один и в путь.