Question

当用户在提交表单时点击它时，我正在尝试更改“提交”按钮样式。

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() {
		
		
		if ( document.getElementById('email').value.indexOf("@")> 0 && 
		     document.getElementById('email').value.indexOf(".")> 2 && 
		     document.getElementById('imie').value != 0 &&
		     document.getElementById('email').value != 0 &&
			 document.getElementById('pole').value != 0){ 
			 
		document.getElementById('se').style.backgroundColor = "#00283A";
		document.getElementById("tick123").style.display="block";
		document.getElementById('se').value="Wysłano";
		document.getElementById('email').disabled=true;
		document.getElementById('imie').disabled=true;
		document.getElementById('pole').disabled=true;
		return true;}}

它来自免费模板，我知道我应该使用css样式表使其更具可读性

这是emailOnServer.php文件：

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

Answer 1

首先，您的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包含符合您要求的示例代码。表单元素被简化了。

.php文件不会显示表单数据

1 个答案: