Форум PHP программистов > jquery ajax запрос post radio кнопки

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: jquery ajax запрос post radio кнопки

DooMka

15.01.2012 - 02:43

B так, хотел-бы привести достаточно простой пример работы jquery с ajax запросом метода post

	      <div id="content"></div>  
	  
    <form id="myForm">  
    Введите имя:<br/>  
        <input id="username" type="radio" value="4" size="20"><br/><br/>  
        <input type="submit" value="Отправить">  
    </form>  
      
    <script>  
        $(document).ready(function(){  
          
            $('#myForm').submit(function(){  
                $.ajax({  
                    type: "POST",  
                    url: "greetings.php",  
                    data: "username="+$("#username").val(),  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
                return false;  
            });  
              
        });  
    </script>

Вышеприведённый код работает самым наипрекраснейшим образом.

Но вот возникла проблема, собственно для чего и хотел использовать этот удобный способ занесения данных в базу, не кидая пользователя с одной страницы на другую...

Этим универсальным в своём роде способом хотелось-бы отправить данные из формы "радиокнопки" радиокнопок аж целых 10 штук. Есть более рациональные способы опроса пользователей, но уж так повелось, что решил использовать именно эту систему.

			 <form action="golosovalka.php" method="post" name="golos">
			 <div class="reitocens">Оцените песню: 0 <input name="score" id="numer1" title="Оценка 0" type="radio" value="0" checked> 1<input name="score" id="numer1" title="Оценка 1" type="radio" value="1"> 2<input name="score" id="numer1" title="Оценка 2" type="radio" value="2"> 3<input name="score" id="numer1" title="Оценка 3" type="radio" value="3"> 4<input name="score" id="numer1" title="Оценка 4" type="radio" value="4"> 5 <input name="score" id="numer1" title="Оценка 5" type="radio" value="5"> 6 <input name="score" id="numer1" title="Оценка 6" type="radio" value="6"> 7 <input name="score" id="numer1" title="Оценка 7" type="radio" value="7"> 8 <input name="score" id="numer1" title="Оценка 8" type="radio" value="8"> 9 <input name="score" id="numer1" title="Оценка 9" type="radio" value="9"> 10 <input name="score" id="numer1" title="Оценка 10" type="radio" value="10">   <input class="rei_botm" title="Оценить песню <?echo $s['namemp3'];?> mp3" id="mp3ws" name="submit" type="submit" value="Оценить"><input name="id" type="hidden" value="<? echo "$users"; ?>"></div>
			 </form>

Пытался накуралесить в переменную "score" в gquery одно из значений, лишь той активной радиокнопки. Но увы этого у меня не вышло.

			 <form id="mp3files">
			 <div class="reitocens">Оцените песню: 0 
			 <input name="score" id="score" id="numer1" title="Оценка 0" type="radio" value="0" checked> 1<input name="score" id="score" id="numer1" title="Оценка 1" type="radio" value="1"> 2<input name="score" id="score" id="numer1" title="Оценка 2" type="radio" value="2"> 3<input name="score" id="score" id="numer1" title="Оценка 3" type="radio" value="3"> 4<input name="score" id="score" id="numer1" title="Оценка 4" type="radio" value="4"> 5 <input name="score" id="score" id="numer1" title="Оценка 5" type="radio" value="5"> 6 <input name="score" id="score" id="numer1" title="Оценка 6" type="radio" value="6"> 7 <input name="score" id="score" id="numer1" title="Оценка 7" type="radio" value="7"> 8 <input name="score" id="score" id="numer1" title="Оценка 8" type="radio" value="8"> 9 <input name="score" id="score" id="numer1" title="Оценка 9" type="radio" value="9"> 10 <input name="score" id="score" id="numer1" title="Оценка 10" type="radio" value="10">   <input class="rei_botm" title="Оценить песню mp3" id="mp3ws" name="submit" type="submit" value="Оценить">
			 </form>
			 
	<script>  
        $(document).ready(function(){  
          
            $('#mp3files').submit(function(){  
                $.ajax({  
                    type: "POST",  
                    url: "golosovalka.php",  
                    data: "score="+$("#score").val(),  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
                return false;  
            });  
              
        });  
    </script>

Спустя 29 минут, 51 секунда (15.01.2012 - 02:13) DooMka написал(а):

Я вот тут подумал, если к каждой кнопке с помощью jquery прописать свою переменную, но как выловить именно активную кнопку, я даже не представляю

<input  name="score"  id="numer1" title="Оценка 0" type="radio" value="0" checked>

Спустя 7 часов, 52 минуты, 8 секунд (15.01.2012 - 10:05) nugle написал(а):

есть такой вариант

$(document).ready(function(){  
var data;
			
			$('input[name="score"]').change(function(){
				$('input[name="score"]').each(function(index, element) {
                    $(this).removeClass('checked');
                });
				
				$(this).addClass('checked');
			});          


            $('#mp3files').submit(function(){  

$('input[name="score"]').each(function(index, element) {
                    if($(this).hasClass('checked'))
						data = $(this).val();
                });
                $.ajax({  
                    type: "POST",  
                    url: "golosovalka.php",  
                    data: "score="+$("#score").val(),  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
                return false;  
            });  
              
        });

html

0 <input name="score"  title="Оценка 0" type="radio" value="0" class="checked" checked="checked">
                 1<input name="score"  title="Оценка 1" type="radio" value="1"> 
                 2<input name="score"  title="Оценка 2" type="radio" value="2"> 
                 3<input name="score"  title="Оценка 3" type="radio" value="3"> 
                 4<input name="score"  title="Оценка 4" type="radio" value="4"> 
                 5 <input name="score"  title="Оценка 5" type="radio" value="5"> 
                 6 <input name="score"  title="Оценка 6" type="radio" value="6"> 
                 7 <input name="score"  title="Оценка 7" type="radio" value="7"> 
                 8 <input name="score" title="Оценка 8" type="radio" value="8"> 
                 9 <input name="score" title="Оценка 9" type="radio" value="9"> 
                 10 <input name="score" title="Оценка 10" type="radio" value="10">

Спустя 2 часа, 53 минуты, 26 секунд (15.01.2012 - 12:58) DooMka написал(а):

Сильно извиняюсь, но у меня код так не заработал:


<div id="content"></div>  

		  	 <form id="mp3files">
			 0 <input name="score"  title="Оценка 0" type="radio" value="0" class="checked" checked="checked">
                 1<input name="score"  title="Оценка 1" type="radio" value="1"> 
                 2<input name="score"  title="Оценка 2" type="radio" value="2"> 
                 3<input name="score"  title="Оценка 3" type="radio" value="3"> 
                 4<input name="score"  title="Оценка 4" type="radio" value="4"> 
                 5 <input name="score"  title="Оценка 5" type="radio" value="5"> 
                 6 <input name="score"  title="Оценка 6" type="radio" value="6"> 
                 7 <input name="score"  title="Оценка 7" type="radio" value="7"> 
                 8 <input name="score" title="Оценка 8" type="radio" value="8"> 
                 9 <input name="score" title="Оценка 9" type="radio" value="9"> 
                 10 <input name="score" title="Оценка 10" type="radio" value="10">
			    <input class="rei_botm" title="Оценить песню mp3" id="black" name="submit" type="submit" value="Оценить">
			 
			 </form>
	
			 
	<script>  
	$(document).ready(function(){  
var data;
			
			$('input[name="score"]').change(function(){
				$('input[name="score"]').each(function(index, element) {
                    $(this).removeClass('checked');
                });
				
				$(this).addClass('checked');
			});          


            $('#mp3files').submit(function(){  

$('input[name="score"]').each(function(index, element) {
                    if($(this).hasClass('checked'))
						data = $(this).val();
                });
                $.ajax({  
                    type: "POST",  
                    url: "greetings.php",  
                    data: "score="+$("#score").val(),  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
                return false;  
            });  
              
        });  
	
    </script>

Выводит вместо

<div id="content"></div>

Переменная, undefined!

Содержание обработчика greetings.php

<?php   
    echo "Переменная, <b>".$_REQUEST['score']."</b>!<br>";  
?>

Спустя 6 минут, 26 секунд (15.01.2012 - 13:05) nugle написал(а):

<input class="rei_botm" title="Оценить песню mp3" id="black" name="submit" type="submit" value="Оценить">
удали
создай кнопку дивом <div class="rei_botm"><span>Отправить</span></div>
а это $('#mp3files').submit, замени на $('.rei_botm').click

Спустя 14 минут, 57 секунд (15.01.2012 - 13:19) DooMka написал(а):

R сожалению код так и не заработал, решить проблему, "что делать и как быть" я не в силах

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">  
<script type="text/javascript" src="jquery.js"></script>  
</head>  
  
<body>  
      
<div id="content"></div> 


			 0 <input name="score"  title="Оценка 0" type="radio" value="0" class="checked" checked="checked">
                 1<input name="score"  title="Оценка 1" type="radio" value="1"> 
                 2<input name="score"  title="Оценка 2" type="radio" value="2"> 
                 3<input name="score"  title="Оценка 3" type="radio" value="3"> 
                 4<input name="score"  title="Оценка 4" type="radio" value="4"> 
                 5 <input name="score"  title="Оценка 5" type="radio" value="5"> 
                 6 <input name="score"  title="Оценка 6" type="radio" value="6"> 
                 7 <input name="score"  title="Оценка 7" type="radio" value="7"> 
                 8 <input name="score" title="Оценка 8" type="radio" value="8"> 
                 9 <input name="score" title="Оценка 9" type="radio" value="9"> 
                 10 <input name="score" title="Оценка 10" type="radio" value="10">
			   <div class="rei_botm"><span>Отправить</span></div>
			 
	<script>  
	$(document).ready(function(){  
var data;
			
			$('input[name="score"]').change(function(){
				$('input[name="score"]').each(function(index, element) {
                    $(this).removeClass('checked');
                });
				
				$(this).addClass('checked');
			});          


            $('.rei_botm').click(function(){  

$('input[name="score"]').each(function(index, element) {
                    if($(this).hasClass('checked'))
						data = $(this).val();
                });
                $.ajax({  
                    type: "POST",  
                    url: "greetings.php",  
                    data: "score="+$("#score").val(),  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
                return false;  
            });  
              
        });  
	
    </script>  
	  
	  
</body>  
</html>

обработчик greetings.php

<?php   
    echo "Переменная, <b>".$_REQUEST['score']."</b>!<br>";  
?>

результат вывода

Переменная, undefined!

Спустя 37 минут, 40 секунд (15.01.2012 - 13:57) DooMka написал(а):

Случайно нашёл следующий код, по поиску элементов радиокнопок и выделенных кнопок.

$(":text");            // выбор всех input элементов с типом =text
$(":radio");           // выбор всех input элементов с типом =radio
                       // и так далее
$("input:enabled");    // выбор всех включенных элементов input
$("input:checked");    // выбор всех отмеченных чекбоксов

Спустя 1 час, 52 минуты, 40 секунд (15.01.2012 - 15:50) DooMka написал(а):

Ребят, я так и не смог решить свою проблему :mellow:

Вот ещё один вопросик, пытаюсь добавить эффект для следующего элемента - а именно кнопки, при наведении на кнопку сменяется её рисунок, ну и увеличивается размер

$('.searchmp3').hover(function(){
$(this).addClass('searchmp3hov');
},function() {
$(this).removeClass('searchmp3hov');
});

пытался сделать так

$('.searchmp3').hover(function(){
$(this).addClass('searchmp3hov');
$(this).animate({height: "hide"}, 1000);
},function() {
$(this).removeClass('searchmp3hov');
});

но визуального эффекта никакого
пытался и добпалять и к самому input

$("input.searchmp3hov").animate({height: "show"}, 1000);

Спустя 6 часов, 55 минут, 25 секунд (15.01.2012 - 22:45) DooMka написал(а):

Извиняюсь за флуд, но никто не желает мне помочь?
Спасения утопающего дело рук самого утопающего, так-что попробую поэкспериментировать. Но всё-же как решу проблему, отпишусь здесь...

Спустя 32 минуты, 53 секунды (15.01.2012 - 23:18) redreem написал(а):

             $('#mp3files').submit(function(){
	        var scoreVal = $('input[name="score"]:checked').val();
                $.ajax({  
                    type: "POST",  
                    url: "golosovalka.php",  
                    data: "score="+scoreVal,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
                return false;  
            });

Спустя 2 дня, 21 минута, 10 секунд (17.01.2012 - 23:39) DooMka написал(а):

К сожалению jquery в данном коде вообще никак не реагирует на какие-либо изменения

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">  
<script type="text/javascript" src="jquery.js"></script>  
</head>  
  
<body>  
	 
		<div id="content"></div> 
	
<div id='mp3files'>
			 0 <input name="score"  title="Оценка 0" type="radio" value="0" checked>
                 1<input name="score"  title="Оценка 1" type="radio" value="1"> 
                 2<input name="score"  title="Оценка 2" type="radio" value="2"> 
                 3<input name="score"  title="Оценка 3" type="radio" value="3"> 
                 4<input name="score"  title="Оценка 4" type="radio" value="4"> 
                 5 <input name="score"  title="Оценка 5" type="radio" value="5"> 
                 6 <input name="score"  title="Оценка 6" type="radio" value="6"> 
                 7 <input name="score"  title="Оценка 7" type="radio" value="7"> 
                 8 <input name="score" title="Оценка 8" type="radio" value="8"> 
                 9 <input name="score" title="Оценка 9" type="radio" value="9"> 
                 10 <input name="score" title="Оценка 10" type="radio" value="10">
			   <input class="rei_botm" id="black" type="submit" value="Оценить">
			 </div>
			 

			 
	<script>  
             $('#mp3files').submit(function(){
	        var scoreVal = $('input[name="score"]:checked').val();
                $.ajax({  
                    type: "POST",  
                    url: "greetings.php",  
                    data: "score="+scoreVal,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
                return false;  
            });  
    </script>  
	  
	  
</body>  
</html>

Обработчик

<?php   
    echo "Переменная, <b>".$_REQUEST['score']."</b>!<br>";  
?>

Спустя 5 дней, 4 часа, 13 минут (23.01.2012 - 03:52) DooMka написал(а):

Ну вот и получилось с всеобщей помощью научить меня разбираться в казалось-бы простейшей, но очень полезной функцией...

Полностью рабочий код, за что отдельное спасибо redreem:

<html>  
<body>  
      

<div id="content"></div>  

		  	 <form id="mp3files">
			 0 <input name="score"  title="Оценка 0" type="radio" value="0" checked="checked">
                 1<input name="score"  title="Оценка 1" type="radio" value="1"> 
                 2<input name="score"  title="Оценка 2" type="radio" value="2"> 
                 3<input name="score"  title="Оценка 3" type="radio" value="3"> 
                 4<input name="score"  title="Оценка 4" type="radio" value="4"> 
                 5 <input name="score"  title="Оценка 5" type="radio" value="5"> 
                 6 <input name="score"  title="Оценка 6" type="radio" value="6"> 
                 7 <input name="score"  title="Оценка 7" type="radio" value="7"> 
                 8 <input name="score" title="Оценка 8" type="radio" value="8"> 
                 9 <input name="score" title="Оценка 9" type="radio" value="9"> 
                 10 <input name="score" title="Оценка 10" type="radio" value="10">
			    <input class="rei_botm" title="Оценить песню mp3" name="submit" type="submit" value="Оценить">
			 
			 </form>

	  
    <script>  
            $('#mp3files').submit(function(){
	        var scoreVal = $('input[name="score"]:checked').val();
                $.ajax({  
                    type: "POST",  
                    url: "golosovalka.php",  
                    data: "score="+scoreVal,  
                    success: function(html){  
                        $("#content").html(html);
                    }  
                });  
                return false;  
            });  
    </script>  
	  
</body>  
</html>

Быстрый ответ:

Здесь расположена полная версия этой страницы.