如何更改點擊時窗體的按鈕

我有以下窗體，單擊「加入」按鈕後，它應該更改爲刪除按鈕。我想改變文字來說刪除並改變它的功能。如何更改點擊時窗體的按鈕

這是我的代碼：

<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內的項目，但是當我試圖改變文本內容它不更改。但是，當我將背景色設置爲紅色時，它完美地起作用。

我做錯了什麼？

來源

2017-10-01 Yeung Harry

請編輯您的問題，以包含具有元素本身的HTML，以便我們可以瞭解發生了什麼問題。如果你可以將它添加爲工作片段，這也會有所幫助，請參閱 [如何創建可運行的代碼段]（https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and- html-code-snippets /） – FluffyKitten

爲了更好的理解，我添加了一些html代碼。感謝您的友好提醒。 –

您需要更改x [i] .value，而不是x [i] .textContent - 請參閱我的答案以獲取解釋和工作演示。如果這解決了你的問題，考慮接受它，這樣你的問題就會被關閉（並且我們都得到了一些重要的觀點:)參見[當某人回答我的問題時該怎麼辦？]（https://stackoverflow.com/help/someone-答案） – FluffyKitten

更新：當您創建按鈕更改按鈕文本

，您可以看到要更改的文本位於value屬性中：

<input type =submit class="edit_btn" name = "submit" value = "Join">

所以這是你想改變 - 而不是textContent例如

x[i].value = "Delete";

UPDATE：變更表單動作

如果還要改變行動，首先你需要一個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>

來源

2017-10-01 07:20:32 FluffyKitten

非常感謝您的幫助！那麼，如果我想追加一個新元素（另一個按鈕）而不是僅僅改變輸入的值呢？：D –

@YeungHarry好吧，這是一個不同的問題，所以從技術上講，你應該把它作爲一個新問題，但讓我知道你的意思，我會看看它是否在這個範圍內。你究竟想達到什麼目的？你想改變「加入」按鈕的動作到另一個功能嗎？或者你想刪除「加入按鈕」並添加一個新的？或者添加另一個按鈕*和*保持「加入」按鈕？ – FluffyKitten

我想刪除「加入」按鈕，並嘗試添加一個「刪除」按鈕，可以觸發另一個行動 –

你可以在短短一行用jQuery做...

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

我希望它能幫助

來源

2017-10-01 07:19:08

您不應使用.css（），而應使用.addClass（）而不是 – Pauloscorps

如何更改點擊時窗體的按鈕

回答

相關問題