Home/ Questions/Q 846485
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T06:37:17+00:00

I’m working on a little parsing thing to color objects. For an example, you

  • 0

I’m working on a little parsing thing to color objects.
For an example, you could type red:Hi!: and “Hi!” would be red.

This is my not working code:

<script type="text/javascript">
function post()
{
    var preview = document.getElementById("preview");
    var submit = document.getElementById("post");
    var text = submit.value;
    <?php str_replace("red:*:",'<i class="red">*</i>',text); ?>
    preview.value = text;
}
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have at least two massive problems here.

    1. You can’t str_replace with wildcards like you are (the asterisks you use are just that – the asterisk character, not a placeholder).

    2. Your idea of the page-rendering process is off – you can’t just call some PHP code in JavaScript and have it update the page. Any PHP code will be executed and printed when your page is generated on the server – it can’t interact with the page like JavaScript can (JS can because it is executed within the browser, but the browser never actually sees your PHP code as you can check by going to View->Source and seeing what you see). You certainly cannot reference a JavaScript variable from PHP.

    Two options.

    Option 1 – Proper Server-Side

    if you want to colour objects on page load based on post, do something like this:

    <?php 
  # If the value was posted
  $raw = isset($_POST['userstring']) ? $_POST['userstring'] : "";
  # Split it based on ':'
  $parsed = explode(':', $raw);

  $colorClass = "";
  $text = "";

  if (count($parsed) >= 2)
  {
    $colorClass = $parsed[0];
    $text = $parsed[1];
  }

?>

<form action="" method="post">
  <input type="text" name="userstring" value=""/>
  <input type="submit" value="Submit" />
</form>

<div id="preview">
<?php if (strlen($text) > 0) { ?>
  <i class="<?php echo $colorClass; ?>">
    <?php echo $text; ?>
  </i>
<?php } ?>
</div>

    Option 2 – Proper Client-Side

    Include jQuery in your <head> tag to make your life easier. If you really don’t want to include jQuery you can still change the jQuery calls to your getElementById etc. (you’ll want to replace the html() call with ‘.innerhtml’ I think – just look it up). 

    <script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

<script type="text/javascript">                           
  function post() {                 
    var split = $('#userinput).val().split(separator, limit)        
    if (split.length >= 2) {     
      var color = split[0];              
      var text = split[1]; 
      $('#preview').html('<i class="' + color + '">' + text + '</i>');    
    }
    return false; // Stop form submit
  }                           
</script> 

<form action="" method="post" onsubmit="post()">
  <input id="userinput" type="text" name="userstring" value=""/>
  <input type="submit" value="Submit" />
</form>
<div id="preview">
</div>
</body>
    • 0