2017-02-22 4 views
0

Я пытаюсь изменить стиль кнопки «Отправить», когда пользователь нажимает на нее при отправке формы..php файл не отображает данные формы

Атрибут action вызывает файл PHP, но фактические данные не отображаются, пока я не удалю атрибут onSubmit из моей формы. Тогда я не могу использовать функцию sendBtn(), чтобы изменить стиль кнопки.

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

Любые идеи?

PS. Я нахожусь на локальном сервере с MAMP и использую Dreamweaver для редактирования.

<form class="customform" method="post" action="emailOnServer.php" method="post" onSubmit="return sendBtn();" autocomplete="on" > 
 
    <div class="s-12" onClick="formFocus()"><input id="imie" name="imie1"    placeholder="Twoje imię" type="text" required </input></div> 
 
    <div class="s-12" onClick="formFocus()"><input id="email" name="email1" placeholder="Twój e-mail" type="email" required </input></div> 
 
    <div class="s-12" onClick="formFocus()"><textarea placeholder="Wiadomość" id="pole" rows="5" style="resize:none;" required></textarea </input></div> 
 
    <div class="custom2" style="width: 34%; float: right;" ><input id="se" type="submit" value="Wyślij" style="background-color:#92c500; color: white; border-color:#6C0;" ></input> </div>   
 
    <div class="custom1" style="width: 65%;" ><button id="resetButton" onclick="cleanBtn()" type="reset" style="background-color: #808080; color: white; border-color:#066; border-radius:2px;">Wyczyść </button></div> 
 
    <img id="tick123" src="img2/green-tick-icon-0.png" style="display: none; float:right; position:absolute; right:1%; top:86%; padding:0; margin:0; width: 28px; height: 28px;"/> 
 
    <img id="tick1234" src="img2/green-tick-icon-0.png" style="display: none; position:absolute; left:58%; top:86%; padding:0; margin:0; width: 28px; height: 28px;"/> 
 
</form> 
 

 
<!-- more code to change form style on focus --> 
 

 
function sendBtn() { 
 
\t \t 
 
\t \t 
 
\t \t if (document.getElementById('email').value.indexOf("@")> 0 && 
 
\t \t  document.getElementById('email').value.indexOf(".")> 2 && 
 
\t \t  document.getElementById('imie').value != 0 && 
 
\t \t  document.getElementById('email').value != 0 && 
 
\t \t \t document.getElementById('pole').value != 0){ 
 
\t \t \t 
 
\t \t document.getElementById('se').style.backgroundColor = "#00283A"; 
 
\t \t document.getElementById("tick123").style.display="block"; 
 
\t \t document.getElementById('se').value="Wysłano"; 
 
\t \t document.getElementById('email').disabled=true; 
 
\t \t document.getElementById('imie').disabled=true; 
 
\t \t document.getElementById('pole').disabled=true; 
 
\t \t return true;}}

Это от свободного шаблона, и я знаю, что я должен был использоваться CSS стилей, чтобы сделать его более удобным для чтения

Это emailOnServer.php файл:

<body> 
 
Hello User 
 
<?php $name = $_POST['imie1']; 
 
\t \t echo $name; ?> 
 

 
</body>

+0

Пожалуйста, покажите нам функцию sendBtn(). Убедитесь, что оно возвращает правильное значение для отправки формы. –

+0

Я добавил еще код, и он находится между '' тегами. Насколько я знаю, 'true' будет отправлять форму, и это так. Затем я получаю файл .php на другой вкладке, но он говорит только «Hello User». – besthost

+0

Удаленные теги из названия –

ответ

0

Во-первых, ваш HTML есть некоторые ошибки, например:

<input id="imie" .... type="text" required </input> 
// look here        ^
// the tag is not closed correctly 

должен быть

<input id="imie" name="imie1" placeholder="Twoje imię" type="text" required /> 

В любом случае, если вам нужно удалить атрибут onsubmit, вы можете сделать что-то вроде этого

<form name="myform" ...> 
    ... 
</form> 

затем js

var form = document.forms.myform; 

form.onsubmit = function(){ 
    // do stuff 
    document.getElementById('se').style.backgroundColor = "#00283A"; 
    // ... 
} 

У этого jsfiddle есть пример кода для ваших требований. Элементы формы были упрощены.

+0

OMG! Спасибо rogelio :) Я просто сделал это: 'var form = document.forms.myForm; form.submit = sendBtn(); ' и это сработало! Это не имеет никакого отношения к тегу '', потому что я пробовал оба способа до – besthost

+0

. Вы правы! Это еще один способ сделать это. – rogelio

Смежные вопросы