1 Тема від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Тема: Зміна написів при натисненні на кнопку

в мене така проблема є форма підписки і потрібно коли натиснення відбувається на кнопці то написи вверху форми мають плавно мінятись на інші, як це реалізувати з допомогою Js або jq?

rusikz вебсайт

  • Дата реєстрації: 08.06.2012
  • Повідомлень: 2 031
    • Репутація: 743

Re: Зміна написів при натисненні на кнопку

Представте код форми з тими написами, бо без того будемо гадати як на кавовій гущі, що у Вас там за кнопки, в якому саме блоці змінювати і тд тп.

3 Відповідь від rusikz Востаннє редагувалося rusikz (23.11.2013 17:51:57)

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
<div id="container">
  <div id="header">
    <div id="logo-clock"> <img src="img/logo-clock.png" width="230" height="78" alt="Годинник"> </div>
    <div id="logo"> LOGO </div>
  </div>
  <div id="content">
    <div id="shou">
      <p id="hello">Hello guys!</p>
      <p id="privet">Thank you for choosing us! </p>
      <p id="privet">Fill out the form below to subscribe for our newsletters:</p>
    </div>
    <div id="form1">
      <form id="form" action="#" method="post">
        <p>
          <input type="text" name="name" value="Your name" id="name" class="name2">
        </p>
        <p>
          <input type="text" name="email" value="Your Email" id="name" class="name1" >
        </p>
        <p>
          <input type="checkbox" name="ch" id="ch">
          <span id="che">Receive news and special offers from Coppertino Inc.</span></p>
        <p>
          <input type="submit" name="submit" value="SUBSCRIBE" id="but">
        </p>
      </form>
      <?
$db = mysql_connect ("localhost","root","");
mysql_select_db("maillist",$db);
mysql_query("SET CHARACTER SET utf8");

if(isset($_POST['submit']))
{

$result = mysql_query("INSERT INTO users (name,email,ch) values ('$_POST[name]','$_POST[email]','$_POST[ch]')");
if ($result == 'true')
                {
                    
                    }
}
?>
    </div>
  </div>
  <p id="hhh1"></p>
  <div id="footer">
    <div id="soz">
      <p id="tw"><a href="http://twitter.com" title="Twitter" target="_blank" > <img src="img/tw.png"></a></p>
      <p id="tw1"><img src="img/tbg.png"></p>
      <p id="go"><a href="http://plus.google.com" title="Google+" target="_blank"><img src="img/go.png"></a></p>
      <p id="go1"><img src="img/tbg.png"></p>
      <p id="in"><a href="http://in.com" title="In" target="_blank"><img src="img/in.png"></a></p>
      <p id="in1"><img src="img/tbg.png"></p>
      <p id="f"><a href="http://www.facebook.com" title="Facebook" target="_blank"><img src="img/f.png"></a></p>
      <p id="с">2013 © Testy, inc.</p>
    </div>
  </div>
</div>
</body>
</html>

треба блок <div id="shou">
      <p id="hello">Hello guys!</p>
      <p id="privet">Thank you for choosing us! </p>
      <p id="privet">Fill out the form below to subscribe for our newsletters:</p>
    </div>
при обробці форми після натиснення кнопки требащоб текст плавно помінявся на  такий

<div id="shou">
      <p id="hello">Thank you for subscribing!</p><p id="privet">You have been subscribed successfully.</p>
    </div>

rusikz вебсайт

4 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

