Each line in the "textarea" gives a different return. Using form and javascript to create a code generator

Question

Each line in the "textarea" gives a different return. Using form and javascript to create a code generator

Navigation

#1 by (0 votes)

-1

The code below has the function to get the link of each input of the form and add <a href="link" target="_blank">Link - ?</a>
I would like to know if it is possible to get the same result with only textarea instead of several input and each line inside textarea get a different link.

function submitted() {

  var links = document.getElementsByName("link");
  var output = document.getElementById("output");
  output.value = "";
  
  for (var i = 0; i < links.length; i++) {
    if (links[i].value.trim() != '') {
      output.value += '<a href="${links[i].value.trim()}" target="_blank">Link - ${i+1}</a>\n';
    }
  }

  return false;
}

* {
    box-sizing: border-box;
}

input[type=text], select, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: left;
    width: 100%;
	height: 60px
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
	width: 60%;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

<div class="container">
<form onsubmit="return submitted()"> 
  <div class='row'><div class='col-25'><label for='01'>Link - 01:</label></div><div class='col-75'><input id='01' name='link' type='text'/></div></div>
  <div class='row'><div class='col-25'><label for='02'>Link - 02:</label></div><div class='col-75'><input id='02' name='link' type='text'/></div></div>
  <div class='row'><div class='col-25'><label for='03'>Link - 03:</label></div><div class='col-75'><input id='03' name='link' type='text'/></div></div>
  <div class='row'><input type='submit' value='CONCLUIR'/></div>
  <div class='row'><textarea id="output" name="output" style="height:200px"></textarea></div>
</form>
</div>

javascript html

asked by anonymous 26.06.2018 / 03:12

1 answer

Analyze the last 3 records of a table using PHP Hash from some CakePHP2 field

score 0 · Accepted Answer

Yes, it is possible, you just have to see how you want it to work, you can separate each link by a comma, for example, or even line break (as in the example below).

NOTE: I used jQuery in my example.

$(function(){
  $("#finalizar").on("click",function(){
    // Pegar cada nova linha do textarea:
    var links=$("#links").val().split("\n");
    // Limpar o resultado atual:
    $("#resultado").html("");
    
    // Para cada linha pega, adicionar ao resultado:
    $.each(links,function(index,valor){
      $("#resultado").append("<a href='"+valor+"'>Link - "+(index+1)+"</a>");
    });
  });
});

#main{
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}
#main>*{
  margin-bottom: 10px;
}
#links{
  padding: 10px;
  border: 1px solid #333;
}
#finalizar{
  text-align: center;
  border-radius: 3px;
  background: blue;
  color: white;
  padding: 10px;
}
#resultado{
  background: #cecece;
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="main">
  <textarea id="links"></textarea>
  <a href="javascript:void(0);" id="finalizar">Finalizar</a>
  <div id="resultado"></div>
</div>

In this example I took each new line and created a link, but I did not check if the link is valid or if the line actually contains some value. The above code is for inspiration only.