Jump to content
cerstrand_mace

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

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!

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
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!") }

Share this post


Link to post
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!")  }

Share this post


Link to post
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=""; }

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...