[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Из формы в яваскрипт
Форум PHP программистов > JavaScript
YanBess
13.10.2009 - 16:26
Добрый день.
Вот начал изучать азы ajax jquery, но до этого с яваскриптом ниразу не работал.
Возник такой вопрос: как из обычного текстового поля передать значение переменной в яваскрипт и сделать там переменую со значением этого поля?
Притом без перезагрузки и чтобы переменная передавалась по ходу ввода текста в поле.
Спасибо.



Спустя 4 минуты, 24 секунды (13.10.2009 - 15:30) Oyeme написал(а):
HTML
<script type="text/javascript">

function notEmpty(){
var myTextField = document.getElementById('myText');
if(myTextField.value != "")
alert("You entered: " + myTextField.value)
else
alert("Would you please enter some text?")
}
</script>

<input type='text' id='myText' />
<input type='button' onclick='notEmpty()' value='Form Checker' />



Спустя 6 минут, 8 секунд (13.10.2009 - 15:36) YanBess написал(а):
Цитата (Oyeme @ 13.10.2009 - 12:30)
HTML
<script type="text/javascript">

function notEmpty(){
var myTextField = document.getElementById('myText');
if(myTextField.value != "")
alert("You entered: " + myTextField.value)
else
alert("Would you please enter some text?")
}
</script>

<input type='text' id='myText' />
<input type='button' onclick='notEmpty()' value='Form Checker' />

Спасибо!!! Мда, всё очень просто.

Два вопроса:
- если я использую фреймвёрк jquery, то этот код подойдёт?
- а получится ли передать значение этой переменной не onClick, а по ходу набора текста?

Спасибо.

Спустя 22 минуты, 57 секунд (13.10.2009 - 15:59) Oyeme написал(а):
Всё получиться.

У jquery немного другой синтаксик,если всё писать так на одном.

HTML
var myTextField = $('#myText'); // присваивание переменной



HTML
var myValue = $('#myText').val(); // получаем значение элемента

--------
HTML
$('#myText').val("hello world"); // устанавливаем значение элемента

Спустя 15 минут, 3 секунды (13.10.2009 - 16:14) YanBess написал(а):
Цитата (Oyeme @ 13.10.2009 - 12:59)
Всё получиться.

У jquery немного другой синтаксик,если всё писать так на одном.

HTML
var myTextField = $('#myText'); // присваивание переменной



HTML
var myValue = $('#myText').val(); // получаем значение элемента

--------
HTML
$('#myText').val("hello world"); // устанавливаем значение элемента

А событие onBlur будет работать?

Спустя 31 минута, 52 секунды (13.10.2009 - 16:46) YanBess написал(а):
Поясню подробнее:
хочу, чтобы при событии onBlur в этом текстовом поле, текст передавался яваскрипту, и потом этот текст передавался пхп скрипту test.php и потом выводился на исходной странице.
Я думаю функция ниже подойдёт, но не знаю как вывести результат обратно.


HTML
$.get("test.php", $('#myText').val(), вот тут я не знаю как вывести результат на страницу);

Спустя 14 минут, 11 секунд (13.10.2009 - 17:00) Johnny написал(а):
Для начала нужно решить в какой момент введенный текст будет обрабатываться!? Если после того как юзер заполнил это поле, и перешел к следующему - тогда и пригодится событие onblur(снятие фокуса)

HTML
<input type='text' onblur=blur_handler(this) />

function blur_handler (obj) {

// получаем значение введенного текста
var text = $(obj).val()

// GET запрос на сервер(хотя логичнее POST)
// скрипт обработает переменную $_GET['value']
// а весь его вывод окажется в JS переменной data
$.get('test.php', {value: text}, function( data ) {
$(obj).val(data)
})

}


как-то так...

Спустя 18 минут, 10 секунд (13.10.2009 - 17:18) YanBess написал(а):
Цитата (Johnny @ 13.10.2009 - 14:00)
Для начала нужно решить в какой момент введенный текст будет обрабатываться!? Если после того как юзер заполнил это поле, и перешел к следующему - тогда и пригодится событие onblur(снятие фокуса)

HTML
<input type='text' onblur=blur_handler(this) />

function blur_handler (obj) {

// получаем значение введенного текста
var text = $(obj).val()

// GET запрос на сервер(хотя логичнее POST)
// скрипт обработает переменную $_GET['value']
// а весь его вывод окажется в JS переменной data
$.get('test.php', {value: text}, function( data ) {
$(obj).val(data)
})

}


как-то так...

Спасибо!!!
Принцип я понял, остальное дело техники biggrin.gif

Товарищи, может у кого есть готовые примеры.
Буду очень благодарен.
Спасибо!!!

Спустя 6 минут, 46 секунд (13.10.2009 - 17:25) Johnny написал(а):
Дык чем те не готовый пример?
Задача то какая? Проверить что-нить типа логина на уникальность без перезагрузки страницы? =)

