Javascript form.submit() fails and stops rest of javascript code from executing

Question

I have a basic web page using HTML and javascript designed to run a simple chat program. The one part of the page I can't get functioning properly is to clear the message field of the form when submitting a message. When you submit a message, the information is sent via post data to a page within an iframe on the current page, but I can't seem to get it to both submit and clear the one specific textbox. I've managed to work the code that clears the box, but submitting it messes everything up. I want to submit first, because if I clear the textbox then submit it, the message will be empty, however, there seems to be an error whenever I use the form.submit() function in javascript, and as soon as it hits that line, none of the other code will execute. I've tried returning the value of form.submit() in an alert, and it always says undefined (that is whether I put the command in the alert, or output it to a variable first). Here's my code:

<html>
<script language="javascript">
    function cleartxt()
    {
        myform.text.value = "";
        myform.submit();
    }
</script>
<body bgcolor="#999999">
    <form name="myform" id="myform" action="chatcontent.php" method="post" target="chatwindow" onsubmit="cleartxt();">
        <table border="0">
            <tr><td><font color="#FFFFFF"><b>Name:</b></font></td>
            <td><input type="text" name="name" maxlength="20"></td></tr>
            <tr><td><font color="#FFFFFF"><b>Color:</b></font></td>
            <td><input type="text" name="color"></td></tr>
            <tr><td><font color="#FFFFFF"><b>Message:</b></font></td>
            <td><input type="text" name="text" size="100%" autofocus="autofocus"></td>
            <td><input type="submit" name="btnsubmit" value="Submit"></td></tr>
        </table>
    </form>
    <iframe width="100%" height="80%" name="chatwindow" src="/chatcontent.php">
</body>

This shows the submit function being used after clearing the textbox. In this form, it just clears the textbox and does nothing else. If I swapped the two lines, it would just submit the form without clearing the text.

Do you see any error logged into Chrome Dev Tools / Firebug? — Dogbert
– Dogbert, Commented Jun 30, 2013 at 13:26
I don't think you'll be able to make this work this way. submit will be the last action performed - after that the page is reloading, so you can't clear your text after submit, and clearing it before submits a blank message. An AJAX approach to submitting messages will probably work, if you combine it with an Ajax system to update your iframe. — user1864610
– user1864610, Commented Jun 30, 2013 at 13:34
I just got Firebug and I don't know how to see errors. It didn't throw any at me that were immediately obvious. — user2536496
– user2536496, Commented Jun 30, 2013 at 13:37
@MikeW Note that the form's submit action has action="chatcontent.php" and target="chatwindow". It's submitting to an iframe, but the current page is still unchanged. I don't think it should be reloading when the submit button is pressed. — user2536496
– user2536496, Commented Jun 30, 2013 at 13:40
@user2536496 The page load is going on in the iframe. The old page is no longer executing after a submit. You can send the data via AJAX and then clear the text, but that will require a different architecture. — user1864610
– user1864610, Commented Jun 30, 2013 at 13:56

Manoj Yadav · Accepted Answer · 2013-06-30 13:33:04Z

1

Initialize the myform by getElementById and try, like this

var myform = document.getElementById('myform');

answered Jun 30, 2013 at 13:33

Manoj Yadav

6,6121 gold badge25 silver badges21 bronze badges

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

Comments

Vahe Yepremyan · Accepted Answer · 2013-06-30 14:15:23Z

1

try

function cleartxt()
{
    myform.text.value = "";

}

<iframe width="100%" height="80%" name="chatwindow" onload="cleartxt()" src="/chatcontent.php">

edited Jun 30, 2013 at 14:15

answered Jun 30, 2013 at 14:06

Vahe Yepremyan

3622 silver badges5 bronze badges

Comments

paka · Accepted Answer · 2013-06-30 13:46:56Z

0

Give to inputs you wish to clear some class, "clear-this" for example. Then use this script:

<script>
   var inputs = document.getElementsByClass('clear-this');
   for (var i = 0; i < inputs.length; i++ ) {
       inputs[i].value = '';
   }
</script>

answered Jun 30, 2013 at 13:46

paka

1,64122 silver badges35 bronze badges

Comments

vapcguy · Accepted Answer · 2015-03-24 22:29:47Z

0

Instead of:

function cleartxt()
{
    myform.text.value = "";
    myform.submit();
}

You could save off the value and put it into a hidden field that will submit with your form:

function cleartxt()
{
    myform.text.txtHidField.value = myform.text.value;
    myform.text.value = ""; 
    myform.submit();
}

And this goes in your form:

<input type=hidden id=txtHidField />

It's just, then, you'll have to switch out which field that chatcontent.php is expecting to get the value. Or just name the hidden field 'text' and set the textbox they are typing in to something like 'txtType', and you wouldn't have to change it.

answered Mar 24, 2015 at 22:29

vapcguy

1

Collectives™ on Stack Overflow

Javascript form.submit() fails and stops rest of javascript code from executing

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related