tags:

views:

47

answers:

1

Hi there

I am looking for some help. I have found this script that sort of solves my problem 50% - I want to click on a word and delete the word using jquery similar to the example below. If using the example below it will highlight the word that you click on.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; font-weight:bold; cursor:pointer; }
  </style>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script></head>
<body>

<p>
  Once upon a time there was a man
  who lived in a pizza parlor. This
  man just loved pizza and ate it all 
  the time.  He went on to be the
  happiest man in the world.  The end.
</p>
<script>
  var words = $("p:first").text().split(" ");
  var text = words.join("</span> <span>");
  $("p:first").html("<span>" + text + "</span>");
  $("span").click(function () {
    $(this).css("background-color","yellow");
  });
</script>
</body>
</html>

How would I delete/remove the word by clicking on it.

I also found this sample to replace a word with a word.

var el = $('#id');
el.html(el.html().replace(/word/ig, ""));

Is there anybody that can help me tie it together so that when I click on the word it replaces the word. It can also maybe replace the word with something like [Delete] and I can strip it out with a regex on a form submit?

Ok I have sort of figured it out by replacing

$("span").click(function () {
        $(this).css("background-color","yellow");
      });

$("span").click(function () {
    $(this).remove();
  });

This brings me to the next question.

How can I update the results to a form text field?

Updated example from tip below

  <form id="form1" name="form1" method="post" action="spin1.php">
  <p><%=(Recordset1.Fields.Item("g_article_desc_spin").Value)%></p>
<textarea name="myfield" id="myfield" onFocus="this.blur();" cols="45" rows="5"></textarea>
<script>
  var words = $("p:first").text().split(" ");
  var text = words.join("</span> <span>");
  $("p:first").html("<span>" + text + "</span>");
$("span").click(function () { 
    $('myfield').val($(this).remove().parent('p').text()); 
});  
</script> 
      <input type="submit" name="button" id="button" value="Submit" />
  </form>

I am still not sure how to update the value in myfield

+1  A: 

When you say "update the results to a form text field" do you mean you want the deleted word to go to a form text field or the resulting paragraph after the text has been removed? If the former:

$("span").click(function () {
    $('#myfield').val($(this).remove().text());
});

edit - see comment below If the latter:

$("span").click(function () {
    var $p = $(this).parent('p');
    $(this).remove(); 
    $('#myfield').val($p.text());
});
carpie
Thanks Carpie I have updated the question with the latter example. I am still not sure how to update the myfield to update the text in the textarea.... do I need to put a onclick event on the textarea ?
Gerald Ferreira
Just checked the 1st sample you have provided, it updates the textfield with the word that I have clicked on and removes the word from the paragraph. The second example however does remove the word in the <p></p> tags but does not update the text field in the form.
Gerald Ferreira
Oops. I had an order of operation issue. I was removing the element before getting its parent. I updated the example. See if that works for you.
carpie
whoooooaaaaa!!!! Thanks a million Carpie you have saved the day
Gerald Ferreira