murfitUK Posted October 4, 2008 Share Posted October 4, 2008 What's the easiest way to do this?I've created a contact form for my website and it contains a few fields (eg your name, your email address etc). The field for their message is a textarea input type. When the user clicks send it calls the same page, checks and validates then sends if everything is OK, else it displays error messages. All the input types are populated with the user's details so they don't have to type it again.I'd like the textarea to be expandable. The code is like this:<textarea name="message" rows="5" style="width: 100%;"> . stripslashes(htmlentities($_POST['message'])) . "</textarea>";Thought about putting a link underneath the box "Click here to make box bigger" so when it's clicked it does rows="10" instead. The problem is that because it's calling the page outside the <form> (ie I can't use $_POST data) it doesn't remember any data the user has already typed in. This is OK if the user clicks the link before typing anything, but will be annoying if they click after typing and will lose everything.Any solutions? I suspect javascript is the way forward but I can't get the hang of javascript and don't know what to do. Link to comment Share on other sites More sharing options...
jeffman Posted October 4, 2008 Share Posted October 4, 2008 Javascript is a lot like PHP. One big trick from your perspective is integrating it with the page elements. The other is getting used to the dot notation, which isn't a big deal in this example, but gets bigger as you get deeper into OOP. Anyway, here's a "best practices" approach to your task. You don't have to use the onload/init stuff, but if you've been doing PHP for a while, you know that when the code get's bigger, you'll end up using them anyway. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title></title> <script type="text/javascript"> function init () { document.getElementById("resize").onclick = resize; } function resize () { var t = document.getElementById("my_text"); t.rows = (t.rows == "5") ? "10" : "5"; } window.onload = init; </script> </head> <body> <div> <textarea rows="5" id="my_text">Hello</textarea> <button id="resize" type="button">Resize</button> </div> </body></html> I would normally adjust the size using CSS, instead of the rows attribute, but there's nothing wrong with rows, and unless a change happens, they're still part of the HTML 5 spec. EDITED: see below. Link to comment Share on other sites More sharing options...
murfitUK Posted October 4, 2008 Author Share Posted October 4, 2008 Thanks for the reply. I've tried it out and it works OK in Internet Explorer (I've got IE7.0) but there is a problem with Firefox (I'm using FF3).What happens is that if the <button id="resize"> is placed inside the <form></form> section then clicking on it reloads the page (although it keeps any data typed into the fields). The box very briefly gets larger but then shrinks to the initial size as soon as the page completely reloads.I can put the <button> after the </form> element and it works OK but then the button appears in the wrong place on the page and I'd like the button next to the box it controls.Is this to do with the onload/init stuff you mentioned, and is there any way round it?Thanks again. Link to comment Share on other sites More sharing options...
jeffman Posted October 4, 2008 Share Posted October 4, 2008 My bad. I tested that without putting it in a form. In some browsers, a <button> element defaults to a type="submit". So change the tag to this: <button id="resize" type="button"> Link to comment Share on other sites More sharing options...
murfitUK Posted October 4, 2008 Author Share Posted October 4, 2008 Now it works fine. Thank you very much. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.