Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как изменить стиль 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

У меня есть 3 input'а, которые я многократно умножаю:
HTML5
1
2
3
4
5
<div id="div">
<input type="number" data-id="id0" name="value[]" placeholder="Введите 't'">
<input type="number" data-id="id0" name="value[]" placeholder="Введите 'C'">
<input type="number" data-id="id0" name="value[]" placeholder="Введите 'Q'">
</div>
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
var count = 1;
        var count2 = 1;
        var count3 = 1;
        button.addEventListener("click", function(){
        var input = document.createElement('INPUT');
        input.type = 'number';
        input.setAttribute("data-id", "id" + count);
//      input2.setAttribute("style", "margin-right: '5px'");
        input.name = "value[]";
        input.placeholder = "Введите 't'";
        document.querySelector('#div').appendChild(input);
        count++;
        var input2 = document.createElement('INPUT');
        input2.type = 'number';
        input2.setAttribute("data-id", "id" + count2);
//      input2.setAttribute("style", "margin-right: '5px'");
        input2.name = "value[]";
        input2.placeholder = "Введите 'C'";
        document.querySelector('#div').appendChild(input2);
        count2++;
        var input3 = document.createElement('INPUT');
        input3.type = 'number';
        input3.setAttribute("data-id", "id" + count3);
//      input3.setAttribute("style", "margin-right='5px'");
        input3.name = "value[]";
        input3.placeholder = "Введите 'Q'";
        document.querySelector('#div').appendChild(input3);
        count3++;
по нажатию на:
HTML5
1
<input type="button" id="button" value="Добавить">
а затем хочу добавлять их в массив js, по нажатию на:
HTML5
1
<input style="margin: 2px; display: none;" id ="addToList" type="submit" title="Создать" value="Добавить к сравнению" >
Как мне создать из данных input'ов таблицу html? При этом нужна проверка: если поля заполнены - ок, создаем <table>, если нет - подсвечиваем незаполненные input'ы и ничего не создаём.
Если кто-то хочет показать более кошерный способ по созданию полей - буду рад.

Добавлено через 8 часов 13 минут
Коллеги, может ли кто-нибудь подсказать по поводу создания таблицы из input'ов?
Ответ: Актуально

Добавлено через 2 минуты
Проверку на input'ы я сделал, осталось создать из них всех таблицу.
Вопрос: Предосмотр выбранного изображения в 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 type="radio" к label

input type="radio" находятся поразень от label'ов, как это показанно на картинке. Не знаю как это исправить. Помогите пожалуйста.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="Map_for_buy">
  <input type="radio" name="map" checked="checked" id="Ufa">
  <input type="radio" name="map" id="Str">
  <input type="radio" name="map" id="Salavat">
  <input type="radio" name="map" id="Tui">
  <input type="radio" name="map" id="Kum">
  <div class="city">
      <label for="Ufa">Ufa</label>
      <label for="Str">Sterlitamak</label>
      <label for="Salavat">Salavat</label>
      <label for="Tui">Tuimazi</label>
      <label for="Kum">Kumertau</label>
  </div>
  <div class="auto"></div>    
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#Map_for_buy {
  position: relative;
  width: 400px;
  height: 500px;
  background-image: url("http://xn--i1abbnckbmcl9fb.xn--p1ai/%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8/505794/img1.gif");
  background-size: 100% 100%;
}
.city {
  position: absolute;
  top: 10px;
  left: 10px;
}
input[name="city"] {
  position: absolute;
}
#Ufa {
  top: 100px;
  left: 30px;
}
Ответ:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul class="city-list">
    <li>
    <input type="radio" name="map" checked="checked" id="Ufa">
    <label for="Ufa">Ufa</label>
    </li>
    <li>
    <input type="radio" name="map" id="Str">
    <label for="Str">Sterlitamak</label>
    </li>
    <li>
    <input type="radio" name="map" id="Salavat">
    <label for="Salavat">Salavat</label>
    </li>
    <li>
    <input type="radio" name="map" id="Tui">
    <label for="Tui">Tuimazi</label>
    </li>
    <li>
        <input type="radio" name="map" id="Kum">
    <label for="Kum">Kumertau</label>
   </li>
</ul>
CSS
1
2
3
4
li {
    list-style: none;
    display: inline-block;
}
Здесь наглядно видно:
Вопрос: Клонируем 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???