Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Добавить по OnClick <input.........
 
 автор: dima2207   (22.01.2008 в 21:58)   письмо автору
 
 

Привет всем !
Подскажите как реализовать что-бы при нажатии на одну кнопку добавлялось(+1) поле для ввода данных :<input name="name" type="text" size="100" value="<?print $per1;?>">
а при нажатии на другую удалялось (-1) поле .
может подскажите готовые варианты решения ?

   
 
 автор: dima2207   (23.01.2008 в 11:35)   письмо автору
 
   для: dima2207   (22.01.2008 в 21:58)
 

Мне удалось реализовать эту проблемму с помощью аякса :

<html> 
<head> 
<title>My TEST AJAX</title> 
<script type="text/javascript"> 
var httpRequest = createHttpRequest(); 
var resultId = ''; 
function createHttpRequest() 

    var httpRequest; 
    var browser = navigator.appName; 

    if (browser == "Microsoft Internet Explorer") 
    { 
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    else 
    { 
        httpRequest = new XMLHttpRequest(); 
    } 

    return httpRequest; 


function sendRequest(file, _resultId, getRequestProc) 

    resultId = _resultId; 
    document.getElementById(resultId).innerHTML = 'Подождите, идет загрузка...'; 

    var txt = document.getElementById("txt").value; 

    httpRequest.open('post', file + '?asd=' + txt); 
    httpRequest.onreadystatechange = getRequestProc; 

httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=windows-1251"); 

    httpRequest.send(txt); 


function getRequest() 

    if (httpRequest.readyState == 4) 
    { 
        document.getElementById(resultId).innerHTML = httpRequest.responseText; 
    } 


</script> 
</head> 
<body> 
<input type="submit" id="txt" OnClick="sendRequest('test.php','result',getRequest);"> 
<p id="result">Здесь будет результат запроса</p> 
</body> 
</html> 

и код test.php:


<?php
$a
=$_COOKIE['ssylki'];
for(
$i=0;$i<$a;$i++){
print 
"<input name='ssyl[]' type='text' size='90' value=''><br>";
}
$a++;
setcookie('ssylki',$a);
?>

но это не-то (Слишком мудрено).
я знаю что все тоже самое можно реализовать с помощью ява скрипт(без аякса).
как это реализовать?

   
 
 автор: Волки   (23.01.2008 в 11:59)   письмо автору
 
   для: dima2207   (23.01.2008 в 11:35)
 

Безусловно аякс это мощь.
получится что-то вроде того:
1) добавить строку таблицы
2.1) в добавленую строку вписать тэг input с нужным id
2.2) удалить строку таблицы


<form>
<table id='ins'><tr><td>элементы формы по умолчанию <input text> <img ...> </td>
<input 'button+' onClick='table_id_ins(1)'> - добавление поля
<input 'button-' onClick='table_id_ins(0)'> - удаление поля
<input submit>
</form>


<script>
var row_index=0; /* индекс для добавления\удаления строк в таблицу, использовать для генерации уникально id для вновь добавленых полей */

function table_id_ins(operation)
{
if operation==1)
{
/*взять таблицу по id, добавить строку, вписать в ячейку таблицы строку "<input ...>" с нужным id */
}
else
{
/* (проверка на возможность удаления), (удаление строки таблицы по номеру) */
}
}


когда-то делать что-т похожее: http://www.md.binargi.biz/resL.htm

   
 
 автор: dima2207   (23.01.2008 в 12:48)   письмо автору
 
   для: Волки   (23.01.2008 в 11:59)
 

Вообщем-то понятно , но что писать тут ?


/*взять таблицу по id, добавить строку, вписать в ячейку таблицы строку "<input ...>" с нужным id */ 

else 

/* (проверка на возможность удаления), (удаление строки таблицы по номеру) */ 




   
 
 автор: Crux   (23.01.2008 в 11:50)   письмо автору
 
   для: dima2207   (22.01.2008 в 21:58)
 


var newInput = document.createElement('input');
newInput.name = 'name';
...
...
node.appendChild(newInput); // где node - это ссылка на узел куда надо добавить новое поле

   
 
 автор: dima2207   (23.01.2008 в 11:58)   письмо автору
 
   для: Crux   (23.01.2008 в 11:50)
 

Вы уж простите , но я ничего не понял . Я в ява скрипт новичек.
Нужно что-бы при каждом нажатии кнопки добавлялось (+1) поле .

   
 
 автор: CNT   (23.01.2008 в 13:11)   письмо автору
 
   для: dima2207   (23.01.2008 в 11:58)
 

<html>
<head>
<script>
var Num = 0;
function fAdd ()
{
var tagBR1 = document.createElement ('br')
var tagBR2 = tagBR1.cloneNode (0);
var IE = (navigator.userAgent.indexOf ('MSIE') > 0);
var str = (IE) ? ('<input name="txt' + ++Num + '">') : 'input';
var tagINPUT = document.createElement (str);
if (!IE) tagINPUT.name = 'txt' + ++Num;
tagBR1.id = 'br1_' + Num; tagBR2.id = 'br2_' + Num;
with (document.getElementById ('field'))
   {
   appendChild (tagBR1); appendChild (tagBR2);
   appendChild (tagINPUT);
   }
document.getElementById ('removeBtn').disabled = (Num) ? 0 : 1;
}

