-1

O código abaixo tem a função de pegar o link de cada input do formulário e adicionar <a href="link" target="_blank">Link - ?</a>
Eu gostaria de saber se é possível obter o mesmo resultado com apenas um textarea no lugar de vários input e cada linha dentro do textarea pegar um link diferente.

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>

1 Resposta 1

0

Sim, é possível, você só tem que ver como você quer que funcione, pode separar cada link por uma virgula por exemplo, ou até quebra de linha (como no exemplo abaixo).

OBS: Usei jQuery neste meu exemplo.

$(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>
<div id="main">
  <textarea id="links"></textarea>
  <a href="javascript:void(0);" id="finalizar">Finalizar</a>
  <div id="resultado"></div>
</div>

Nesse exemplo eu peguei cada nova linha e criei um link, mas não verifiquei se o link é válido ou se realmente a linha contém algum valor. O Código acima é só para inspiração mesmo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .