How to change the button of a form when it is clicked

Question

I have the following form and after the "Join" button is clicked, it should change to a delete button. I want to change the text to say delete and change what it does.

This is my code:

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

I have get the button by class name into var

x

and grab an item inside the x using

x[i]

, but when I try to change the text content it doesn't change. However, when I set the background colour to red, it works perfectly.

What have I done wrong?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

UPDATE: Change the Button Text

When you create the button, you can see that the text you want to change is in the value attribute:

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

so this is what you want to change - not the textContent e.g.

  x[i].value = "Delete";

UPDATE: Change the Form action

To also change the action, first you'll need to add an id to your form so we can find in it the javascript, e.g.

<form action="riderJoin.php" method="post" id="subscriptionform">

And then in the javascript, you can get it and change the action like this:

var formelement = document.getElementById('subscriptionform');
formelement.action = "newAction.php"; // set the action to whatever page you want

Working example: click the button to change the text and the new action will also be displayed

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>

How to change the button of a form when it is clicked

Sign up