function fRemove ()
{
with (document.getElementById ('field'))
   {
   removeChild (document.getElementsByName ('txt' + Num) [0]);
   removeChild (document.getElementById ('br1_' + Num));
   removeChild (document.getElementById ('br2_' + Num--));
   }
document.getElementById ('removeBtn').disabled = (Num) ? 0 : 1;
}
</script>
</head>
<body>
<form>
<div id="field" style="float: left; width: 50%">
<input name="txt0">
</div>

<div style="float: right; width: 50%">
<input type="button" value="Add" onclick="fAdd ()">
<input id="removeBtn" type="button" value="Remove" onclick="fRemove ()" disabled>
</div>
</form>
</body>
</html>

   
 
 автор: dima2207   (23.01.2008 в 13:46)   письмо автору
 
   для: CNT   (23.01.2008 в 13:11)
 

почему-то в опере несрабатывает задание размера :

var str = (IE) ? ('<input size="90" name="txt' + ++Num + '">') : 'input';

а в фаере вообще неработает .

   
 
 автор: CNT   (23.01.2008 в 14:05)   письмо автору
 
   для: dima2207   (23.01.2008 в 13:46)
 

Не... чем больше я нахожусь на этом форуме, тем больше и офигеваю.
Вот, например, я НЕ ЗНАЮ японского языка.
Именно потому что я его не знаю - и это ОСОЗНАЮ - я и не лезу переводить с японского.

А вот люди, кои абсолютно ни хрена не знают ни HTML, ни Javascript, почему-то толпами (стадами) лезут творить сайты.
Да и не просто сайты, а со всякими заморочками.
Что за поветрие такое?
Или же всякий недоумок полагает, что HTML+CSS+Javascript - это совсем просто?

Почти по-русски же написано: ЕСЛИ браузер ЭКСПЛОРЕР, то тогда создавать элемент со строкой '<input... чё-то там>'. А в ином случае (если не ЭКСПЛОРЕР, а любой прочий браузер), то создавать просто элемент 'input'

А этот (отцензурено) "втюхивает" свой SIZE="90" в строку, коя именно (и только) для ЭКСПЛОРЕРА предназначена (и другими браузерами невидима) и удивлённо вопрошает - "а почему в Опере и FF не работает?"

Да потому что масла в голове ни хера нет, а лезешь.

Не знаешь японского - говори на рязанском.

   
 
 автор: dima2207   (23.01.2008 в 14:21)   письмо автору
 
   для: CNT   (23.01.2008 в 14:05)
 

Послушайте , уважаемый ! только грубить ненадо ! Потому-что вы тоже не родились с этими знаниями !
P.s: Спасибо за очень важную информацию (по поводу недоумков......)

   
 
 автор: CNT   (23.01.2008 в 14:33)   письмо автору
 
   для: dima2207   (23.01.2008 в 14:21)
 

Я разве грублю?
Я просто... "офигеваю", как и написал выше.

Эксплорер обладает особенностью - атрибут NAME (и только этот атрибут) для вновь создаваемых элементов следует добавлять непосредственно в строке в createElement. Для других браузеров в createElement допустимо ТОЛЬКО наименование тега (безо всяких < и >) и любой атрибут следует добавлять как свойство.

Всякие разные SIZE, MAXLENGTH'ы и прочее следует добавлять (для всех баузеров, включая Эксплорер) после строки if (!IE) tagINPUT.name = 'txt' + ++Num; в виде:
tagINPUT.size = 90;
tagINPUT.maxlength = 10;
tagINPUT.style.backgroundColor = 'red';...

Ферштейн?


PS. Знание двух-трех слов по-японски знатоком японского вас не сделает, правда?
А вот кем вы себя, интересно, ощущаете, когда узнаёте две-три особенности Javascript'а, кои "втюхаете" на своём сайте? :-)

   
 
 автор: dima2207   (23.01.2008 в 15:03)   письмо автору
 
   для: CNT   (23.01.2008 в 14:33)
 

Ок , ясно ! Проехали !
Как мне быть если нужно на странице два независимых инпута организовать ? Какие переменные нужно поменять что-бы скрипты несоприкасались ?

   
 
 автор: CNT   (24.01.2008 в 11:48)   письмо автору
 
   для: dima2207   (23.01.2008 в 15:03)
 

Не совсем понял...

1. Вам надо, чтобы одним нажатием на кнопку "Add" добавлялось два инпута и эти же два инпута удалялись одним нажатием кнорки "Remove"?

2. Или же хочется, чтобы на странице было две пары кнопок "Add"|"Remove" и чтобы каждая пара управляла своей группой инпутов?

И в том, и в другом случае принцип будет тот же.
Да и скрипт - практически тот же.

   
 
 автор: Antohins   (07.04.2008 в 17:41)   письмо автору
 
   для: dima2207   (22.01.2008 в 21:58)
 

Качаем jquery с [url]www.jquery.com[/url]
Инклудим
Пишем:
var s = $('#ididid');
$('<option></option>')
.attr('value', 'blablabla')
.attr('onclick',alert('HELLLLLLO')) 
.html('JA_OPTOIN')                
.appendTo(s);


В итоге к селекту с id=ididid добавиться оптион:
<option value="blablabla" onclick="alert('HELLLLLLLO')">JA_OPTION</option>


все коротко и ясно

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования