Edit a contract template with jquery

Asked

Viewed 49 times

0

I wonder if it is possible to add a contract within a textarea and define some fields that can be changed in this contract.

For example: I have {{name}} {address}}

I want to allow the user to drag the name ( I already have a relation saved in the database ) and an address ( I have also saved) after that I want to export this data to a docx.

javascript jquery html5

  • It’s not very clear, you can go into more detail?

  • Yes, Anderson. I need to bring a contract that today undergoes many changes to our website. Only that certain fields of this contract, which today is edited in a word document, need to fill dynamically. It would be like adding text inside a textarea with variables that I can drop values into. Type: This contract belongs to {name}. This {name} is a tag that if I drag one of the names I have available in a list it will replace it.

  • For you to do this drag and replace you will need to use a draggable, jquery already has this https://jqueryui.com/draggable/

  • I had found this solution, but I did not find any example using textarea, or something that can simulate what I want. Thanks anyway Anderson.

1 answer

1


You can use the dragstart and dragover events in combination with jQuery to do this, I made an example for you.

But beware: This code is just a reference, it only changes the name once. (since it replaces the joker {name})

$(function(){
  var nomeSelecionado="";
  $(".nome").on("dragstart",function(e){
    nomeSelecionado=$(this).html();
    //alert(nomeSelecionado);
  });
  $("#contrato").on("dragover",function(e){
    if(nomeSelecionado){
      var valor=$(this).val().split("{nome}").join(nomeSelecionado);
      $(this).val(valor);
      nomeSelecionado="";
      e.preventDefault();
    }
  });
});
#linha{
  display:flex;
  flex-flow: row;
}
#contrato{
  width:400px;
  height: 800px;
  flex-grow:1;
}
#nomes{
  padding: 20px;
  display: flex;
  flex-flow: column;
}
#nomes .nome{
  display:block;
  padding: 5px;
  border-radius: 3px;
  background-color: #eaeaea;
  margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linha">
<textarea id="contrato">
Bom dia Sr. {nome}

Lorem {nome} dolor sit amet, consectetur adipiscing elit. Pellentesque auctor ex eu leo scelerisque, vitae pharetra risus efficitur. Mauris tempus vestibulum diam, non condimentum est vestibulum eu. Suspendisse sit amet pellentesque metus, quis malesuada eros. Integer pretium sapien vel semper {nome}. Curabitur nec venenatis nunc. Nullam sagittis tortor nisi, non dictum sem faucibus in. Vestibulum porta sem nec massa pulvinar faucibus. Nam ipsum quam, pellentesque vitae fermentum sed, efficitur sit amet ipsum. Quisque maximus euismod mi in tincidunt. Nam placerat, odio et euismod rhoncus, ligula risus laoreet nunc, sed sagittis ex turpis eu turpis. Maecenas aliquam est tortor. Quisque placerat accumsan scelerisque. Sed nec faucibus risus. Ut nulla justo, laoreet ac pulvinar et, dignissim et sapien.

Phasellus imperdiet dolor tortor, eu faucibus mi malesuada eu. Nulla efficitur faucibus lacus, condimentum aliquam nisl porttitor ac. Sed convallis imperdiet risus, eget imperdiet leo commodo nec. Nullam sit amet massa ac justo iaculis tincidunt et aliquam nisl. Sed dictum efficitur sapien, eu maximus nibh interdum vel. In ut orci a dui hendrerit iaculis. Quisque sit amet enim in dui blandit ornare. Donec eu aliquam nulla.

In odio lorem, mollis vel nisl non, convallis sagittis eros. Etiam nec commodo augue, sit amet laoreet quam. Ut scelerisque cursus leo eget fringilla. Sed odio enim, consequat a justo eget, dignissim consequat purus. Etiam cursus, ligula non imperdiet placerat, risus nisl condimentum elit, quis sagittis risus est feugiat purus. Quisque nec augue vel ex finibus dictum. Vivamus varius tortor nunc, malesuada rhoncus risus tristique id. Vivamus at ligula feugiat, ultricies magna id, feugiat nisl.

Phasellus varius velit turpis, nec interdum eros feugiat eget. Pellentesque eget velit vitae arcu rutrum faucibus. In tincidunt, diam ac semper consequat, metus purus vulputate enim, at convallis lacus augue sit amet arcu. Aenean pretium urna eu auctor eleifend. Pellentesque posuere est sit amet sagittis feugiat. Maecenas ornare neque sapien, quis consequat orci vestibulum et. Ut malesuada massa vel sapien interdum, dignissim hendrerit mauris pulvinar. Cras neque ante, tincidunt gravida risus id, venenatis gravida magna. Vivamus auctor, orci vel finibus pulvinar, ex magna convallis justo, non auctor lacus sem et turpis. Nulla quis odio vel urna fringilla pellentesque at vel dui. Quisque lectus nibh, bibendum in porta vitae, suscipit sit amet odio. Quisque ultricies libero erat. Duis auctor purus ut justo maximus, eu ultrices ex ullamcorper.

Aliquam venenatis mollis semper. Pellentesque sagittis aliquam massa vitae auctor. Morbi sed massa sed tortor feugiat facilisis in nec lorem. Etiam cursus, libero eget viverra laoreet, lacus diam pretium quam, vestibulum gravida justo tortor sed lacus. In sed leo in quam pretium luctus. Quisque eu fermentum lacus. Cras diam diam, pharetra nec neque venenatis, ultricies volutpat metus. Cras mattis eget turpis sit amet blandit. Nam commodo dui sed finibus ullamcorper. Nam aliquam, ligula nec laoreet auctor, mi massa interdum justo, non bibendum tellus massa in magna. Pellentesque finibus, sapien quis fringilla venenatis, sapien erat gravida augue, sit amet dictum ipsum sapien vitae massa. Donec tincidunt vehicula augue ut gravida. Sed in porttitor enim. Proin vitae tincidunt orci. Nunc ac nulla arcu.</textarea>

  <div id="nomes">
    <span class="nome" draggable="true">Pedro</span>
    <span class="nome" draggable="true">Paulo</span>
    <span class="nome" draggable="true">Maria</span>
    <span class="nome" draggable="true">Joana</span>
  </div>
</div>

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.