cerstrand_mace Posted April 9, 2013 Share Posted April 9, 2013 Hi! I'm new to the whole form-making business and currently beating my way though the basics. Right now i'm clueless about what seems to be a pretty simple and straightforward function. I want my visitor to be able to add values from two different <input-type>-fields into a <textarea>. These two values (being name and e-mail) should become a single row in the <textarea>. The visitor should also be able to remove desired generated rows with a simple click on the "remove selected"-button. The result should look like this: This part of my form looks like this thus far: <div class="deltagare-rubrik">Namn:</div> <input type="text" size="45" name="deltagare-namn" value""> <div class="deltagare-rubrik">E-post:</div> <input type="text" size="45" name="deltagare-epost" value""> <br /> <input type="button" name="deltagare-add" value="Add" class="button"> <br /> <textarea name="deltagare-list" class="deltagare-list" readonly="true"></textarea> <input type="button" name="deltagare-remove" value="Remove selected" class="button"> Very grateful for help, thanks! Link to comment Share on other sites More sharing options...
dsonesuk Posted April 9, 2013 Share Posted April 9, 2013 This can only be done with javscript, were you would target textarea on clicking of button and reset value to "" a emptystring Link to comment Share on other sites More sharing options...
cerstrand_mace Posted April 9, 2013 Author Share Posted April 9, 2013 This can only be done with javscript, were you would target textarea on clicking of button and reset value to "" a emptystring That seem to make sense care to give a more detailed description of how the code would look? I'd be very grateful! Link to comment Share on other sites More sharing options...
dsonesuk Posted April 9, 2013 Share Posted April 9, 2013 http://w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick (instead .innerHTML, use .value="") http://www.w3schools.com/jsref/prop_reset_value.asp 1 Link to comment Share on other sites More sharing options...
cerstrand_mace Posted April 9, 2013 Author Share Posted April 9, 2013 http://w3schools.com...ryjsref_onclick (instead .innerHTML, use .value="") http://www.w3schools...reset_value.asp Thanks a lot! I think I'll be able to pull it through with this Link to comment Share on other sites More sharing options...
cerstrand_mace Posted April 9, 2013 Author Share Posted April 9, 2013 Thanks a lot! I think I'll be able to pull it through with this How do I get the specific value from the <input type> fields? I need to call the names of the fields right? Link to comment Share on other sites More sharing options...
cerstrand_mace Posted April 9, 2013 Author Share Posted April 9, 2013 I've managed to create a script that pulls text-values from my <input type> fields! However, I would like a space between the two entered values, and then a <br> to make a new row to the next entry. My javascript looks like this function deltagare(){var myTextField1 = document.getElementById('namn'); if(myTextField1.value != "")document.getElementById("deltagare-list").value+=myTextField1.value; elsealert("Skriv in namn!") var myTextField2 = document.getElementById('epost'); if(myTextField2.value != "")document.getElementById("deltagare-list").value+=myTextField2.value; elsealert("Skriv in epost!") } Link to comment Share on other sites More sharing options...
cerstrand_mace Posted April 9, 2013 Author Share Posted April 9, 2013 Solved the spaces and breaks! function deltagare(){var myTextField1 = document.getElementById('namn'); if(myTextField1.value != "")document.getElementById("deltagare-list").value+=myTextField1.value+" "; elsealert("Skriv in namn!") var myTextField2 = document.getElementById('epost'); if(myTextField2.value != "")document.getElementById("deltagare-list").value+="("+myTextField2.value+")"+"\n"; elsealert("Skriv in epost!") } Link to comment Share on other sites More sharing options...
cerstrand_mace Posted April 9, 2013 Author Share Posted April 9, 2013 I've now managed to rewrite the script to work more properly! Both <input type>fields must be filled in for the function to execute. I also added a function for a clear-button that clears the <textarea> from values. function deltagare(){var myTextField1 = document.getElementById('namn');var myTextField2 = document.getElementById('epost'); if(myTextField1.value != "" && myTextField2.value != "")document.getElementById("deltagare-list").value+=myTextField1.value+" "+"("+myTextField2.value+")"+"\n"; elsealert("Skriv in både namn och epost!") } function rensadeltagare(){ document.getElementById("deltagare-list").value=""; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now