[SOLVED] strikethrough text to normal text (onclick)

technotool · May 17, 2008

I am looking for a conceptual start to create a function that can take an onclick event and turn normal text to strikethrough text and vice versa. If the text is normal when I hit submit it should send it to the php_processing.php file. much thanks in advance for your ideas. tt

Psycho · May 17, 2008

I thought I understood your post at first, but then the aprt that states "If the text is normal when I hit submit it should send it to the php_processing.php file" throws a wrench into things.

Are these input fields? If so, what is initiating the onclick event, a button? If he onsubmit is triggered and tehre are fields that have the strike-through property do you want to prevent submission of the form or only "blank out" the fields that have the strikethrough property?

Here's a quick example for one interpretation of your request

<html>
<head>
<script type="text/javascript">

function strikeText(fieldID) {
    fieldObj = document.getElementById(fieldID);
    var style = (fieldObj.style.textDecoration!='line-through')?'line-through':'none';
    fieldObj.style.textDecoration = style;
    return;
}

function  parseStrikeText(formFields) {

    for (var i=0; i<formFields.length; i++) {
        if (formFields[i].style.textDecoration=='line-through') {
            formFields[i].value='';
        }
    }

    return true;

}

</script>
</head>
<body>
<form name="test" action="php_processing.php" onsubmit="return parseStrikeText(this.elements);" method="POST">
  Field 1:
  <input type="text" name="field1" id="field1" value="Field 1 Value">
  <button onclick="strikeText('field1')">Strike-through</button>
  <br>

  Field 2:
  <input type="text" name="field1" id="field2" value="Field 1 Value">
  <button onclick="strikeText('field2')">Strike-through</button>
  <br>

  <button type="submit">Submit</button>
</form>
</body>
</html>

technotool · May 17, 2008

Hello,

I am looking to make a html form with selectable text to send to a php processing script to be inserted in to a database.

I am looking for a javascript snippet that will take a piece of text and change the color from silver to black (onClick)and vice versa or strikethrough to normal. On form submission, the selected text(Black) should be sent to a php_processing.php script. In other words, the selected text should pass like a form element $_POST[var]. I just need the javascript. Here is an example of what the javascript should do. I am willing to reward javascripter (paypal)

The woman went to the: hairstylist, supermarket, restaurant.

The woman ordered: salad, wine, fruit, coffee, milk, tums, juice, eggs, bacon, tea

[move]person clicks restaurant, fruit, milk, tums, bacon, tea[/move]

The woman went to the: hairstylist, supermarket, restaurant.

The woman ordered: salad, wine,fruit, coffee, milk, tums, juice, eggs, bacon, tea

submit

php_processing.php

debug(var_place1 =>restaurant, var_ord2=>milk, var_ord4=>tums, var_ord10=>bacon, var_ord11 =>tea)

If this can't be done, I would appreciate someone letting me know the same. thnks

Thanks,

technotool

Psycho · May 18, 2008

Well, you are still not giving enough specifics. I will assume that the values are predetermined and not user entered. You can use the basic script I had above, buit instead of using text fields, just use SPAN tags around each value. Then when the page is submitted iterrate through each SPAN and populate hidden fields with the text that does not have the strike-through property. I would just use a single hidden field for each typ of variable and enter the text comma separated. You can easily parse the values within the PHP code using explode().

Here is another example.

<html>
<head>
<script type="text/javascript">

function strikeText(fieldObj) {
    var style = (fieldObj.style.textDecoration!='line-through')?'line-through':'none';
    fieldObj.style.textDecoration = style;
    return true;
}

function  updateFormValues() {

    var n = 1;
    var places = new Array();

    while (document.getElementById('place'+n)) {
        fieldObj = document.getElementById('place'+n);
        if (fieldObj.style.textDecoration!='line-through') {
            places[places.length] = fieldObj.innerHTML;
        }
        n++;
    }
    document.getElementById('places').value = places.join();

    var n = 1;
    var orders = new Array();

    while (document.getElementById('ord'+n)) {
        fieldObj = document.getElementById('ord'+n);
        if (fieldObj.style.textDecoration!='line-through') {
            orders[orders.length] = fieldObj.innerHTML;
        }
        n++;
    }
    document.getElementById('orders').value = orders.join();

    return true;
}

</script>
</head>
<body>

The woman went to the:
    <span id="place1" onclick="strikeText(this);">hairstylist</span>,
    <span id="place2" onclick="strikeText(this);">supermarket</span>,
    <span id="place3" onclick="strikeText(this);">restaurant</span>.
