Question

I am making an HTML form in JavaScript and it works, but the two buttons: cancel and submit are on seperate lines (one above the other). How can I make them horizontally aligned?

Here is the code that I have:

var new_comment_form = "<form id='add_comment' method='post'><textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>" + problem_comment_text + "</textarea><input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' /><input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' /><input type='submit' class='button' value='Edit Message' /><input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' /></form>";

And by the way, it looks very messy 🙂 How do people usually do this sort of thing so that it is cleaner?

Thanks!

Answer 1

http://jsfiddle.net/G2qsp/1/

As far as I can tell, they are on the same line 😛

The normal way of making it cleaner (at least, as I do it) is to just put it on new lines with +’s at the end of each line.

aka:

var new_comment_form = 
"<form id='add_comment' method='post'>"+
  "<textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>"+
      problem_comment_text +
  "</textarea>"+
  "<input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' />"+
  "<input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' />"+
  "<input type='submit' class='button' value='Edit Message' />"+
  "<input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' />"+
"</form>";

Edit:
If you’re still experiencing some alignment issues, this is approximately what you’d want to do with the floats
http://jsfiddle.net/G2qsp/2/

Now, to flee before someone attacks me for using clear:both…