Форум

broadcast77 · #1 (**permalink**) 03.03.2014, 10:26

Добрый день! Есть следующая проблема. Вот маленькая html-форма

<form action="" id="demoForm" method="post">
            <div id='TextBoxesGroup'>    
                <div id="TextBoxDiv1">
                    <div id="message">mes</div>
                        <input type="text" id="textbox">
                </div>    
            </div>    
        </form>
        <input type='button' value='Add Button' id='addButton'>
        <input type='button' value='Get TextBox Value' id='getButtonValue'>

Вот код jQuery & AJAX. Первая функция отвечает за то, чтобы при нажатии на кнопку addButton - добавлялся новый элемент в форме ввода, а вторая функция - должна брать значение введённое в окошко textbox, отправлять его на сервер (post.php) и возвращать в div id=message.

$(document).ready(function(){
 
    var counter = 2;
 
    $("#addButton").click(function () {
 
	if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
	}   
 
	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", 'TextBoxDiv' + counter);

                newTextBoxDiv.after().html('<div id="message'+counter+'">mes'+counter+'</div><input type=text id="textbox'+counter+'">');

	newTextBoxDiv.appendTo("#TextBoxesGroup");
 
	counter++;
        
     });	
     
     $('#getButtonValue').click(function() {
		$.ajax({
			type : 'POST',
			url : 'post.php',
			dataType : 'json',
			data: {email : $('#textbox').val()},
			success : function(data){
				$('#message').text(data.msg).show();
				$('#demoForm').show();
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
			}
		});
		return false;
	});
 });

Проблема в том, что функция добавления элементов форм работает, а функция отправки и получения данных - работает только для первого элемента. Как сделать так, чтобы вторая функция динамически подцепляла новые html-элементы?

Спасибо!

ksa · #2 (**permalink**) 03.03.2014, 11:03

Сообщение от broadcast77

Как сделать так, чтобы вторая функция динамически подцепляла новые html-элементы?

Переделать вот эту строчку

Сообщение от broadcast77

data: {email : $('#textbox').val()},

Есть например такой метод
http://jquery-docs.ru/ajax/serialize/

broadcast77 · #3 (**permalink**) 03.03.2014, 11:11

ха, это понятно)

а вопрос - как?)

я пробовал и так и сяк и counter туда вставлял - толку ноль)
Может быть через find как нить?

ksa · #4 (**permalink**) 03.03.2014, 11:15

Сообщение от broadcast77

я пробовал и так и сяк

Где полный тестовый пример?

Сообщение от broadcast77

Может быть через find как нить?

Чем не устраивает метод по моей ссылке?

broadcast77 · #5 (**permalink**) 03.03.2014, 11:22

Ради бога. Пробовал например так. Обратите внимание на изменённые id с индексами.

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/appendSelectItems.js"></script>
        <script type="text/javascript" src="js/loadCountriesJson.js"></script>
        <script type="text/javascript" src="js/loadServices.js"></script>
    </head>
    <body>
        <form action="" id="demoForm" method="post">
            <div id='TextBoxesGroup'>    
                <div id="TextBoxDiv1">
                    <div id="message">mes</div>
                        <input type="text" id="textbox">
                </div>    
            </div>    
        </form>
        <input type='button' value='Add Button' id='addButton'>
        <input type='button' value='Get TextBox Value' id='getButtonValue'>
    </body>
</html>

$(document).ready(function(){
 
    var counter = 2;
 
    $("#addButton").click(function () {
 
	if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
	}   
 
	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", 'TextBoxDiv' + counter);

                newTextBoxDiv.after().html('<div id="message'+counter+'">mes'+counter+'</div><input type=text id="textbox'+counter+'">');

	newTextBoxDiv.appendTo("#TextBoxesGroup");
 
	counter++;
        
     });	
     
     $('#getButtonValue').click(function() {
		$.ajax({
			type : 'POST',
			url : 'post.php',
			dataType : 'json',
			data: {email : $('#textbox'+counter).val()},
			success : function(data){
				$('#message'+counter).text(data.msg).show();
				$('#demoForm').show();
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
			}
		});
		return false;
	});
  });

не работает.

Пробовал вот так ещё:

$('#getButtonValue').click(function() {
		$.ajax({
			type : 'POST',
			url : 'post.php',
			dataType : 'json',
			data: {email : $( "input" ).find( "textbox" ).val()},
			success : function(data){
				$('#message'+counter).text(data.msg).show();
				$('#demoForm').show();
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
			}
		});
		return false;
	});

Работает но криво - не берёт значение из окошка. Вообщем, очень нужна помощь =(

ksa · #6 (**permalink**) 03.03.2014, 11:26

Сообщение от broadcast77

Пробовал например так.

data: {email : $('#textbox'+counter).val()},

Ну это конечно полная ерунда...

Сообщение от broadcast77

Пробовал вот так ещё

data: {email : $( "input" ).find( "textbox" ).val()},

И это ни чем не лучше...

Мне например так и не понятно, какой именно объект ты таки хочешь предать на сервер?
Пока у тебя только одно свойство email... Ты все значения инпутов хочешь запихнуть в него? Тогда в каком виде?

ksa · #7 (**permalink**) 03.03.2014, 11:34

broadcast77, если все пихать в одно свойство объекта, то как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<input type="text" id="textbox" value='0' />
<input type="text" id="textbox1" value='1' />
<input type="text" id="textbox2" value='2' />
<script type='text/javascript'>
var a=[];
var val;
$('[id^="textbox"]').each(function (i){
	a[i]=this.value;
});
val=a.join('||');
alert(val);
</script>
</body>
</html>

ksa · #8 (**permalink**) 03.03.2014, 11:39

broadcast77, либо расширяй свойства объекта...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<input type="text" id="textbox" value='0' />
<input type="text" id="textbox1" value='1' />
<input type="text" id="textbox2" value='2' />
<script type='text/javascript'>
var o={};
$('[id^="textbox"]').each(function (i){
	o['email'+i]=this.value;
});
alert(o);
console.log(o);
</script>
</body>
</html>

broadcast77 · #9 (**permalink**) 03.03.2014, 11:49

Сообщение от ksa

Ну это конечно полная ерунда...

И это ни чем не лучше...

Мне например так и не понятно, какой именно объект ты таки хочешь предать на сервер?
Пока у тебя только одно свойство email... Ты все значения инпутов хочешь запихнуть в него? Тогда в каком виде?

Короче, есть окошко - сюда вводим значение. Отсюда оно отправится на сервер.

<input type="text" id="textbox">

есть элемент - сюда мы выводим полученное от сервера значение.

<div id="message">mes</div>

есть кнопка - ей мы отправляем значение, которое потом будет получено в div

<input type="button" value="Get TextBox Value" id="getButtonValue">

всё. это форма.

а теперь самое интересное - есть кнопка, которая будет добавлять все вышеперечисленные элементы (до 10 штук).

<input type='button' value='Add Button' id='addButton'>

т.е. у нас вначале форма выглядела так:

<form action="" id="demoForm" method="post">
            <div id="TextBoxesGroup">    
                <div id="TextBoxDiv1">
                    <div id="message">mes</div>
                        <input type="text" id="textbox">  <input type="button" value="Get TextBox Value" id="getButtonValue1">
                </div>    
            </div>    
        </form>

а далее, мы нащёлкали кнопкой ещё (4 штуки например )элементов и форма стала такой:

<form action="" id="demoForm" method="post">
            <div id="TextBoxesGroup">    
                <div id="TextBoxDiv1">
                    <div id="message">mes</div>
                        <input type="text" id="textbox">  <input type="button" value="Get TextBox Value" id="getButtonValue1">
                </div>    
            <div id="TextBoxDiv2">
                    <div id="message2">mes2</div>
                        <input type="text" id="textbox2"> <input type="button" value="Get TextBox Value" id="getButtonValue2">
           </div>
           <div id="TextBoxDiv3">
                   <div id="message3">mes3</div>
                        <input type="text" id="textbox3"> <input type="button" value="Get TextBox Value" id="getButtonValue3">
          </div>
           <div id="TextBoxDiv4">
                   <div id="message4">mes4</div>
                        <input type="text" id="textbox4"> <input type="button" value="Get TextBox Value" id="getButtonValue4">
          </div>
          </div>    
        </form>

Вот у меня и вопрос - как заставить работать ajax для новоиспечённых html-элементов.

ksa · #10 (**permalink**) 03.03.2014, 11:56

Сообщение от broadcast77

есть окошко - сюда вводим значение. Отсюда оно отправится на сервер.

<input type="text" id="textbox">

есть элемент - сюда мы выводим полученное от сервера значение.

<div id="message">mes</div>

Т.е. ты заменяешь инпуты на некий текст с сервера?

Сообщение от broadcast77

есть кнопка - ей мы отправляем значение, которое потом будет получено в div

<input type="button" value="Get TextBox Value" id="getButtonValue">

Т.е. каждое значение отсылается своей кнопкой?

Тогда просто передавай "счетчик" в функцию отправки запроса и там его используй.

Форум

Справочник

Discord чат

Курсы javascript