Javascript-форум (https://javascript.ru/forum/)
-   Работа (https://javascript.ru/forum/job/)
-   -   Форма без перезагрузки страницы (https://javascript.ru/forum/job/64100-forma-bez-perezagruzki-stranicy.html)

mirstiker 20.07.2016 00:34

Форма без перезагрузки страницы
 
Здравствуйте!
есть простенький скрипт ,необходимо с помощью 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>

рони 20.07.2016 00:43

mirstiker,
стоимость укажите ...

рони 20.07.2016 00:55

mirstiker,
имя формы совпадает с инпутами, чекед указан неправильно, у картинки желательно класс придумать.

laimas 20.07.2016 06:15

mirstiker,
РНР здесь вообще не нужен.

mirstiker 20.07.2016 18:13

laimas,
это решение меня и не устроило т.к происходит перезагрузка страницы.

mirstiker 20.07.2016 18:14

Бюджет 300 р .Ребят кто возьмется?

рони 20.07.2016 18:21

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>

mirstiker 20.07.2016 19:19

рони,
не работает,по умолчанию отображается <img src = "image/standart.jpg">

рони 20.07.2016 19:26

mirstiker,
измените имя формы

mirstiker 20.07.2016 19:30

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


Часовой пояс GMT +3, время: 12:14.