<br><br>
The woman ordered:
    <span id="ord1" onclick="strikeText(this);">salad</span>,
    <span id="ord2" onclick="strikeText(this);">wine</span>,
    <span id="ord3" onclick="strikeText(this);">fruit</span>,
    <span id="ord4" onclick="strikeText(this);">coffee</span>,
    <span id="ord5" onclick="strikeText(this);">milk</span>,
    <span id="ord6" onclick="strikeText(this);">tums</span>,
    <span id="ord7" onclick="strikeText(this);">juice</span>,
    <span id="ord8" onclick="strikeText(this);">eggs</span>,
    <span id="ord9" onclick="strikeText(this);">bacon</span>,
    <span id="ord10" onclick="strikeText(this);">tea</span>
<br><br>

<b>Assume these are hidden fields. They are populated on submission of the form.<br>You can 'split' them using PHP in the processing page.</b><br>
<form name="test" onsubmit="return updateFormValues();" method="POST">
  Place:
  <input type="text" name="places" id="places" value="" size="80">
  <br>

  Orders:
  <input type="text" name="orders" id="orders" value="" size="80">
  <br>

  <button type="submit">Submit</button>
</form>
</body>
</html>

Change the "return true" to a "return false" so you can easily see what is going on when you try to submit the page.

technotool · May 19, 2008

wow, thanks mjdamato.

I am going to test this later.

please contact me via private message. I would like to thank you for your effort.

technotool.

alantony · May 21, 2008

This is a killer script mjdamato!!

I have been trying to adjust the script so that instead of linethrough eliminating the selected text. The enduser underlines the text for inclusion and submission via the form. I have the onclick text underlined but I cant get it to be selected instead of eliminated. Any assistance would be greatly appreciated. I have tried removing the not (!) operator from the updateFormValues () function but that is not working.

<html>
<head>
<script type="text/javascript">

function underlineText(fieldObj) {
    var style = (fieldObj.style.textDecoration!='underline')?'underline':'none';
    fieldObj.style.textDecoration = style;
    return true;
}

function  updateFormValues() {

    var n = 1;
    var places = new Array();

    while (document.getElementById('place'+n)) {
        fieldObj = document.getElementById('place'+n);
        if (fieldObj.style.textDecoration!='underline') {
            places[places.length] = fieldObj.innerHTML;
        }
        n++;
    }
    document.getElementById('places').value = places.join();

    var n = 1;
    var orders = new Array();

    while (document.getElementById('ord'+n)) {
        fieldObj = document.getElementById('ord'+n);
        if (fieldObj.style.textDecoration!='underline') {
            orders[orders.length] = fieldObj.innerHTML;
        }
        n++;
    }
    document.getElementById('orders').value = orders.join();

    return true;
}

</script>
</head>
<body>

The woman went to the:
    <span id="place1" onclick="underlineText(this);">hairstylist</span>,
    <span id="place2" onclick="underlineText(this);">supermarket</span>,
    <span id="place3" onclick="underlineText(this);">restaurant</span>.
<br><br>
The woman ordered:
    <span id="ord1" onclick="underlineText(this);">salad</span>,
    <span id="ord2" onclick="underlineText(this);">wine</span>,
    <span id="ord3" onclick="underlineText(this);">fruit</span>,
    <span id="ord4" onclick="underlineText(this);">coffee</span>,
    <span id="ord5" onclick="underlineText(this);">milk</span>,
    <span id="ord6" onclick="underlineText(this);">tums</span>,
    <span id="ord7" onclick="underlineText(this);">juice</span>,
    <span id="ord8" onclick="underlineText(this);">eggs</span>,
    <span id="ord9" onclick="underlineText(this);">bacon</span>,
    <span id="ord10" onclick="underlineText(this);">tea</span>
<br><br>

<b>Assume these are hidden fields. They are populated on submission of the form.<br>You can 'split' them using PHP in the processing page.</b><br>
<form name="test" onsubmit="return updateFormValues();" method="POST">
  Place:
  <input type="text" name="places" id="places" value="" size="80">
  <br>

  Orders:
  <input type="text" name="orders" id="orders" value="" size="80">
  <br>

  <button type="submit">Submit</button>
</form>
</body>
</html>

Psycho · May 21, 2008

You were almost there! Using a single equal sign, even in an IF clause, is treated as an assignment operator. So instead of testing if two values are equal it attemts to assign the 2nd value to the first. When testing to see if two values are equal you need to use TWO equal signs

Change both instances of this line

        if (fieldObj.style.textDecoration!='underline') {

To this (note that '!=' changes to '=='

        if (fieldObj.style.textDecoration=='underline') {

alantony · May 21, 2008

Thanks,

If I had a dollar for every time I made this error,.....

That worked like a charm.

Sign In

[SOLVED] strikethrough text to normal text (onclick)

Recommended Posts

technotool

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

technotool

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

technotool

Link to comment

Share on other sites

alantony

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

alantony

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information