а прикол в тім що я нібито розумію як поміняти але воно обновлюється і стає на своє місце, як би так зробити щоб форма собі відправилась обновилась сторінка і напис плавно помінявся і все от в чому моя проблема((

rusikz вебсайт

5 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 603
    • Репутація: 13312

Re: Зміна написів при натисненні на кнопку

1. id має бути унікальним. Валідуйте свій код, скажімо тут.
2. jquery вміє ховати і показувати елементи поступово. Найпростіше - додайте в div shou два інших div-и, типу subscribe і subscribed (одразу з display:none), і одному робіть hide, а іншому - show (з нестандартною затримкою, якщо треба).
3. Якщо цього замало - шукайте потрібний ефект тут. Але HTML5/CSS3 це все і так вміє :)

koala вебсайт

6 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

покищо на php код не треба дивитись там ще не готово мені з цим проблемно, а з html5/css3 я ще не дуже знайомий

rusikz вебсайт

7 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

напис має мінятись після натисненя на кнопку а скріпт опрацбовується до обновлення сторінки((

rusikz вебсайт

8 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

як можна це повязати щоб після обновлення сторінки? чи можливо якось звязвти з  функцією load()?

rusikz вебсайт

9 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 603
    • Репутація: 13312

Re: Зміна написів при натисненні на кнопку

Все дуже просто: вішайте код на кнопку, а не на сторінку:

<form id="form" action="javascript:ваш код" method="post">

koala вебсайт

10 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

<form id="form" action="javascript(  
$('#shou1').fadeOut(2000);
    )" method="post">

я правильно записав код тут? чи треба після двох крапок? чи як?

rusikz вебсайт

11 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

бо воно в мене чомусь нічого не працює взагалі((

rusikz вебсайт

12 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
<div id="container">
  <div id="header">
    <div id="logo-clock"> <img src="img/logo-clock.png" width="230" height="78" alt="Годинник"> </div>
    <div id="logo"> LOGO </div>
  </div>
  <div id="content">
    <div id="shou">
      <div id="shou1">
      <p id="hello">Hello guys!</p>
      <p id="privet">Thank you for choosing us! </p>
      <p id="privet">Fill out the form below to subscribe for our newsletters:</p>
    </div>
      
      <div id="shou2">
      <p id="hello">Thank you for subscribing!</p>
      <p id="privet">You have been subscribed successfully.</p>
    </div>
    </div>
    
    <div id="form1">
      <form id="form" action="javascript:  
$('#shou1').fadeOut(2000);
    " method="post">
        <p>
          <input type="text" name="name" value="Your name" id="name" class="name2">
        </p>
        <p>
          <input type="text" name="email" value="Your Email" id="name" class="name1" >
        </p>
        <p>
          <input type="checkbox" name="ch" id="ch">
          <span id="che">Receive news and special offers from Coppertino Inc.</span>
         </p>
        <p>
          <input type="submit" name="submit" value="SUBSCRIBE" id="but">
        </p>
      </form>
      <?
$db = mysql_connect ("localhost","root","");
mysql_select_db("maillist",$db);
mysql_query("SET CHARACTER SET utf8");

if(isset($_POST['submit']))
{

$result = mysql_query("INSERT INTO users (name,email) values ('$_POST[name]','$_POST[email]')");
if ($result == 'true')
                {
                    
                    }
}
?>
    </div>
  </div>
  <p id="hhh1"></p>
  <div id="footer">
    <div id="soz">
      <p id="tw"><a href="http://twitter.com" title="Twitter" target="_blank" > <img src="img/tw.png"></a></p>
      <p id="tw1"><img src="img/tbg.png"></p>
      <p id="go"><a href="http://plus.google.com" title="Google+" target="_blank"><img src="img/go.png"></a></p>
      <p id="go1"><img src="img/tbg.png"></p>
      <p id="in"><a href="http://in.com" title="In" target="_blank"><img src="img/in.png"></a></p>
      <p id="in1"><img src="img/tbg.png"></p>
      <p id="f"><a href="http://www.facebook.com" title="Facebook" target="_blank"><img src="img/f.png"></a></p>
      <p id="с">2013 © Testy, inc.</p>
    </div>
  </div>
</div>
</body>
</html>

rusikz вебсайт

13 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

shou2 в мене скритий як написати щоб вінплавно помінявся тобто shou1 скрився а shou2 появився?

rusikz вебсайт

14 Відповідь від koala Востаннє редагувалося koala (23.11.2013 20:01:42)

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 603
    • Репутація: 13312

Re: Зміна написів при натисненні на кнопку

Ви мене сподвигли таки на прочитання всього коду. Давайте так: ви зараз прочитаєте ось цей текст. Якщо ви там знайдете якісь нові для себе думки - опрацюйте їх, втіліть в код і (за потреби) знову поставте питання, з новим формулюванням. Якщо ні - відпишіться, я вкажу вам, що робити далі у вашому випадку.
Upd: так, ще погугліть по слову AJAX.

koala вебсайт

15 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

я прочитав всю статтю, але не зрозумів добре як мені текст js передати в форму(((

header("Location: http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); 
exit;

може якось з цією змінною треба якось повязати? location верне true то тоді накладати умову на виконання зміни написів???

rusikz вебсайт

16 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

ВИ можете допомогти як це реалізувати бо ajax  ще не знаю не вчив

rusikz вебсайт

17 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 603
    • Репутація: 13312

Re: Зміна написів при натисненні на кнопку

Вам треба:
- спитати щось у користувача;
- виконати обробку вибору користувача на сервері;
- повідомити користувачеві про те, що його запит виконано.
- останню дію ви бажаєте робити без перезавантаження сторінки.
Зверніть увагу - не "написи вверху форми мають плавно мінятись на інші", а "без перезавантаження сторінки"! Різницю відчуваєте? Чи те, що решта сторінки смикається, вам нецікаво, аби лиш написи вверху форми плавно змінювалися?

Як це зробити:
0. Виправляєте те, на що я вам вказав в п.1 попереднього допису.
1. Робите окремий файл, що підписує користувача, переносите туди код php з вашого файла. Результат роботи файла - або просте текстове повідомлення для подальшої обробки в скрипті js, або html-ний блок div з повідомленням, який ви вставите куди треба, це питання смаку.
2. При натисканні на кнопку, робите щось типу

$.post({
  url: "subscribe.php", //ваш файл з п.1
  data: { name: $("#name").val(), email: $("#email").val() }
})
  .done(function( msg ) {
    //тут залежно від msg - тобто того, що вам повернув php - ховаєте і показуєте що вам треба
  });

koala вебсайт

18 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

 .done(function( msg ) {
    //тут залежно від msg - тобто того, що вам повернув php - ховаєте і показуєте що вам треба
// що мені тут прописати код яким я скриваю і показую блок дів?

  });

rusikz вебсайт

19 Відповідь від rusikz

  • rusikz
  • rusikz
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 04.04.2013
  • Повідомлень: 92
    • Репутація: 4

Re: Зміна написів при натисненні на кнопку

я не розумію добре що робити треба цей код вставив у скріпти php переніс

rusikz вебсайт

20 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 603
    • Репутація: 13312

Re: Зміна написів при натисненні на кнопку

Так, якщо не обробляєте інших ситуацій.
Врешті-решт - спробуйте різні варіанти, подивіться, який для вас кращий. Це ваш код, не мій. Ви ж навіть завдання не написали, і я покладаюся на свої здогадки стосовно нього...

koala вебсайт