Loading Textarea with Javascript on click event

Question

I am working on a project which requires status update. I would like to add onlcick even on select box to show textarea only if the users selected the status as pending.

echo "
<select onchange=\"window.location=this.value\" name=\"status\">
    <option value=\"".$res1['ProjStatus']."\">".$res1['ProjStatus']."</option>
    <option value=\"completed\">Completed</option>
    <option value=\"ongoing\">Ongoing</option>
    <option value=\"Project.php?pending=pending\">Pending</option>
</select>
";

Question: I would like to show the textarea only if the user change the project status to pending.

The above code work but this refresh the whole page

you can show or hide anything according to the select because you reload the page as soon as it changes. — dandavis
– dandavis, Commented Apr 12, 2015 at 5:14
it is happening because of onchange=\"window.location=..... Remove that and put something appropriate. — Rahul Desai
– Rahul Desai, Commented Apr 12, 2015 at 5:17
do you want jump to (Project.php?pending=pending) page and not (ongoing) and (completed)?? — Tasos
– Tasos, Commented Apr 12, 2015 at 5:32
no i want to display textarea only when user selected pending as status — user3127648
– user3127648, Commented Apr 12, 2015 at 5:35

Tyler Peckenpaugh PhD · Accepted Answer · 2015-04-21 15:57:46Z

1

I think you want something like this. Forgive me for not testing that it works as is. Hopefully you can extrapolate.

HTML

<style> #textArea { display: none } </style>
<!-- select onchange calls javascript function to check if Pending was selected -->
<select onchange="toggleText(this.value)">
    <option value="<?php echo $res1['ProjStatus'] ?>"><?php echo $res1['ProjStatus'] ?></option>
    <option value="completed">Completed</option>
    <option value="ongoing">Ongoing</option>
    <option value="Pending">Pending</option>
</select>

<textarea id='textArea' />

JavaScript

function toggleText(value) {
    // if the new value of the select element is Pending, show it
    if("Pending" === value){
        document.getElementById('textArea').style.display = "block";
        // the return values just lets you know the result if you ever need it
        return true; 
    }
   document.getElementById('textArea').style.display = "none";
    return false;
}

edited Apr 21, 2015 at 15:57

answered Apr 12, 2015 at 5:21

Tyler Peckenpaugh PhD

3732 silver badges12 bronze badges

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

3 Comments

user3127648 Over a year ago

That what i want but the textarea is always visible using your code

Tasos Over a year ago

@user3811350 just use css (textarea { display:none; }) delete (document.getElementById('textArea').style.display = "none";) and change (document.getElementById('textArea').style.display = "show";) to (document.getElementById('textArea').style.display = "block";)

user3127648 Over a year ago

that works one drawback if the i select completed the textarea is still visible

Collectives™ on Stack Overflow

Loading Textarea with Javascript on click event

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related