Question

I have several questions regarding forms and PHP but if I should put them into different posts then I will.

Here is my form code:

<form id="t-form" name="tForm" action="translate.php" method="POST">
            <div id="t-bar">
                <div class="t-select">
                    <select name="start-lang" id="choice-button">
                        <option value="english">English</option>
                    </select>
                    <label>into</label>
                    <select name="end-lang" id="choice-button" onChange="document.forms['tForm'].submit();">
                        <option value="caps"<?php if ($resLang == 'caps') echo ' selected="selected"'; ?>>CAPS</option>
                        <option value="lowercase"<?php if ($resLang == 'lowercase') echo ' selected="selected"'; ?>>lowercase</option>
                    </select>
                    <input type="submit" id="t-submit" value="Translate">
                </div>
            </div>
            <div id="t-main">
                        <textarea id="txt-source" name="t-src" autofocus="autofocus" placeholder="Type in what you would like to convert…" onChange="document.forms['tForm'].submit();"><?php echo $source; ?></textarea>
                        <input type="button" id="t-clear" onclick="this.form.elements['t-src'].value=''">

                        <textarea id="txt-result" name="txt-result" readonly disabled="disabled" placeholder="result..."><?php echo $result; ?></textarea>
                        <input type="button" id="t-copy" name="t-copy">
            </div>
        </form>

Question 1: I currently have onclick="this.form.elements['t-src'].value=''" which clears one textbox when the button is pressed. Is it possible to have the same attribute clear both textareas in my form? I can’t seem to find an answer anywhere for clearing 2 elements with 1 button. I do not want to clear the form as I would like to keep the selected dropdown values so that is why I’m doing it this way.

Question 2: How would I go about implementing a live refresh of the results textarea so they user can simply type and see the result? I’ve look at the ajax and jquery required and am confused as most don’t show how to output to a form element and only to a div. (Similar to google’s translate)

Question 3: I realized that if a user does a new line in the textarea, when they submit for translate, it gives them a php header error. Any ideas how I can avoid this? This is my header for the translate.php file used in the form:

header("location: /?txt-result=$result&t-src=$textSource&end-lang=$outputLang");

I am merely trying to do this as a learning excersise and would really appreciate any guidance or answers to the three questions. Many thanks for your help!

Answer 1

Answer 1: Have your onclick event call a function which clears those values for you:

<script type="text/JavaScript">
    function clearTextareas()
    {
        this.form.elements["t-src"].value = "";
        this.form.elements["txt-result"].value = "";
    }
</script>

<input type="button" id="t-clear" onclick="clearTextareas()">     

Answer 2: Add an onkeydown event in the source textarea that peforms the translation (or whatever it needs to do) and then puts the result in the result textarea:

<script type="text/JavaScript">
    function translateText()
    {
        var text = this.form.elements["t-src"].value;
        // do something
        this.form.elements["txt-result"].value = text;
    }
</script>

<textarea id="txt-source" name="t-src" autofocus="autofocus" placeholder="Type in what you would like to convert…" onkeydown="translateText()"><?php echo $source; ?></textarea>

Answer 3: Perhaps an onsubmit event in the form element that will sanitize the input from the text area. Have a look at JavaScript’s encodeURIComponent. Perhaps this will work for you:

<script type="text/JavaScript">
    function sanitize()
    {
        this.form.elements["t-src"].value = encodeURIComponent(this.form.elements["t-src"].value);
    }
</script>