我的表单是在我的网站上宣布用户输入错误,警告或新内容。我在课程ann-right
上有三个按钮,每个按钮都有颜色。当我单击按钮时,单击类ann-left
上的按钮输入更改为颜色。我想问的是,我如何根据所选颜色提交表格。红色表示“错误公告”,绿色表示“警告公告”,蓝色表示“新公告”。 Red = #D91E18
Green = #3FC380
Blue = #5BBBFF
<div class="ann-left">
<form method="post" id="ann">
<input id="announce-text" type="text" name="" placeholder="What's new?"></input>
<input id="submit-post" type="button" name="" onsubmit="submitform();" value="Post"></input>
</form>
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"></button>
<button id="green" onclick="color2()" class="tooltip color"title="Warning!" ></button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"></button>
</div>
<script>
function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
sessionStorage.setItem('col1', "#D91E18");
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
sessionStorage.setItem('col2', "#3FC380");
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
sessionStorage.setItem('col3', "#5BBBFF");
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
function submitform() {
}
</script>
答案 0 :(得分:3)
这里有几个问题。首先,你不是在练习DRY(不要重复自己),这在创建功能时非常重要。创建一个处理setColor函数的函数,并在单击的实际按钮上发送所选颜色。完成后,您可以专注于提交表单&#34;。当您提交表单时,通常希望您使用类型为submit
的buttom。由于你没有,它不会提交表格。我要做的是将onsubmit()
放在表单元素上:
<div class="ann-left">
<form method="post" id="ann" onsubmit="return submitform(this);">
<input id="hidden-input" type="hidden" name="color_selected" value="">
<input id="announce-text" type="text" name="" placeholder="What's new?">
<input id="submit-post" type="submit" name="" value="Post">
</form>
</div>
<div class="ann-right">
<button id="red" onclick="setColor('#D91E18')" class="tooltip color" title="Error!"></button>
<button id="green" onclick="setColor('#3FC380')" class="tooltip color"title="Warning!" ></button>
<button id="blue" onclick="setColor('#5BBBFF')" class="tooltip color" title="New!"></button>
</div>
<script>
var $btn = document.getElementById("submit-post");
var $hidden = document.getElementById("hidden-input");
function setColor(color) {
$btn.style.backgroundColor = color;
$hidden.value = color;
}
function submitform(form) {
alert(form.color_selected.value);
return false;
}
</script>
答案 1 :(得分:3)
您可以使用隐藏的一个输入将annoncement类型传递给您的表单。 然后你正常提交。
<div class="ann-left">
<form method="post" action="announcement_post.php" id="ann">
<input type="text" name="announcement_description" id="announce-text" placeholder="What's new?">
<input type="hidden" name="announcement_type" id="announcement_type">
<input id="submit-post" type="submit" name="" value="Post">
</form>
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"> </button>
<button id="green" onclick="color2()" class="tooltip color"title="Warning!" > </button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"> </button>
</div>
<script>
function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
document.getElementById("announcement_type").value="Error announcement";
sessionStorage.setItem('col1', "#D91E18");
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
document.getElementById("announcement_type").value="Warning announcement";
sessionStorage.setItem('col2', "#3FC380");
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
document.getElementById("announcement_type").value="New announcement";
sessionStorage.setItem('col3', "#5BBBFF");
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
</script>
<强> announcement_post.php:强>
<?php
if(!isset($_POST["announcement_type"])) die("Post was not sent.");
echo $_POST["announcement_type"];
echo '<br>';
echo $_POST["announcement_description"];
答案 2 :(得分:0)
function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
sessionStorage.setItem('col1', "#D91E18");
document.getElementById("hidden_field").value = 'error';
submitform();
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
sessionStorage.setItem('col2', "#3FC380");
document.getElementById("hidden_field").value = 'warning';
submitform();
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
sessionStorage.setItem('col3', "#5BBBFF");
document.getElementById("hidden_field").value = 'new';
submitform();
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
function submitform() {
var form = document.getElementById("ann");
var data = new FormData(form);
console.log(data);
//var req = new XMLHttpRequest();
//eq.send(data);
form.submit();
}
#red {
background: #D91E18;
}
#green {
background: #3fc380;
}
#blue {
background: #5bbbff;
}
<form method="post" id="ann">
<div class="ann-left">
<input id="announce-text" type="text" name="" placeholder="What's new?" />
<input id="submit-post" type="button" name="" onsubmit="submitform();" value="Post" />
<input type="hidden" id="hidden_field" />
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"></button>
<button id="green" onclick="color2()" class="tooltip color" title="Warning!"></button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"></button>
</div>
</form>