How to copy the value of the click through the anchor and add this value through the input and remove?

Question

The code does not work the way I want it to. It is to copy the value of the click through the anchor and add this value through the input and remove. Can you help me? The code is for an interaction feature in the field. I'm creating a form and I'm trying to add this feature. My idea is ...

Explanation of idea and code with pseudo-algorithm

if (click) { remove input }
input. removed { step 1 }
Step 1 :: Now add this <a> 1 anchor </a>

if ( click ) {   if (step1) is 'correct'! {    else (copy text value) .create input   }  createinput 'is'   }   'is'  =  input.add {  ( add text value ) }
       
now: remove the anchor ^ step2 ^ 
Step 2 :: Now add this <input></input>
end-script

Translation 1

Remove input and add the anchor.
Add anchor and if (click)... add value of text in (input).
To add the input create a new input and then remove the anchor.

Translation 2

  HTML(Values.txt) is '<a href="#">Presencial</a>'
  HTML(Values.txt) is'<a href="#">Online</a>'

  take.valueTXT ( Presencial, Online) = Text.content for Value.Input )

  'take.valueTXT' 'is' ( expression )  
     
   '(expression)' 'is'  'rule' 

   'rule' is $("#presencial,#online").text($('#inscricao').val(););

Translation 3

$(function()
{
    var find = $("#presencial, #online").text("");
    var add = $("#input").val("");
    var make = find to add; 
    
   $('<input>').addClass('inscricao u-full-width').attr({id: 'inscricao'});


});

Translation 4

function myFunction() {
  var x = document.getElementById("#presencial,#online").innerText;
  var a = $("#inscricao").val();
  a = x;

Translation 5

$("#presencial,#online").text($("#inscricao").val();)

Translation 6

      $("#presencial,#online").click(function() {
       $("#presencial,#online").text( $("#inscricao").val(); )
       $("#presencial,#online").remove();
       $("input").add(); // add input
   });

Translation 7

document.getElementById("#presencial,#online").innerText;.$("#inscricao").val();

Errors, Source-Code

// script 1
$("#inscricao").one("click", function() {
    $('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;" href="#">Presencial</a><a id="online"  style="text-decoration:none;">Online</a></div>');
    jQuery('#inscricao').remove();
});
// script 2
      $("#presencial").click(function() { 
                    $("#presencial").val(function(c) { 
                        $('#presencial').after('<input class="inscricao u-full-width" id="colegios" type="text" autocomplete="off" required/>');

/* var take = document.querySelector('#presencial').innerHTML; var adicionar = document.querySelector("#presencial").value = take;  */

                        var c = $("#inscricao").text();
                        return c. 

                        jQuery('#presencial').remove();

                    }); 
                });

Reference

IDEA

 var take = document.querySelector('#presencial').innerHTML; var adicionar = document.querySelector("#presencial").value = take;

Test1

$("#inscricao").one("click", function() {
  $('#inscricao').after('<div style="text-align:center"><a onclick="addInput(this.form);copyValue(this.form); removerHere(this.form);" id="presencial" style="text-decoration:none;" href="#">Presencial</a><a onclick="addInput(this.form);copyValue(this.form); removerHe(this.form);" id="online"  style="text-decoration:none;">Online</a></div>');
  jQuery('#inscricao, #label1').remove();
});

$("#unidades").one("click", function() {
  $('#unidades').after('<div style="text-align:center"><a onclick="addInput(this.form);copyValue(this.form); removerHere(this.form);" style="text-decoration:none;">Recife</a><a onclick="addInput(this.form);copyValue(this.form); removerHere(this.form);" href="#" id="jabatao" style="text-decoration:none;">Jabatão</a></div>');
  jQuery('#unidades,#label2').remove();
});

$("#colegios").one("click", function() {
  $('#colegios').after('<div style="text-align:center"><a onclick="addInput(this.form);copyValue(this.form); removerHere(this.form);" href="#" id="cdfmaster" style="text-decoration:none;">CDF Master</a><a onclick="addInput(this.form);copyValue(this.form); removerHere(this.form);" href="#" id="meninojesus" style="text-decoration:none;">Menino Jesus</a><a  onclick="addInput(this.form);copyValue(this.form); removerHe(this.form);" href="#" id="ethos" style="text-decoration:none;">Ethos</a></div>')
  ;
  jQuery('#colegios,#label3').remove();
});

body {
  padding: 20px;
  font-family: Helvetica;
}

input,
label {
  padding: 10px;
  display: inline;
}

label {
  float: left;
}

a {
  padding: 20px;
  color: black;
  font-size: 16px;
  display: flex;
  margin: 20px;
}

a:hover {
  color: blue;
  font-weight: bolder;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="label1">Inscrição</label>
<input id="inscricao">

<label id="label2">Unidades</label>
<input id="unidades">

<label id="label3">Colégios</label>
<input id="colegios">

Test2!

Source-code work now! enter code here;D

STEPS/ Translation 8!

// $().ready(function(e){}
$("#inscricao").one("click", function() {
    $('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;">Presencial</a><a id="online"  style="text-decoration:none;">Online</a></div>');
    jQuery('#inscricao').remove();
});


$("#unidades").one("click", function() {
    $('#unidades').after('<div style="text-align:center"><a style="text-decoration:none;">Recife</a><a id="jabatao" style="text-decoration:none;">Jabatão</a></div>');
    jQuery('#unidades').remove();
});


$("#colegios").one("click", function() {
    $('#colegios').after('<div style="text-align:center"><a id="cdfmaster" style="text-decoration:none;">CDF Master</a><a id="meninojesus" style="text-decoration:none;">Menino Jesus</a><a  id="ethos" style="text-decoration:none;">Ethos</a></div>');
    jQuery('#colegios').remove();

});


$("#presencial, #online").click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );  
});

