Problems With Dynamic Form Using JavaScript and PHP

Question

I'm having trouble with these files, see if you guys can help me out :) I get an object required error..

index.php

<?php 
  //Start session
  session_start(); 
  //Require functions.php
  require("functions.php");
  //Require posts.php
  require("posts.php");
?>
<html>
<body>
<title>Log Into Booking System</title>
  <?php 
    //Call function to display login
    displayLogin();
  ?>
</body>
</html>

posts.php

<?php
if (isset($_POST['sublogin']))
{
    //Check that all fields were typed in and are not null
    if(!$_POST['user'] || !$_POST['pass'])
    {
        //Call function to display error
        printText("Please make sure all required fields are filled in.");
    }
    else
    {
        //Here is some database checking
    }
}
?>

functions.php

<?php   
function displayLogin()
{
    //Break php, then return to PHP
    ?> 
    <h1>Login</h1>
    <form action="" method="post">
    <table align="left" border="0" cellspacing="0" cellpadding="3">
    <tr><td>Username:</td><td><input type="text" name="user" maxlength="30"></td></tr>
    <tr><td>Password:</td><td><input type="password" name="pass" maxlength="30"></td></tr>
    <tr><td><div id='error'></div></td></tr>
    <tr><td colspan="2" align="right"><input type="submit" name="sublogin" value="Login"></td></tr> 
    </table>    
    </form>
    <?
}

function printText($txtmsg)
{
    ?>      
    <!-- Set up the displayError javascript function -->
    <script type="text/javascript">
        function displayError()
        {                   
            document.getElementById('error').innerHTML = <?echo $txtmsg;?>;
        }
    </script>
    <!-- Call function to Display the error -->
    <script type="text/javascript">
        displayError();
    </script>
    <?
}
?>

I'm pretty sure

document.getElementById('error').innerHTML

Is causing me problems, i think it might have to do with how im calling it, like it dosent know what its looking for..

Thanks guys much appreciated,

Jenny

EDIT: Here is the paste of what jQuerybeast tried to do, http://pastebin.com/jj0RVMAd

SOLUTION: Who knew it was this easy? You MUST change the order of where posts.php is required as well as make sure you don't call a javascript function within functions.php because that will execute the javascript above the form and therefore giving a null object error.

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<title>Log Into Booking System</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<?php 
//Start session
session_start(); 
//Require functions.php
require("functions.php");
?>
</head>
<body>
<?php 
//Call function to display login
displayLogin(); 
//Require posts.php
require("posts.php");
?>
</body>
</html>

posts.php

<?php
//POST: Main login page
if (isset($_POST['sublogin']))
{
    //Display error if feilds are not filled in
    if(!$_POST['user'] || !$_POST['pass'])
    {
        echo '<script type="text/javascript">document.getElementById("error").innerHTML = "Please make sure all required fields are filled in.";</script>';
        return false;
    }
    else
    {
        //Some database minipulation here....
        //...
        if ($_POST['user'] != $databaseUsername)
        {
        echo '<script type="text/javascript">document.getElementById("error").innerHTML = "Please make sure your username is correct.";</script>';
        return false;
        }
        elseif($_POST['pass'] != $databasePassword)
        {
        echo '<script type="text/javascript">document.getElementById("error").innerHTML = "Please make sure your password is correct.";</script>';
        return false;           
        }
    }
    return true;
}

?>

functions.php

<?php


//Function: Display main.php login
function displayLogin()
{

    //Break php, then return to PHP
    ?> 
    <div style="float: left; padding: 10px; width:20%;">
    <fieldset>
    <legend>
    <h1>Login</h1>
    </legend>
    <form name = "mainlogin" action="" method="post">
    <table align="left" border="0" cellspacing="0" cellpadding="3">
    <tr><td>Username:</td><td><input type="text" name="user" maxlength="30"></td></tr>
    <tr><td>Password:</td><td><input type="password" name="pass" maxlength="30"></td></tr>
    <tr><td colspan="2" align="left"><input type="checkbox" name="remember">
    <font size="2">Remember username and password</td></tr> 
    <tr><td><div id="error"></div></tr><td>
    <tr><td colspan="2" align="right"><input type="submit" name="sublogin" value="Login"></td></tr> 
    </table>    
    </form>
    </fieldset>
    </div>

    <?php

}

?>

JYelton · Accepted Answer · 2011-08-10 23:15:16Z

1

The first thing I notice is that the PHP-echoed string inside the Javascript function doesn't have quotation marks around it.

Change:

    function displayError()
    {                   
        document.getElementById('error').innerHTML = <?echo $txtmsg;?>;
    }

To:

    function displayError()
    {                   
        document.getElementById('error').innerHTML = "<?echo $txtmsg;?>";
    }

answered Aug 10, 2011 at 23:15

JYelton

36.6k28 gold badges139 silver badges196 bronze badges

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

