Hi, I'll be very grateful if someone would please be so kind and help me with this issue. I want to create a simple javascript that can take the information that a user enters into a form (with text fields, select fields and radio buttons) and then, after the user has pressed the submit button, display the information (that the user has entered into the form fields) and show it in a text area on the same page. I've tried to write a script that'll do this, but I'm only a beginner in Javascript and I just can't figure out how to do it. Thank you very much in advance! Klaus
You can do that by using "document.getElementById('element_id')"!! Write here your html code and I will help you to do that!!!
Hi S Ruben, Thank you very much! That's very kind of you and I really appreciate your help. Here below is my - embarassing - attempt to get the form to work. Hope the example is not too detailed. I just want to make it clear what I'm looking for. Thank you very much in advance! Klaus <html> <head> <title>Displaying user input</title> <script language="JavaScript"> // Declaring the variable var message = ''; // Collecting the user input message = "<ul><li><b>Name: </b>" + document.formtest.yourname.value; message += "<li><b>Address: </b>" + document.formtest.address.value; message += "<li><b>Phone number: </b>" + document.formtest.phone.value; message += "<li><b>Color: </b>" + document.formtest.color.value; message += "<li><b>Vegetables: </b>" + document.formtest.vegetables.value; message += "<li><b>Fruit: </b>" + document.formtest.fruit.value; message += "<li><b>Comments: </b>" + document.formtest.comments.value + "</ul>"; // Displaying the user input document.form['formtest'].output.value = message; // I've also tried the following commands - but with no luck: // document.forms['formtest'].output.value = message; // document.forms['formtest'].output.write(message); </script> </head> <body> <form name="formtest"> <p> <b>Name:</b> <input type="text" length="20" name="yourname"> </p> <p> <b>Address:</b> <input type="text" length="30" name="address"> </p> <p> <b>Phone: </b> <input type="text" length="15" name="phone"> </p> <p> <p><strong>Color</strong> <select name="color" size="1"> <option value="red" selected="selected">red</option> <option value="green">green</option> <option value="blue">blue</option> </select></p> <p> <p><strong>Vegetables</strong> <input type="radio" name="vegetables" value="carrot" checked="checked">Carrot <input type="radio" name="vegetables" value="cabbage">Cabbage <input type="radio" name="vegetables" value="potatoe">Potatoe </p> <p> <p><strong>Fruit</strong> <input type="checkbox" name="fruit" value="apple" checked="checked">Apple <input type="checkbox" name="fruit" value="orange">Orange <input type="checkbox" name="fruit" value= "banana">Banana</p> </p> <p> <p><strong>Additional comments:</strong> <br> <textarea name="comments" rows="7" cols="30">Additional user comments</textarea> </p> <p><input type="submit" value="Submit"></p> <p> </p> <p><strong>The results of user input:</strong> <br> <p><textarea cols="30" rows="14" name="output">This is the textarea where I want to display the user input</textarea></p> </form> </body> </html> Code (markup):
Try this code <html> <head> <title>Displaying user input</title> <script language="JavaScript"> function textarea_output(){ // Declaring the variable var message = ''; // Collecting the user input //alert(document.formtest.vegetables.length); message = "<ul><li><b>Name: </b>" + document.formtest.yourname.value; message += "<li><b>Address: </b>" + document.formtest.address.value; message += "<li><b>Phone number: </b>" + document.formtest.phone.value; message += "<li><b>Color: </b>" + document.formtest.color.value; message += "<li><b>Vegetables: </b>"; for(var i=0; i<document.formtest.vegetables.length; i++){ if(document.formtest.vegetables[i].checked){ message += " "+document.formtest.vegetables[i].value; } } message += "<li><b>Fruit: </b>"; for(var i=0; i<document.formtest.fruit.length; i++){ if(document.formtest.fruit[i].checked){ message += " "+document.formtest.fruit[i].value; } } message += "<li><b>Comments: </b>" + document.formtest.comments.value + "</ul>"; // Displaying the user input document.formtest.output.value = message; // I've also tried the following commands - but with no luck: // document.forms['formtest'].output.value = message; // document.forms['formtest'].output.write(message); } </script> </head> <body> <form name="formtest"> <p> <b>Name:</b> <input type="text" length="20" name="yourname"> </p> <p> <b>Address:</b> <input type="text" length="30" name="address"> </p> <p> <b>Phone: </b> <input type="text" length="15" name="phone"> </p> <p> <p><strong>Color</strong> <select name="color" size="1"> <option value="red" selected="selected">red</option> <option value="green">green</option> <option value="blue">blue</option> </select></p> <p> <p><strong>Vegetables</strong> <input type="radio" name="vegetables" value="carrot" checked="checked">Carrot <input type="radio" name="vegetables" value="cabbage">Cabbage <input type="radio" name="vegetables" value="potatoe">Potatoe </p> <p> <p><strong>Fruit</strong> <input type="checkbox" name="fruit" value="apple" checked="checked">Apple <input type="checkbox" name="fruit" value="orange">Orange <input type="checkbox" name="fruit" value= "banana">Banana</p> </p> <p> <p><strong>Additional comments:</strong> <br> <textarea name="comments" rows="7" cols="30">Additional user comments</textarea> </p> <p><input type="button" value="Submit" onclick="textarea_output();"></p> <p> </p> <p><strong>The results of user input:</strong> <br> <p><textarea cols="30" rows="14" name="output">This is the textarea where I want to display the user input</textarea></p> </form> </body> </html> Code (markup):
Hi again Ruben, Thank you VERY MUCH! That was really kind of you and an enormous help to me. I really appreciate it. It works like a dream BTW, I visited your nice web site and read about your impressive programming skills (PHP, MySQL, HTML, CSS, JavaScript, DOM, XML and Ajax). I also read that you "started creating websites and web applications in 2006". That's really impressive. How did you manage to learn all that in just three years? Thanks a lot! Best, Klaus