Простая форма ввода для javascript

Question

У меня есть текстовое поле и кнопка отправки.

Когда кнопка нажата, я хочу, чтобы значение textarea помещалось в контейнер (в теге абзаца). И я хочу, чтобы это значение хранилось на моем веб-сервере.

Как это написать?

Благодаря

Answer 1

Это всего лишь отправная точка для вас. Следующие работы 100%, но вам тоже нужно немного поработать.

HTML -

<div id="MyComments"></div> 
<input type="text" id="name"/> 
<textarea id="comment"></textarea> 
<input type="submit" id="" value="Go!" onclick="comment();"/> 

Javascript-

function comment(){ 
//Store elements in a variable. 
var name= document.getElementById("name"); 
var comment= document.getElementById("comment"); 
//I would recommend checking/validating the users input. 
var hr = new XMLHttpRequest(); 
//Sending the comment to AddComment.php 
var url = "AddComment.php"; 
var vars = "name="+name.value+"&comment="+comment.value; 
    hr.open("POST", url, true); 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    hr.onreadystatechange = function() { 
if(hr.readyState == 4 && hr.status == 200) { 
    var return_data = hr.responseText; 
/*Comment post successfully sent. 
return_data = your php reply, you can append a new element to your webpage to 
display the php result/comment. 
Remove loading icon if you have added.*/ 
var target = document.getElementById('MyComments'); 
var ElementType = document.createElement('p'); 
//Set attributes to your element /onclick/ID/Class/style(in-line style) 
ElementType.setAttribute('align', 'center'); 
target.appendChild(ElementType); 
//Insert the php result into the new P element. 
ElementType.innerHTML=return_data; 
}} 
//Send the comment to the php 
hr.send(vars); 
//Here you can display a loading icon. 
} 

PHP -

<?php 
if(isset($_POST['name'])&&($_POST['comment'])){ 
die('<b>'.$_POST['name'].':</b> <i>'.$_POST['comment'].'</i>'); 
} 
?> 

Все, что вам нужно сделать, отсюда проверки ввода пользователей в JavaScript, проверить его сервер -side в php перед сохранением (лучше быть в безопасности, чем жаль). Вам придется подумать о собственном методе сохранения комментария, но лично я бы использовал MYSQL. Надеюсь, что это хорошая отправная точка для вас! Если это ответит на ваш вопрос, отметьте это сообщение.