如何在单击时更改表单的按钮

时间:2017-10-01 07:06:35

标签: javascript php jquery html css

我有以下表格,单击“加入”按钮后,它应该更改为删除按钮。我想将文本更改为删除并更改其内容。

这是我的代码:

<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中获取项目,但是当我尝试更改文本内容时,它不会更改。但是,当我将背景颜色设置为红色时,它可以完美地工作。

我做错了什么?

2 个答案:

答案 0 :(得分:0)

你可以用jquery只用一行......

$('input.edit_btn').eq(i).val('Delete').css({ 'background-color':'red', 'color':'white' });

我希望它有所帮助

答案 1 :(得分:0)

更新:更改按钮文字

创建按钮时,您可以看到要更改的文本位于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


工作示例:点击按钮更改文字,同时也会显示新动作

&#13;
&#13;
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();
&#13;
<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>
&#13;
&#13;
&#13;