Load an element in ajax as user chooses

Question

I have a code that inserts a field textearea as a choice of input radio. I would like to simplify this code by making it use Javascript only. Is it possible? Follow below:

HTML

<p>2.3 - Você estuda? </p>
<input type="radio" name="estuda" id="estuda" value="1" required=""> Sim 
<input type="radio" name="estuda" id="estuda" value="2" required=""> Não 
<div id="ret-ajax"></div>

Javascript

$('#estuda').change(function () {
  var chars = (this.value);
  $.post(URL + 'Ajax/pesquisa', {val: chars}, function (busca) {
  $('#ret-ajax').html(busca);
 });
});

Ajax

$char = $_POST['val'];
$body = '';
if($char == 1){
     $body .= '<textarea name="curso" rows=4></textarea>';
  }
   elseif($char == 2){
     $body .= '';
}

$retorno = $body;

Answer 1

You had a serious error in your html, there can’t be two identical id’s (#estuda), you can put as class (.estuda), does the following:

$('.estuda').change(function () {
  var chars = parseInt(this.value);
  if(chars === 1) {
    $('#ret-ajax').html('<textarea name="curso" rows=4></textarea>');
    return;
  }
  $('#ret-ajax textarea').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>2.3 - Você estuda? </p>
<input type="radio" name="estuda" class="estuda" value="1" required=""> Sim 
<input type="radio" name="estuda" class="estuda" value="2" required=""> Não 
<div id="ret-ajax"></div>

Answer 2

You shouldn’t wear one yourself id for two different elements. http://www.w3schools.com/TAGS/att_global_id.asp

That said, I suggest you remove the function $.post and compare in Javascript itself. Something like:

$('#estuda').change(function () {
  var chars = (this.value);
  if(chars == 1)
     $('#ret-ajax').html('<textarea name="curso" rows=4></textarea>');
  else
     $('#ret-ajax textarea').remove();
});

Answer 3

The attribute id should be unique but you can get the entries by name, add a listener (Listener) to each radio button and create a textarea if it is option 1. With pure Javascript can be something more or less..

// obtém todas os elementos com name estuda
var entradas = document.getElementsByName("estuda");

// adiciona um listener change para cada um 
for (var i = 0; i < entradas.length; i++) {
  entradas[i].addEventListener("change", criar);
}

// funcao que verifica o valor do radio 
function criar() {
  if (this.value == 1)
    document.getElementById("ret-ajax").innerHTML = '<textarea name="curso" rows=4></textarea>'; // innerHTML adiciona um conteudo HTML ao elemento
  else
    document.getElementById("ret-ajax").innerHTML = '';
}

<p>2.3 - Você estuda?</p>
<input type="radio" name="estuda" id="estudaS" value="1" required="">Sim
<input type="radio" name="estuda" id="estudaN" value="2" required="">Não
<div id="ret-ajax"></div>