Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   onclick при submit (https://javascript.ru/forum/dom-window/61187-onclick-pri-submit.html)

ureech 07.02.2016 22:51

onclick при submit
 
Здравствуйте.Прошу помочь разобраться.Есть код в смарти шаблоне.
{literal}
<style>
.hide{display:none;}
</style>
{/literal}

<div class="hidden">
<form action="" method="POST" name="msgform"  enctype="multipart/form-data">
<input type="hidden" name="prev" value="1" />
...................................................
    <input type="submit" name="gosend" id="gosend" value="{$LANG.SEND}"  style="font-size:16px"/>
	<input type="button" onclick="document.msgform.submit();"  id="prev" value="prev"  style="font-size:16px"/>
</form>
</div>
<div class="hidden hide">
{include file='com_forum_preview.tpl'}
</div>

Всё работает.Но не могу сменить при клике класс hide у hidden.Как только не пробовал.И в инпут дописывал и в отдельную ф-цию.Не хочет при submit работать.Верхний див остаётся, а нижний на секунду мелькает и опять скрывается.

Dilettante_Pro 08.02.2016 14:39

ureech, попробуйте
<input type="button" onclick="showDiv();"  id="Button2" value="prev"  style="font-size:16px"/>

Эту кнопку лучше вынести из формы.
и
function showDiv() {
              document.getElementsByClassName('hidden hide')[0].style.display = "block";
              document.msgform.submit();
          }

А кнопка submit при этом вроде бы и не нужна

Dilettante_Pro 08.02.2016 16:44

А нужно, похоже, совсем без submit и, соответственно, перезагрузки страницы, например
http://smartlanding.biz/otpravka-for...-stranicy.html

Dilettante_Pro 08.02.2016 17:35

Нет... Делал и вот так
<!DOCTYPE html>
<html>
<head>
     <title></title>
     <style>
.hide{display:none;}
</style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</script>
      <script>
          $(function () {
              $("#form").onsubmit = function () {
                  var form_data = $("#form").serializeArray;
                  $.ajax({
                      url: '',
                      type: 'POST', 
                      data: form_data
                  });
                  $(".hide").style.display = "block";
              };
          });
       </script>
</head>
<body>
   <div class="hidden">
      <form action="#" id="form">
         <input type="hidden" name="prev" value="1" /> 
         <input type="submit" name="submit">
      </form>
    </div>
   <div class="hide">
    скрытый див
   </div>
</body>
</html>

все равно обновляется

DynkanMaclaud 08.02.2016 18:40

Dilettante_Pro,
попробуй...
$(function () {
              $("#form").submit = function () {
                  var form_data = $("#form").serializeArray;
                  $.ajax({
                      url: '',
                      type: 'POST', 
                      data: form_data
                  });
                  $(".hide").style.display = "block";
return false;
              };
          });

ureech 08.02.2016 22:00

Цитата:

Сообщение от Dilettante_Pro
Эту кнопку лучше вынести из формы.

Не могу.Она должна работать как submit.
DynkanMaclaud,
так тоже не работает, в любом случае происходит перезагрузка.Видно придётся с другой стороны к проблеме подходить.

DynkanMaclaud 08.02.2016 22:15

ureech,а так?
<form action="" method="POST" id='myForm' name="msgform"  enctype="multipart/form-data">
<input type="hidden" name="prev" value="1" />
  <input type="submit" name="gosend" id="gosend" value="{$LANG.SEND}"  style="font-size:16px"/>
	
</form>
<div class="hidden hide">
{include file='com_forum_preview.tpl'}
</div>

$(document).ready(function() {
	
	$('#myForm').submit(function(e) {
		
	  e = e || event;
		
		 var form_data = $(this).serialize(); 
            $.ajax({
            type: "POST", //Метод отправки
            url: "your path", //путь до php фаила отправителя
            data: form_data,
            success: function() {
                   
				   $('.hide').addClass('.yourClass');
                                   $('.hide').removeClass('.hide');
				   alert('ok');
            }
    });
		
		e.preventDefault();
		
		
			
	})
	

	

	
})

Здесь проблема не в аяк запросе а в том что событие submit по умолчанию перезагружает страницу, поэтому в обработчике нужно написать
e.preventDefault();
, вот на тестовой странице ссылка, внизу есть форма и она работает по скрипту выше, если у вас перезагрузка продолжается то почистите кэш...

ureech 09.02.2016 08:08

Цитата:

Сообщение от DynkanMaclaud
вот на тестовой странице ссылка,

Ссылка алерт выводит, а форму не отправляет.Так и у меня работает.:)
e.preventDefault(); не помог.Ладно, возможно дело в специфики смарти, погуглю это дело.

DynkanMaclaud 09.02.2016 09:59

ureech,
отправляет она форму, раз алерт вывела))) зачем же мне приводить нерабочий пример?)) ты 111111 везде вводил


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