HTML Form submit not displaying the javascript output

Question

I wish to have a submit button (for the default form action), and an additional button for a second action.

I have the following code:

<html>
<head><title></title>
<?PHP
$Input = "";
if(isset($_POST['Input'])) $Input = $_POST['Input'];
?>
</head>

<body>
    <FORM id ="form1" method="post">
        Input: <INPUT TYPE = "TEXT" VALUE ="<?php echo $Input;?>" NAME = "Input" SIZE="3">
        <INPUT TYPE = "submit" id = "action1" VALUE = "action 1"> 
        <INPUT TYPE = "button" id = "action2" VALUE = "action 2">
    </FORM>
    <br>

    <script type="text/javascript">
        var form = document.getElementById('form1'); 

        form.onsubmit = function() {
            document.getElementById("php_code_action1").innerHTML="<?php echo "action 1<br>"; ?>";
            document.getElementById("php_code_action2").innerHTML="";
        };

        document.getElementById('action2').onclick = function() 
        {     
            document.getElementById("php_code_action2").innerHTML="<?php echo "action 2<br>"; ?>";
            document.getElementById("php_code_action1").innerHTML="";
        } 
    </script>

    <span id="php_code_action1"> </span>
    <span id="php_code_action2"> </span>

</body>
</html>

A click on the Action2 button works as I expect, but a click on "Action1" button has the page refresh and the output of action1 disappear.

Why is there a refresh, and how can I show the output of action1?

This is a rather confused question. Is it about HTML, Javascript or PHP? Can you narrow down your question to one technology please? — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Feb 20, 2011 at 14:53
You are right: I was confused. Problem was either html or javascript (not php). Turned out you gave a fix on the javascript part. Thanks for your help. — Timothée HENRY
– Timothée HENRY, Commented Feb 20, 2011 at 15:01

delphist · Accepted Answer · 2011-02-20 14:54:37Z

4

form.onsubmit = function() {
    document.getElementById("php_code_action1").innerHTML="<?php echo "action 1<br>"; ?>";
    document.getElementById("php_code_action2").innerHTML="";
    return false;
};

answered Feb 20, 2011 at 14:54

delphist

4,5591 gold badge24 silver badges22 bronze badges

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

Comments

Lightness Races in Orbit · Accepted Answer · 2011-02-20 14:53:47Z

1

You can write return false; in your onsubmit handler to prevent the usual action, i.e. form submission. Then the page shouldn't "refresh".

answered Feb 20, 2011 at 14:53

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

Collectives™ on Stack Overflow

HTML Form submit not displaying the javascript output

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related