フォームのボタンをクリックしたときのボタンの変更方法

Question

以下のフォームがあります。「参加」ボタンをクリックすると、削除ボタンに変わります。私は削除を言うためにテキストを変更し、それが何をするかを変えたいと思う。

これは私のコードです：

<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内のアイテムをつかむありますが、私は、テキストの内容を変更しようとすると、そうでありません変化する。しかし、背景色を赤に設定すると、完全に機能します。

どうしたのですか？

Answer 1

UPDATE：あなたがボタンを作成するとボタンテキスト

を変更し、変更したいテキストがvalue属性であることがわかります。

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

これはあなたが変更したいものです。textContentではなくです。

x[i].value = "Delete"; 

UPDATE：最初に、例えば、我々はそれでJavaScriptを見つけることができるように、フォームにIDを追加する必要があります、またアクションを変更するにはフォームのアクションに

を変更

<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>

012を表示することが

Answer 2

あなただけの1行でjQueryを使ってそれを行うことができ

...

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

が、私はそれが役に立てば幸い