クリックされたときにフォームのボタンを変更する方法

debugcn 投稿 Dev

ヨンハリー

次のフォームがあります。「参加」ボタンをクリックすると、削除ボタンに変わります。テキストを削除して、その機能を変更したいと思います。

これは私のコードです：

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

クラス名でボタンをvarxに取得し、を使用してx内のアイテムを取得しましたx[i]が、テキストコンテンツを変更しようとしても変更されません。ただし、背景色を赤に設定すると、完全に機能します。

私は何を間違えましたか？

FluffyKitten

更新：ボタンのテキストを変更する

ボタンを作成すると、変更するテキストが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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]