3 Comments

xoxo Jenny Shu oxox Over a year ago

I'm getting this error now: 'document.getElementById(...)' is null or not an object

JYelton Over a year ago

This can happen if the <div> element with id "error" isn't present on the page at the time the javascript is ran. Another potential issue is that require("posts.php"); is executed before the <head> of the HTML document, and it effectively outputs a <script> section (when some POST values aren't present). This might have some unintended consequences.

xoxo Jenny Shu oxox Over a year ago

I think if you follow my code you will see that <div> is present when the code is ran because i only get an error after hitting submit(thats when i call the javascript function).

jQuerybeast · Accepted Answer · 2011-08-10 23:22:32Z

1

I think the problem is caused from functions.php is because you open and close PHP the opposite way.

Instead of ?>  <?
Try: <?    ?>

Which is this:

function displayLogin()
{
    //Break php, then return to PHP
    <?
    <h1>Login</h1>
    <form action="" method="post">
    <table align="left" border="0" cellspacing="0" cellpadding="3">
    <tr><td>Username:</td><td><input type="text" name="user" maxlength="30"></td></tr>
    <tr><td>Password:</td><td><input type="password" name="pass" maxlength="30"></td></tr>
    <tr><td><div id='error'></div></td></tr>
    <tr><td colspan="2" align="right"><input type="submit" name="sublogin" value="Login"></td></tr> 
    </table>    
    </form>
    ?>
}


function printText($txtmsg)
{
    <?      
    <!-- Set up the displayError javascript function -->
    <script type="text/javascript">
        function displayError()
        {                   
            document.getElementById('error').innerHTML = <?echo $txtmsg;?>;
        }
    </script>
    <!-- Call function to Display the error -->
    <script type="text/javascript">
        displayError();
    </script>
    ?>
}

answered Aug 10, 2011 at 23:22

jQuerybeast

14.6k39 gold badges120 silver badges198 bronze badges

5 Comments

vascowhite Over a year ago

his comment //Break php, then return to PHP would indicate that was intentional. He's leaving PHP, then reentering.

xoxo Jenny Shu oxox Over a year ago

Sorry, i forgot to add the php tags to this post(silly me). Maybe you can find another problem?

jQuerybeast Over a year ago

@vascowhite ahh see what you mean. Sorry, the code wasn't clear posted.

jQuerybeast Over a year ago

@xoxo-jenny-shu-oxox Try <php ?> instead of <?. Some servers don't have short-tags enabled.

xoxo Jenny Shu oxox Over a year ago

@jQuerybeast Short tags work on my server, i have used them before

vascowhite · Accepted Answer · 2011-08-10 23:17:57Z

0

change

 document.getElementById('error').innerHTML = <?echo $txtmsg;?>;

to

document.getElementById('error').innerHTML = '<?= $txtmsg; ?>';

or

document.getElementById('error').innerHTML = '<?php echo $txtmsg; ?>';

answered Aug 10, 2011 at 23:17

vascowhite

18.5k9 gold badges64 silver badges79 bronze badges

2 Comments

xoxo Jenny Shu oxox Over a year ago

The new error i am getting is 'document.getElementById(...)' is null or not an object

vascowhite Over a year ago

I think you need to stop the form submitting for your JS to work. Add onSubmit="return" to your submit button and see if that makes any difference.

j0k · Accepted Answer · 2012-07-13 08:27:08Z

0

Use this

document.getElementById('error').innerHTML = '<?php echo $txtmsg; ?>';

and

It seems short tag is not enabled on your server. Please make sure. Or always use <?php ?> instead of <? ?>

edited Jul 13, 2012 at 8:27

j0k

22.8k28 gold badges81 silver badges90 bronze badges

answered Aug 10, 2011 at 23:36

Manoj

111 bronze badge

11 Comments

xoxo Jenny Shu oxox Over a year ago

Short tags to work, i have used them else where just fine. I am getting a 'document.getElementById(...)' is null or not an object error now.

jQuerybeast Over a year ago

If you are getting a null is because the document past the script yet. Try to put all the JS in function docloaded() { and change the <body> to <body onload="docloaded();">

xoxo Jenny Shu oxox Over a year ago

@jQuerybeast Now im getting two errors that are Object expected as soon as the page finish loading. A null one when i click the button(same error i guess?)

jQuerybeast Over a year ago

Can you update your question or make a fiddle of what you currently have?

xoxo Jenny Shu oxox Over a year ago

@jQuerybeast All i did on index.php was replace <body> with <body onload="docloaded();"> . In functions.php i made a javascript section docloaded() that had the javascript function displayError(){document.getelement....} in it. The call for displayError() was still in printText()

|

Collectives™ on Stack Overflow

Problems With Dynamic Form Using JavaScript and PHP

4 Answers 4

3 Comments

5 Comments

2 Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

2 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related