Спустя 23 минуты, 3 секунды (13.10.2009 - 17:48) YanBess написал(а):
Цитата (Johnny @ 13.10.2009 - 14:25)
Дык чем те не готовый пример?
Задача то какая? Проверить что-нить типа логина на уникальность без перезагрузки страницы? =)

Именно!!! biggrin.gif
Пересмотрел все статьи и примеры по этому поводу - в основном все копируют друг у друга.
Возможно у кого-то есть что-нибудь свежее и интересное? tongue.gif

Спустя 1 час, 8 минут, 44 секунды (13.10.2009 - 18:57) Guest написал(а):
так собственно тут остается написать бэкэнд на пэхапэ.
PHP
if( isset($_GET['login_to_check']) && preg_match('/$[a-z0-9]+^/', $_GET['login_to_check'] ) ) {
    $query  = "SELECT COUNT(*) AS `cnt` FROM `users` WHERE `login` = '{$_GET['login_to_check']}'";
    ...
    ...
    if( $cnt = 0 ) {
        echo 'ok';
    } else {
        echo 'failed';
    }
} else {
    echo 'failed';
}


В JS скрипте останется проверить что пришло в data, ok или failed.

Спустя 2 минуты, 51 секунда (13.10.2009 - 19:00) Johnny написал(а):
Тьфу, залогиниццо забылЪ

Спустя 4 часа, 30 минут, 8 секунд (13.10.2009 - 23:30) YanBess написал(а):
Ну ребята, спасибо!!! Вы мне дали хороший толчёк - вот поколдовал немного опираясь на ваши советы, и наколдовал рабочий код!!! А главное сам-то разобрался что к чему.

Если кому нужно - берите, пригодится:

Форма для текста и место, куда вернется результат
HTML
<input name="" type="text" id="mytext"/>
<div id="resultat"></div>


Сам кодик, который будет вызываться событием onBlur, передавать данные методом post файлу test.php и возвращаться в <div id="resultat"></div>:

HTML
<script>
$("#mytext").blur(function () {
myValue = $('#mytext').val();
$.post("2.php", { name: myValue },
function(data){
$("#resultat").append("Слово в текстовом поле было: " + data);
});
});
</script>


И конечно фаил test.php, в который отправился запрос:
В этом файле мы можем словить глобальную переменную пост и сделать с ней что угодно и вывести результат, но т.к. у меня есть привычка лениться, то я не буду её обрабатывать, а просто выведу на страницу.
HTML
<?
echo $_POST['name'];
?>


Надеюсь всем всё понятно. Скрипт реально рабочий.

Спустя 8 минут, 23 секунды (13.10.2009 - 23:38) YanBess написал(а):
Кстате, а здесь нашёл способы как можно вывести результат на страницу - заменить, вывести после, вывести перед и т.д.

http://jquery-docs.ru/manipulation/



Здесь понятная информация по ГЕТ запросу jquery:

http://jquery-docs.ru/Ajax/jQuery.get/

В написанном мною коде выше я просто get заменил на post, и данные стали передаваться методом post, что более надёжно.


_____________
Заснул на клавиатуре, если отвечаю, значит, что-то снится!!![FONT=Courier][COLOR=red]
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.