Jump to content

Adding (and removing) <input type> values to <textarea>


cerstrand_mace

Recommended Posts

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: post-111293-0-96014700-1365499403_thumb.jpg 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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...