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?

Please edit your question to include the HTML that has the element itself so we can understand whats going wrong. It would also help if yo ucould add it as a working snippet, see [How to create a runnable code snippet](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) — FluffyKitten, Oct 01 '17 at 07:10
I have added some html code for better understanding. Thanks for your kind reminder. — Yeung Harry, Oct 01 '17 at 07:15
You need to change the x[i].value, not x[i].textContent - see my answer for an explanation and a working demo. If that solves your problem, consider accepting it so your question gets closed (And we both get some rep points :) See [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) — FluffyKitten, Oct 01 '17 at 07:25

A. Iglesias · Answer 1 · 2017-10-01T07:25:56.977

0

You can do it with jquery in just one line...

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

I hope it helps

edited Oct 01 '17 at 07:25

answered Oct 01 '17 at 07:19

A. Iglesias

2,625
2
8
23

You shouldn't use .css() but .addClass() instead – Pauloscorps Oct 03 '17 at 15:19

FluffyKitten · Accepted Answer · 2017-10-01T08:11:00.943

0

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>

edited Oct 01 '17 at 08:11

answered Oct 01 '17 at 07:20

FluffyKitten

13,824
10
39
52

Thanks a lot for your help ! So, what if I want to append a new element (another button) instead of just changing the value of that input? :D – Yeung Harry Oct 01 '17 at 07:30
@YeungHarry well that's a different question, so technically you should ask it as a new question, but let me know what you mean and I'll see if it fits within the scope of this one. What exactly are you trying to achieve? Do you want to change the action of the "Join" button to another function? Or do you want to remove the "Join button" and add a new one? Or add another button *and* keep the "Join" button? – FluffyKitten Oct 01 '17 at 07:41
I would like to remove the "join" button and try to add a "delete" button which can trigger another action – Yeung Harry Oct 01 '17 at 07:45
@YeungHarry Why not just keep the existing button and just change the action? I'll update my answer to do that because your question can be updated so its still applicable. – FluffyKitten Oct 01 '17 at 07:48
@YeungHarry I've updated my answer. Obviously I can't show you the change action fully because we can't submit the form, but I've added a test function the gets and displays the form action so that you can see that it changes. – FluffyKitten Oct 01 '17 at 08:12
What if I really want to prepend a new "delete" button (with a new action) right before the "join" button ? What should I do？ – Yeung Harry Oct 01 '17 at 09:07
@YeungHarry Well, you can prepend another button, but a form can only have one action regardless of how many buttons it has, so you'd still need to change the action through Javascript in the same way. If you want to add an additional button, take a look at the code in this question: https://stackoverflow.com/questions/17650776/add-remove-html-inside-div-using-javascript – FluffyKitten Oct 01 '17 at 09:16

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

2 Answers2