$("#recife, #jabatao").click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );
  <input class="nomecompleto u-full-width" id="nome" type="text" autocomplete="off" required>
});

$("#cdfmaster, #meninojesus, #ethos").click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );

});

Steps of Source-Code

If(click) in input... this input: <input class="inscricao u-full-width" id="nome" type="text" autocomplete="off" required>
So... remove input and add anchor....! this anchor: <a>Presencial</a>Online<a></a>
If(click) in anchor "if (click) in anchor is each".... So... get value and add in input.<input class="inscricao u-full-width" id="nome" type="text" autocomplete="off" required>

KnowHow

I use $("#inscricao").one("click", function() { $('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;">Presencial</a><a id="online" style="text-decoration:none;">Online</a></div>');jQuery('#inscricao').remove();});

Steps of 1

$("#inscricao").one("click", function() {

Describe: Get input with id and if (click)... one and... replace inscricao with id inscricao....

So example

$('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;">Presencial</a><a id="online" style="text-decoration:none;">Online</a></div>');

jQuery('#inscricao').remove();

So example

$("#inscricao").one("click", function() { $('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;">Presencial</a><a id="online" style="text-decoration:none;">Online</a></div>');jQuery('#inscricao').remove();});

Describe: I add click in input that remove input and add anchor.

Step Source-Code 2

$("#presencial, #online").click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );  
});

Describe: If click in anchor... So, add value text in input. 'Value text is value from here Presencial'... So, add value in input is 'Get value text in >Presencial< and add in input'

Problem

How return in input if I remove in Source-Code 1?

Solve!

Add after in anchor! But, How I add?

Problem and Describe

How I return in one input... if click one in anchor?
How Add two variables in one?

Example 1 and 2

$("#inscricao").one("click", function() {
    $('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;">Presencial</a><a id="online"  style="text-decoration:none;">Online</a></div>');
    jQuery('#inscricao').remove();
$("#presencial, #online").click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );  
});
});

Describe: I trying this... But, no work :/

Problem

Describe: I trying one function with this... But, no work :/ Why?

Solve with the simple

Stop writing bad code! Stop being a kiddie script! Lol ... ^^

