multiple functions in same button in HTML

Question

I am very beginner to HTML and javascript, so looking for some help. I have a form and it has a submit button. When i click on the submit button the name of the button will change and it will do some action. when i click on the button again i have to do different actuion. Here is my code.

HTML:

        <form name="myform" method="post" onsubmit="return false">

        <input type="submit" id="reschedule" value="reschedule" onclick="changeContent()"/>

Javascript is :

        function changeContent(ref){
        alert(id)
        document.getElementById("reschedule").value="Submit"
        var editables = document.getElementsByClassName('editableText');
        for (var i = 1; i < editables.length; i++) {
            var newstate = !editables[i].isContentEditable;
            editables[i].contentEditable = newstate;
            editables[i].bgcolor='#FF0000'
        }
        if (document.getElementById("Submit").click) {
            alert("submit")
        }
    }

So when i click on reschedule the button name will change to submit. Now when i need to click on submit function i need to do some action. How can i do this.

when you use submit button the page will get refreshed and it wont meet your requirement. try replacing with button — Hary
– Hary, Commented Feb 12, 2013 at 7:11
i think you can use click count and on the basis of that use if condition. — Kingk
– Kingk, Commented Feb 12, 2013 at 7:22

user1645055 · Accepted Answer · 2013-02-12 07:12:56Z

1

you should return false; at the end of function so that your page will not refresh and you can do any thing on same page. use following javascript code

        function changeContent(ref){
        alert(id)
        document.getElementById("reschedule").value="Submit"
        var editables = document.getElementsByClassName('editableText');
        for (var i = 1; i < editables.length; i++) {
            var newstate = !editables[i].isContentEditable;
            editables[i].contentEditable = newstate;
            editables[i].bgcolor='#FF0000'
        }
        if (document.getElementById("Submit").click) {
            alert("submit")
        }
        return false;
    }

answered Feb 12, 2013 at 7:12

user1645055

Sign up to request clarification or add additional context in comments.

Comments

Pedro Rodrigues · Accepted Answer · 2013-02-12 07:13:50Z

0

The first solution that comes to my mind is checking the name of the button and do some action depending on that value. For example:

function changeContent(ref){
    if(document.getElementById("reschedule").value == "reschedule") {
        alert(id)
        document.getElementById("reschedule").value="Submit"
        var editables = document.getElementsByClassName('editableText');
        for (var i = 1; i < editables.length; i++) {
            var newstate = !editables[i].isContentEditable;
            editables[i].contentEditable = newstate;
            editables[i].bgcolor='#FF0000'
        }
    }
    else if(document.getElementById("reschedule").value == "Submit") {
        // do something else
    }
}

Is this what you are looking for?

answered Feb 12, 2013 at 7:13

Pedro Rodrigues

4245 silver badges16 bronze badges

2 Comments

user2058205 Over a year ago

yes i changed to button and it is working perfect.. Thanks for the help

user2058205 Over a year ago

I am using the button. but How i will submit the form if am using button. i have to change the document.form.action based on the button clicked. i know its little tricky but...

Devang Rathod · Accepted Answer · 2013-02-12 07:20:56Z

0

should be :

function changeContent()
{
    document.getElementById("reschedule").value = "Submit";
    var editables = document.getElementsByClassName('editableText');
    for (var i = 1; i < editables.length; i++) 
    {
        var newstate = !editables[i].isContentEditable;
        editables[i].contentEditable = newstate;
        editables[i].bgcolor='#FF0000'
    }
    if (document.getElementById("reschedule").value = "Submit") 
    {
       document.getElementById("reschedule").onclick=function(){
            alert('Hello this submit button click event');
       };
    }
}

answered Feb 12, 2013 at 7:20

Devang Rathod

6,7342 gold badges25 silver badges32 bronze badges

1 Comment

Pedro Rodrigues Over a year ago

I believe you wanted to make a comparison in the if statement, not an assignment.

arvin_codeHunk · Accepted Answer · 2013-02-12 08:43:32Z

0

Try to use buttons, once you submitted by clicking the submit button, then the page will be refreshed along with your action try to use button

update your button

 <input type="button" id="reschedule" value="reschedule" onclick="changeContent()"/>

then change your java script function like this

  function changeContent(ref){
        alert(id)
        document.getElementById("reschedule").value="Submit"
        var editables = document.getElementsByClassName('editableText');
        for (var i = 1; i < editables.length; i++) {
            var newstate = !editables[i].isContentEditable;
            editables[i].contentEditable = newstate;
            editables[i].bgcolor='#FF0000'
        }

        if (document.getElementById("Submit").click) {
            alert("submit");
             return true;
        }
        return false;
    }

Update Setion :

You can call your action using Button like this in javascript function:

 document.your_form_name.action = "your_action_name";
 document.your_form_name.submit();

edited Feb 12, 2013 at 8:43

answered Feb 12, 2013 at 7:17

arvin_codeHunk

2,4108 gold badges35 silver badges48 bronze badges

1 Comment

user2058205 Over a year ago

I am using the button. but How i will submit the form if am using button. i have to change the document.form.action based on the button clicked. i know its little tricky but...

Collectives™ on Stack Overflow

multiple functions in same button in HTML

4 Answers 4

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related