CODEWITHSUNDEEP
javascripthtml
user2536496
user2536496

Reputation: 73

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

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.

Upvotes: 2

Views: 785

Answers (4)

vapcguy
vapcguy

Reputation: 7537

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.

Upvotes: 0

Vahe Yepremyan
Vahe Yepremyan

Reputation: 362

try 

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

}

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

Upvotes: 1

paka
paka

Reputation: 1641

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>

Upvotes: 0

Manoj Yadav
Manoj Yadav

Reputation: 6612

Initialize the myform by getElementById and try, like this

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

Upvotes: 1

Related Questions