Adding text to a div with JS,

Question

I have a simple login register form, when the user types in the wrong email then they are shown text saying "Email in use" however this text is done with a php echo and therefore i am unable to edit its styling and positioning. The only way i can think of is to use javascript instead of the php echo so that i can output the message to another div which is already styled. I want to output the message into the div id #log. I have tried $('#log').innerHTML = 'Your text.'; however this is not working.

Here is my code :

<?php
session_start();
include_once 'authentication/dbconnect.php';

if(isset($_SESSION['user'])!="")
{
 header("Location: account.php");
}
if(isset($_POST['btn-login']))
{
 $email = mysql_real_escape_string($_POST['email']);
 $upass = mysql_real_escape_string($_POST['pass']);
 $res=mysql_query("SELECT * FROM users WHERE email='$email'");
 $row=mysql_fetch_array($res);
 if($row['password']==md5($upass))
 {
  $_SESSION['user'] = $row['user_id'];
  header("Location: account.php");
 }
 else
 {
  ?>
       <script>$('#log').innerHTML = 'Your text.';</script>



        <?php
 }

}
?>

<!DOCTYPE html>
<html>
<HEAD>
<title>Website | Loign</title>
<?php include "includes/page_sources.php"; ?>

</HEAD>
<body>


<?php include "includes/navigation.php"; ?> 

<div id="wrapper">

<div id="log"></div>



<div id="login-form">
    <form method="post">
        <input type="text" name="email" placeholder="Your Email" required />
        <input type="password" name="pass" placeholder="Your Password" required />
        <button type="submit" name="btn-login">Log In</button>
        <a href="register.php">Sign Up</a>
    </form>
</div>



</div>

<?php include "includes/footer.php"; ?>


</body>
</html>

In jquery it's .html("...") not innerhtml. Try this :) – maysi Jul 10 '15 at 08:30 — maysi, Jul 10 '15 at 08:30

Pranav C Balan · Accepted Answer · 2015-07-10T09:09:15.880

2

You need to add jquery library to work with jQuery

Use $('#log')[0].innerHTML or $('#log').html(content) or use pure javascript as document.getElementById('log').innerHTML

$(document).ready(function() {
  //wrap code with document ready handler for executing code only after dom is ready

  $('#log')[0].innerHTML = '1';
  //[0] will return dom object

  $('#log1').html('2');
  //html() is the method that can apply to jQuery object

  document.getElementById('log2').innerHTML = '3';
  //pure javascript without jQuery
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- add jQuery library reference -->

<div id="log"></div>
<div id="log1"></div>
<div id="log2"></div>

edited Jul 10 '15 at 09:09

answered Jul 10 '15 at 08:31

Pranav C Balan

113,687
23
165
188

Neither of these seem to work either – Bradley Cousins Jul 10 '15 at 08:32
@BradleyCouisns Maybe because you are calling it before element is available in the DOM or you don't have any element with ID `log`, or etc... Who knows... – A. Wolff Jul 10 '15 at 08:33
Hi, Im not able to include the jquery library because the php has to be at the top of the page and that means that so does the jquery, and none of the code works if it is before the header tag. If i put the php below of the page then i get a warning: session_start(): Cannot send session cookie error – Bradley Cousins Jul 10 '15 at 09:02
@BradleyCouisns : then use `document.getElementById('log').innerHTML` – Pranav C Balan Jul 10 '15 at 09:09

score 0 · Answer 2 · answered Jul 10 '15 at 08:33

0

$('#log').innerHTML = 'Your text.';

Here $('#log') is a jquery element and you can't use javascript way in that So, this should work fine. $('#log')[0].innerHTML = 'Your text';. Using [0] converts the jquery element to javascript.

But preferred way to do it with just jQuery using html:

$('#log').html('Your text');

answered Jul 10 '15 at 08:33

Bhojendra Rauniyar

83,432
35
168
231

Hi, either of these work, could this be a problem with how the page is set up – Bradley Cousins Jul 10 '15 at 08:35
if you place your script before the html element then you may face problem but not if you use script after the element. If you use script in head then you may use $(document).ready() handler... – Bhojendra Rauniyar Jul 10 '15 at 08:37

Adding text to a div with JS,

2 Answers2