問題與jQuery聊天表格

Question

感謝您提前的幫助。

此項目是一個註冊表單，它將使用聊天系統在其入職過程中收集用戶的個人資料詳情。這是我第一個jQuery項目，所以我正在努力發現我的錯誤。

我的jQuery應該在textarea的追加價值的＃消息飼料 DIV和應用.message，.bubble和。用戶的CSS類它創建的新元素。

但是，當我在文本區域中鍵入並單擊提交時，它會刷新我剛纔在消息源中沒有樣式輸入的值，但它立即消失。

這樣做的原因CSS結構是.BOT和。用戶類取決於它是否是由該網站，或者用戶對問題的回答呈現給用戶的一個問題之間的互換性。

這裏是一個JSFiddle一個鏈接，但它加載非常不同於我的本地機器上（的jsfiddle顯示錯誤。

HTML

<div id="container"> 

    <div id="message-feed"> 
     <h1>Let&#39;s get to know you a little bit more&hellip;</h1> 
    </div> 

    <form method="POST"> 
     <div id="text-response"> 
     <textarea id="text-response" placeholder="Type in here&hellip;"></textarea> 
     </div> 
     <input type="submit" class="submit-response"> 
    </form> 

</div> 

CSS

#container { 
width: 320px; 
height: 480px; 
background-color: #fff; 
position:absolute; 
left:50%; 
top:50%; 
margin:-240px 0 0 -160px; 
} 

#message-feed { 
width: 100%; 
height: 100%; 
margin: auto; 
overflow-y: scroll; 
} 

.message { 
padding: 0px 15px 15px 15px; 
width: 90%; 
} 

.message:after { 
content:""; 
display: block; 
clear: both; 
} 

.bubble { 
border: 0.5px solid #005393; 
max-width: 80%; 
padding: 10px; 
} 

.bot { 
color: #005393; 
float: left; 
border-radius: 12px 12px 12px 0px; 
} 

.user { 
float: right; 
background-color: #005393; 
border-radius: 12px 12px 0px 12px; 
color: #fff; 
} 

#text-response { 
height: 23px; 
width: 220px; 
border-top: 1px solid #eee; 
background-color: #fff; 
float: left; 
} 

textarea { 
height: 20px; 
width: 220px; 
float: left; 
resize: none; 
border: none; 
padding: 10px; 
line-height: 22px; 
font-family: 'Roboto', sans-serif; 
font-weight: 200; 
letter-spacing: 1px; 
font-size: 15px; 
outline: none; 
overflow: auto; 
} 

.submit-response { 
height: 45px; 
width: 80px; 
background-color: #005393; 
color: #fff; 
float: right; 
text-align: center; 
line-height: 42px; 
font-family: 'Roboto', sans-serif; 
font-weight: 200; 
letter-spacing: 1px; 
font-size: 15px; 
outline: none; 
border: 0; 
} 

.submit-response:hover { 
opacity: 0.5; 
} 

jQuery的

$(document).ready(function() { 

    $('.submit-response').click(function() { 

     var $newMessage = $('textarea[name=text-response]').val() 

     $('#message-feed').append($newMessage, 'message', 'bubble', 'user'); 

    }); 
}); 

Answer 1

那邊有2個問題：

1 /你不防止事件的默認行爲。這意味着無論您何時點擊作爲提交輸入的按鈕，它都會發送POST請求。所以頁面會改變。爲了防止這種情況：

$('.submit-response').click(function() { 
    var $newMessage = $('textarea[name=text-response]').val(); 
    $('#message-feed').append($newMessage, 'message', 'bubble', 'user'); 
}); 

應該變成：

$('.submit-response').click(function(event) { 
    event.preventDefault(event); 
    var $newMessage = $('textarea[name=text-response]').val(); 
    $('#message-feed').append($newMessage, 'message', 'bubble', 'user'); 
}); 

2 /你不實際添加的類。 $.append附加元素，不是類。所以：

$('.submit-response').click(function(event) { 
    event.preventDefault(event); 
    var $newMessage = $('textarea[name=text-response]').val() 
    $('#message-feed').append($newMessage, 'message', 'bubble', 'user'); 
}); 

應該變成：

$('.submit-response').click(function(event) { 
    event.preventDefault(event); 
    var $newMessageText = $('textarea[name=text-response]').val(), 
     $newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>'); 

    $('#message-feed').append($newMessage); 
}); 

現在很明顯，它並沒有成爲一個跨度，也可能是別的。它仍然是一個元素。

此外，這只是解決您在前端的問題。您需要使用AJAX將POST發送到服務器端，並在不刷新/離開頁面的情況下獲取數據。但那是另一個話題。