How?

Read http://api.jquery.com/val/#val-function
Read https://api.jquery.com/click/
Use concept val-function + click function

How?

$( "#multiple" ).val([ "Multiple2", "Multiple3" ]);

Describe: You have used id and get value inside options in select. Sorry, I no understand... and Calm!

So... Add this inside value as value input!
With this... you no remove input and add anchor and add new input and remove anchor!

How!?

I'm not stupid, I do not understand code! ;D

Step of Solve

1. $("#multiple").val(["Multiple2","Multiple3"]);
2. Add values of id #Multiple2, #Multiple3 if click in input!

Source-code

// set id and add ip select
 $("#presencial,#online").click(function() {
       $("#presencial,#online").text( $("#inscricao").val(); )
     
      // if click in select add value in input
        $("input").add(); // add input
   });


// I tried like this

// If I click in select... So... add value of select in input 
$( "#Multiple2, #Multiple3" ).click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );
  
});

// But, no work... I trying add $(this).prev('input').val("#Multiple2, #Multiple3").click;

Your first fiddle has a syntax error, check the JavaScript console. — Barmar, Apr 18 '19 at 19:16
Please use [Stack Snippets](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) instead of jsfiddle. — Barmar, Apr 18 '19 at 19:18
**Add anchor and if (click)... add value of text in (input).** Add the value where? — Barmar, Apr 18 '19 at 19:19
How does text get into the input? You can't type into it, because first you have to click on it, and that removes it. — Barmar, Apr 18 '19 at 19:23
You're just saying the same thing you wrote in the question. I didn't understand it the first time, I still don't. — Barmar, Apr 18 '19 at 19:26
Where should it add the value of the text of the anchor? You can't add it to the input, because you removed the input. — Barmar, Apr 18 '19 at 19:26
You have `this.form`, but there's no form in your HTML. The `form` attribute only works on inputs, not anchors. — Barmar, Apr 18 '19 at 19:33

score 0 · Answer 1 · answered Apr 18 '19 at 19:39

You can use the replaceWith() method to replace the anchor with an input. Use $(this).text() to get the value of the new input.

Use event delegation to write the event handler for the anchors, rather than putting onclick attributes in each of them. See Event binding on dynamically created elements?

$(document).on("click", "a", function() {
  $(this).replaceWith($("<input>", {
    value: $(this).text()
  }));
});

$("#inscricao").one("click", function() {
  $('#inscricao, #label1').replaceWith('<div style="text-align:center"><a id="presencial" style="text-decoration:none;" href="#">Presencial</a><a id="online"  style="text-decoration:none;">Online</a></div>');
});

$("#unidades").one("click", function() {
  $('#unidades,#label2').replaceWith('<div style="text-align:center"><a style="text-decoration:none;">Recife</a><a href="#" id="jabatao" style="text-decoration:none;">Jabatão</a></div>');
});

$("#colegios").one("click", function() {
  $('#colegios, #label3').replaceWith('<div style="text-align:center"><a href="#" id="cdfmaster" style="text-decoration:none;">CDF Master</a><a href="#" id="ethos" style="text-decoration:none;">Ethos</a></div>');
});

body {
  padding: 20px;
  font-family: Helvetica;
}

input,
label {
  padding: 10px;
  display: inline;
}

label {
  float: left;
}

a {
  padding: 20px;
  color: black;
  font-size: 16px;
  display: flex;
  margin: 20px;
}

a:hover {
  color: blue;
  font-weight: bolder;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="label1">Inscrição</label>
<input id="inscricao">

<label id="label2">Unidades</label>
<input id="unidades">

<label id="label3">Colégios</label>
<input id="colegios">

Use a class to specify the anchors that should have this special behavior, and change `"a"` to `"a.class"` where `class` is the class name you've chosen. — Barmar, Apr 18 '19 at 20:52

How to copy the value of the click through the anchor and add this value through the input and remove?

Test1

Test2!

How?

How?

1 Answers1