![](/img/trans.png)
[英]How to change the color of a button when clicked, and when other button is clicked
[英]How to change the button of a form when it is clicked
我具有以下形式,并且在单击“加入”按钮后,应将其更改为删除按钮。 我想更改文本以说删除并更改其功能。
这是我的代码:
<form action="riderJoin.php" method="post">
<input type ="hidden" name = id value="<?php echo $row['post_id']; ?>" >
<input type =submit class="edit_btn " name = "submit" value = "Join">
</form>
<script type="text/javascript">
var x = document.getElementsByClassName('edit_btn');
<?php if (isset($_POST['submit'])) { ?>
var i = <?php echo $_SESSION['postId'] ; ?> - 1 ;
var y = x[i];
x[i].textContent = "Delete";
x[i].style.backgroundColor = "red";
x[i].style.color = "white";
<?php }?>
</script>
我已经按类名将按钮获取到var x
并使用x[i]
在x中抓取了一个项目,但是当我尝试更改文本内容时,它没有改变。 但是,当我将背景色设置为红色时,效果很好。
我做错了什么?
您可以使用jquery在一行中完成此操作...
$('input.edit_btn').eq(i).val('Delete').css({ 'background-color':'red', 'color':'white' });
希望对您有所帮助
更新:更改按钮文本
创建按钮时,可以看到要更改的文本位于value
属性中:
<input type =submit class="edit_btn" name = "submit" value = "Join">
所以这就是您要更改的内容-不是textContent
例如
x[i].value = "Delete";
更新:更改窗体操作
要同时更改操作,首先需要在表单中添加一个ID,以便我们可以在其中找到JavaScript,例如
<form action="riderJoin.php" method="post" id="subscriptionform">
然后在javascript中,您可以获取它并更改操作,如下所示:
var formelement = document.getElementById('subscriptionform');
formelement.action = "newAction.php"; // set the action to whatever page you want
工作示例 :单击按钮更改文本,新操作也将显示
function changebutton() { // get the button and change it var x = document.getElementsByClassName('edit_btn'); x[0].value = "Delete"; x[0].style.backgroundColor = "red"; x[0].style.color = "white"; // change the action of the form var formelement = document.getElementById('subscriptionform'); formelement.action = "yourNewAction.php"; // Just for testing - gets the form action & displays it updateStatusText(); } // Just for testing - gets the form action & displays it function updateStatusText(){ var formelement = document.getElementById('subscriptionform'); currentaction = formelement .action; var textelement = document.getElementById('actiontext'); textelement.innerText= "The form action is: "+currentaction; } updateStatusText();
<form action="yourAction.php" method="post" id="subscriptionform"> <input type=submit class="edit_btn " name="submit" value="Click Me..." onclick="changebutton(); return false;"> </form> <p id="actiontext"></p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.