Switch button onsubmit

Question

How do i switch one button off and another on, onsubmit. Just like when someone sends a friend request to another on facebook. When the user click on send friend request, the button then changes to friend request sent. here's my html. how do i do that with jquery or ajax

<tr>
          <td bgcolor="#eaeaea"><div align="center" id="send_msg">
            <input type="submit" name="button3" id="button3" value="Send Message" />
          </div></td>
          <td bgcolor="#eaeaea"><div id="msg_sent">
            <input type="submit" name="button2" id="button2" value="Message Sent" />
          </div></td>
        </tr>

possible duplicate of [Disable submit button on form submit](http://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit) — emerson.marini, Jun 24 '14 at 10:38
Do you mean that after submitting the send message button,you need the text of the button to be "Message Sent" — Techy, Jun 24 '14 at 10:41

score 0 · Answer 1 · answered Jun 24 '14 at 10:45

You can catch "submit" event in the forms events (need a bit of JS, also possible with JQuery).

See this: http://www.w3schools.com/jsref/event_form_onsubmit.asp

In your onsubmit JS function you'd typically change object properties that need to be changed (hide buttons, enable/disable etc.)

It is, however, possibly better to include one DIV (with ID) where you can show status (e.g. "message has been sent") and enable/disable send button, but that is rather a matter of your design decisions.

score 0 · Answer 2 · answered Jun 24 '14 at 10:53

0

I think you mean that after the form submit,you need to change the value of the button.If it is like this,you can do the ajax stuff for sending the message and do like this

<tr>
      <td bgcolor="#eaeaea"><div align="center" id="send_msg">
        <input type="submit" name="button3" id="button3" value="Send Message" />
</tr>

jquery:

$("#button3").click(function(){
    $.(ajax)({
              ..........

     }).done(function(){
    $("#button3").val("Message sent");
  });

});

This will change the button text of send message button and you actually require only one button

answered Jun 24 '14 at 10:53

Techy

2,626
7
41
88

when i click nothing happens – user3744646 Jun 24 '14 at 11:05
if nothing happens means,the ajax section is not right.The button text will only change when the ajax call is success. – Techy Jun 24 '14 at 11:07
@user3744646 better put the $("#button3").val("Message sent"); alone inside the button click without the ajax section.If it works means,the error is with the ajax section – Techy Jun 24 '14 at 11:13

Switch button onsubmit

2 Answers2