Вопросы относительно форм и php (очистка формы, обновление в реальном времени, многострочный)

Question

У меня есть несколько вопросов, касающихся форм и PHP, но если я добавлю их в разные посты, я отвечу.

Вот мой код формы:

<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>

Вопрос 1: В настоящее время у меня есть onclick="this.form.elements['t-src'].value=''", который очищает одно текстовое поле при нажатии кнопки.Можно ли иметь один и тот же атрибут для очистки обоих текстовых полей в моей форме?Я не могу найти ответ где-нибудь для очистки 2 элементов с 1 кнопкой.Я не хочу очищать форму, поскольку хочу сохранить выбранные раскрывающиеся значения, поэтому я делаю это следующим образом.

Вопрос 2: Как мне поступитьРеализация обновления результатов в реальном времени, чтобы пользователь мог просто напечатать и увидеть результат?Я посмотрел на ajax и jquery, и я запутался, так как большинство из них не показывают, как выводить данные в элемент формы и только в div.( По аналогии с переводом Google )

Вопрос 3: Я понял, что если пользователь вводит новую строку в текстовой области, когда он отправляет на перевод, он дает имошибка заголовка php.Есть идеи, как мне этого избежать?Это мой заголовок для файла translate.php, используемого в форме:

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

Я просто пытаюсь сделать это в качестве учебного упражнения и буду очень признателен за любые указания или ответы на три вопроса.Большое спасибо за вашу помощь!

Answer 1

вопрос 1

у вас должно быть:

onclick="clearTextboxes();"

и в javascript что-то вроде:

//if you want to delete all the inputs that are of type text
function clearTextboxes(){
   var inputs = document.getElementById('t-form').getElementsByTagName('input');
   for (var control in inputs){
      if(inputs[control].getAttribute('type') == 'text'){
         inputs[control].value = '';
      }
   }
}

вопрос 2

это далекоСлишком широкий, чтобы поставить его здесь в качестве ответа, вы действительно должны посмотреть на $ .ajax в jQuery и создать другой вопрос с конкретными сомнениями.

вопрос 3

использовать функцию PHP urlencode ()

Answer 2

Ответ 1: Пусть ваше событие onclick вызывает функцию, которая очищает эти значения для вас:

<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()">     

Ответ 2: Добавьте событие onkeydown в исходную текстовую область, которая выполняет преобразование (или все, что нужно), а затем помещает результат в текстовую область результата:

<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>

Ответ 3: Возможно, событие onsubmit в элементе form, которое очистит ввод от текстовой области. Взгляните на JavaScript encodeURIComponent . Возможно, это подойдет вам:

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