homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

I have TEXTAREA form, i want to add DROP DOWN LIST BOX beside it

 9:37 am on Sep 24, 2012 (gmt 0)

Hi guys

i have comment form code (in black colour) below, user type the comment in TEXTAREA, and click the Submit button

i want to add DROP DOWN LIST BOX before it, that user can choose, and add that DROP DOWN value with the text in TEXTAREA into database, so just like prefix in forum

i already tried below code (in red), but still not working, please help guys what is the right code

<script language="javascript" type="text/javascript">


$("#form_submit").click(function() {
document.getElementById("form_submit").disabled = true;
checkcomment = trim(document.comment_form.message.value);

if (checkcomment.length > 0) {
var msgPrefix = document.forms["comment_form"].elements["message_prefix"].options[document.forms["comment_form"].elements["message_prefix"].selectedIndex].value;
value = "["+msgPrefix+"] "+value;

else {
alert("Please type some text");
document.getElementById("form_submit").disabled = false;

function comment_done() { }
function comment_submit()
type: "POST",
url: "/targetfile.php",
data: $("#comment_form").serialize(),
success: function(data){
if (data == "SUCCESS") {
document.comment_form.message.value = "";
setTimeout (CommentAjax,0);
else {
alert("Error: "+data);


<form id="comment_form" name="comment_form" method="post">
<input type="hidden" name="heu" value="addreply" />
<input type="hidden" name="muser" value="' . $this->muser . '" />
<input type="hidden" name="modid" value="' . $this->douid . '" />
<input type="hidden" name="tun" value="0" />

<select name="message_prefix">
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>

<textarea name="message" rows="4" cols="20" style="width: 70%;"></textarea><br />

<input type="button" id="form_submit" value="Submit" />



 3:08 pm on Sep 24, 2012 (gmt 0)

It's impossible to be sure without seeing the entire page, but I suspect that the 'width' setting for the <textarea> tag is too high. Try removing the 'style' attribute completely.


 3:45 pm on Sep 24, 2012 (gmt 0)

1. language="javascript"
That's invalid. Don't include the language attribute on script tags.

2. Why don't you just prepend the value server side in your targetfile.php? That is the correct way to do this, otherwise users with JavaScript disabled are going to be posting different values to the server.

3. You're creating some global variables, like checkcomment and value. checkcomment is the trimmed result of your message.value, but you're not sending checkcomment to the server. value, I presume, was supposed to be document.comment_form.message.value. If you change that, it will probably work for users with JavaScript enabled. Your user experience will still be broken for users without JavaScript enabled though.

value = "["+msgPrefix+"] "+value;

Should be

document.comment_form.message.value = "[" + msgPrefix + "] "+ checkcomment;


 3:46 pm on Sep 24, 2012 (gmt 0)

Note, I encourage you NOT to implement the code above, and instead do the prepending of the value server side, since the form submission will send both values anyway.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved