form submit only running Javascript function for a second

Question

I have two forms here, the first is a select dropdown select, which when posted generates another form, creating an amount input boxes based on the number selected. This second form then puts the data from the input boxes into 2 array. All this works perfectly but I am trying to add extra functionality to the submit button on the second form. I created a function 'showcontet()' to show and hide the content in the div with id 'table'. This works perfectly when used on a button outside of the form. When used on the submit button inside the form you can see the content for about 1 second before it then disappears again.

    <head>
      <script type="text/javascript">
           showcontent = function(){
              var content = document.getElementById('tabl');
              content.style.display = 'inline';
           }

      </script>
        <?php 
    $userkey = array();
    $userval = array();
    $usernum = $_POST['usernum'];
    $total = 0;
    ?>


        <form action='MYPIE.PHP' method='POST'>
                HOW MANY SECTIONS?
                    <select name="usernum" value="<?php echo $usernum;?>">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                          <option>7</option>
                          <option>8</option>
                          <option>9</option>
                    </select>
                <input type="submit" name="submitnum" value="submit selection" />
        </form>


    <form action='MYPIE.PHP' method='POST'>     
        <?php 
            for ($i=1; $i<$usernum+1; $i++){
                echo '<input type="hidden" value="' .$usernum.'" name="usernum" />';
                echo "<br>insert key:   <input name='key".$i."' value='".$userkey[$i]."'>   insert value:   <input name='val".$i."' >";

            $userkey[$i] = $_POST["key".$i];
            $userval[$i] = $_POST["val".$i];
            }

        ?>
        </br>
        <input type="submit" value="submit" name="submit keys" onclick="showcontent()" />
    </form>

    </table>


    <div id="tabl" style="display:none;">
    content
    </div>

Apologies for the bad indentation, I am pretty new to this & thanks for any help

Sorry if the explanation didn't make sense. I am not trying to stop the form submitting, I am trying to get it to submit the data and run the showcontent() at the same time — Kza
– Kza, Commented Jul 6, 2012 at 12:50
If you submit the form it will send a server request, so the page MYPIE.PHP will load. If you want to run showcontent() to change some div content and also submit the form, you should use ajax. — Angel
– Angel, Commented Jul 6, 2012 at 13:00

SLaks · Accepted Answer · 2012-07-06 12:26:34Z

2

You need to return false from the event handler to prevent the browser from submitting the form and loading the page.

answered Jul 6, 2012 at 12:26

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

1 Comment

Th 00 mÄ s Over a year ago

Probably better if you use an e.preventDefault(). fuelyourcoding.com/jquery-events-stop-misusing-return-false

Reinder Wit · Accepted Answer · 2012-07-06 13:23:26Z

0

make your second button not a 'submit' button but a regular 'button' else it will fire the submit of the form...

or

set the 'showcontent()' function on the forms 'onsubmit' event and let that function return false:

onsubmit="return showcontent()"

function showcontent(){
    var content = document.getElementById('tabl');
    content.style.display = 'inline';

    $.ajax({
        type: "POST",
        url: "MYPIE.PHP",
        data: { usernum: $("select[name='usernum'] option:selected").val() }
        }).done(function() {
            alert('data posted');
    });

    return false;
}

edited Jul 6, 2012 at 13:23

answered Jul 6, 2012 at 12:27

Reinder Wit

6,6551 gold badge29 silver badges42 bronze badges

6 Comments

Kza Over a year ago

thanks! I tried onsubmit but it didn't do anything, changed that to onclick and everything works perfect thanks!

Kza Over a year ago

bit premature there. This stops the form submitting at all, I am needing it to submit the form data and run showcontent()

Reinder Wit Over a year ago

then what's the use of showing that div, if you actually want to post the form and make a new request to the server? removing the 'return false;' should be enough then...

Kza Over a year ago

The div actually contains a table that is filled from the arrays that are populated by the form when submitted. I left this out the code to keep it simpler. Some parts of the table are already generated before form so thats why I have it hidden. So basically I wanted the submit button to populate the arrays and show the table (the div) when clicked. Taking out 'return false' just goes back to as before, when the div shows up for a second then dissapears

Reinder Wit Over a year ago

that's what happens when you submit the form: the data is posted and the HTML is reloaded. So that's why the div will only show up for a second... If you do not want the page to reload, you should post the data using AJAX, that way you can show the div and have the data processed in the background.

|

Th 00 mÄ s · Accepted Answer · 2012-07-06 12:31:39Z

0

You need add e.preventDefault(); to the event handler to prevent the browser from submitting the form and loading the page.

Don´t use return false as this is other sideeffects you might not want. see http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

answered Jul 6, 2012 at 12:31

Th 00 mÄ s

3,8261 gold badge29 silver badges49 bronze badges

Collectives™ on Stack Overflow

form submit only running Javascript function for a second

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related