Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.07.2016, 00:34
Аватар для mirstiker
Интересующийся
Отправить личное сообщение для mirstiker Посмотреть профиль Найти все сообщения от mirstiker
 
Регистрация: 19.06.2016
Сообщений: 23

Форма без перезагрузки страницы
Здравствуйте!
есть простенький скрипт ,необходимо с помощью radio кнопок подставлять изображения "на лету" без перезагрузки страницы.

вот код:
<?php 
session_start();
$_SESSION['krugka']=$_POST ['krugka'] ;



     if ($_SESSION ['krugka'] == 'standart' )
     {
	 $photo = 'standart.jpg';
     }

     if ( $_SESSION ['krugka'] == 'xameleon' )
     {
		 $photo ='xameleon.jpg' ;
	 }	
     if ( $_SESSION ['krugka']  == 'pivo' )
     {
		 $photo ='pivo.jpg' ;
		
	 }	
	 
 


?>

<!Doctype html>
<html>
<head>
   <meta charset = "utf-8"/>
     <link rel="stylesheet" type="text/css" href="krugki.css">
</head>
<body>
<div class="krugka">
     <form name="krugka" action ="" method="POST">
	     <INPUT type="radio" name="krugka" value="standart" cheked="cheked"/> Стандартная кружка </br>
		 <INPUT type="radio" name="krugka" value="xameleon" /> Кружка хамелеон </br>
         <INPUT type="radio" name="krugka" value="pivo"  /> Кружка пивная </br>
		 <input type="submit" name="submit" value="Стоимость" />
     </form>
</div>
<div>
    
     <img src = "image/<?php echo $photo  ; ?>">
	
</div>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2016, 00:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

mirstiker,
стоимость укажите ...
Ответить с цитированием
  #3 (permalink)  
Старый 20.07.2016, 00:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

mirstiker,
имя формы совпадает с инпутами, чекед указан неправильно, у картинки желательно класс придумать.
Ответить с цитированием
  #4 (permalink)  
Старый 20.07.2016, 06:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

mirstiker,
РНР здесь вообще не нужен.
Ответить с цитированием
  #5 (permalink)  
Старый 20.07.2016, 18:13
Аватар для mirstiker
Интересующийся
Отправить личное сообщение для mirstiker Посмотреть профиль Найти все сообщения от mirstiker
 
Регистрация: 19.06.2016
Сообщений: 23

laimas,
это решение меня и не устроило т.к происходит перезагрузка страницы.
Ответить с цитированием
  #6 (permalink)  
Старый 20.07.2016, 18:14
Аватар для mirstiker
Интересующийся
Отправить личное сообщение для mirstiker Посмотреть профиль Найти все сообщения от mirstiker
 
Регистрация: 19.06.2016
Сообщений: 23

Бюджет 300 р .Ребят кто возьмется?
Ответить с цитированием
  #7 (permalink)  
Старый 20.07.2016, 18:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

mirstiker,
<!Doctype html>
<html>
<head>
   <meta charset = "utf-8"/>
     <link rel="stylesheet" type="text/css" href="krugki.css">
</head>
<body>
<div class="krugka">
     <form  action ="" method="POST">
       <INPUT type="radio" name="krugka" value="standart" checked="checked"/> Стандартная кружка </br>
     <INPUT type="radio" name="krugka" value="xameleon" /> Кружка хамелеон </br>
         <INPUT type="radio" name="krugka" value="pivo"  /> Кружка пивная </br>
     <input type="submit" name="submit" value="Стоимость" />
     </form>
</div>
<div>
     <img src = "image/standart.jpg">
</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
var img = document.querySelector('img');
[].forEach.call(document.querySelectorAll('input[name="krugka"]'), function(item) {
        item.addEventListener('click', function() {
            img.src = 'image/' +item.value+ '.jpg';
        });
    });
    });
</script>
</body>
</html>

Последний раз редактировалось рони, 20.07.2016 в 19:31.
Ответить с цитированием
  #8 (permalink)  
Старый 20.07.2016, 19:19
Аватар для mirstiker
Интересующийся
Отправить личное сообщение для mirstiker Посмотреть профиль Найти все сообщения от mirstiker
 
Регистрация: 19.06.2016
Сообщений: 23

рони,
не работает,по умолчанию отображается <img src = "image/standart.jpg">
Ответить с цитированием
  #9 (permalink)  
Старый 20.07.2016, 19:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

mirstiker,
измените имя формы
Ответить с цитированием
  #10 (permalink)  
Старый 20.07.2016, 19:30
Аватар для mirstiker
Интересующийся
Отправить личное сообщение для mirstiker Посмотреть профиль Найти все сообщения от mirstiker
 
Регистрация: 19.06.2016
Сообщений: 23

рони,
Супер! заработало) напишите yandex кошелек -пришлю вознаграждение)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AJAX отправка формы без перезагрузки страницы Igorsrt AJAX и COMET 3 30.05.2016 10:54
Отправка e-mail без перезагрузки страницы raffx AJAX и COMET 2 26.11.2013 16:13
Вывести изображение после ввода URL без перезагрузки страницы Delfiniys Элементы интерфейса 5 18.10.2013 11:41
Изменение содержания страницы без полной перезагрузки самой страни gelo Events/DOM/Window 7 29.08.2010 02:03
Автообновление <div> без перезагрузки страницы Antihrist AJAX и COMET 14 28.07.2008 06:06