Adding text to a div with JS, [duplicate]

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
– maysi

2015-07-10 08:30:21 +00:00
Commented Jul 10, 2015 at 8:30 — maysi
– maysi, Commented Jul 10, 2015 at 8:30

Pranav C Balan · Accepted Answer · 2015-07-10 09:09:15Z

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, 2015 at 9:09

answered Jul 10, 2015 at 8:31

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

4 Comments

Bradley Cousins Over a year ago

Neither of these seem to work either

A. Wolff Over a year ago

@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...

Bradley Cousins Over a year ago

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

Pranav C Balan Over a year ago

@BradleyCouisns : then use document.getElementById('log').innerHTML

Bhojendra Rauniyar · Accepted Answer · 2015-07-10 08:33:20Z

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, 2015 at 8:33

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

2 Comments

Bradley Cousins Over a year ago

Hi, either of these work, could this be a problem with how the page is set up

Bhojendra Rauniyar Over a year ago

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...

Collectives™ on Stack Overflow

Adding text to a div with JS, [duplicate]

2 Answers 2

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Linked

Related