Changing modal content with Javascript

Question

Good morning,

I know very little about Jquery and Javascript (almost nothing) and I have a problem. Is the following:

On my site I have two buttons, which open a modal (generated with css). The content of the modal is basically the same, containing a contact form.

But I need the title and value of my Hidden input to be modified according to the button I clicked.

Summarizing: I need that when I click the button on the first link, the title gets Plano 1, and the value of the Hidden input gets FORM_PLANO1.

And when you click the second link button the title gets Plano 2 and the value of the Hidden input gets FORM_PLANO2.

My links that open to Modal:

<a href="atendimento-online#send" class="btn2">Plano 1</a>

<a href="atendimento-online#send" class="btn2">Plano 2</a>

The HTML of Modal:

<div id="send" class="modalDialog">
<div>
 <div class="header_modal">
    <span class="icone_modal"></span>
    <div>
      <span class="title_modal">Atendimento Online | (TITULO Plano1/Plano2) </span>
      <span>Preencha os dados para solicitar um contato</span>
    </div>
</div>
 <a class="close" title="Fechar" href="ferramenta-de-disparo-de-email-marketing#close">X</a>
<div>
<form name="contact" action="contact/send" method="post">
  <input type="hidden" name="form_input" value="(FORM_PLANO1/FORM_PLANO2)" />
<div class="input-group01">
<span class="input-group-addon" id="basic-addon1">Nome</span><input type="text" name="name" class="input_name" />
<span class="input-group-addon" id="basic-addon1">Email</span><input type="text" name="email" class="input_email" />
</div>

The CSS that generates Modal:

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}


.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog > div {
width: 630px;
position: relative;
margin: 5% auto;
background: #fff;

-moz-box-shadow: 1px 1px 30px #000;
-webkit-box-shadow: 1px 1px 30px #000;
box-shadow: 1px 1px 30px #000;
}

 .close {
background: #318A14;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

input, textarea { 
background: none repeat scroll 0 0 #FFFFFF; 
border: 1px solid #C9C9C9; 

color: #545658; 
padding: 8px; 
font-size: 14px; 
border-radius: 2px 2px 2px 2px; 

Can someone help me with this? Thank you in advance.

Answer 1

You can do it like this:

$('.btn2').on('click', function(e){
    var plano = $(this).data('form');
    var titulo = this.innerHTML;

    $('#send .title_modal').html('Atendimento Online | ' + titulo);
    $('#send input[name="form_input"]').val(plano);
});

He hears clicks on the buttons and searches title and plan. I joined in the HTML of these buttons data-form="FORM_PLANO1" and 2 for jQuery to pick up.

In the second part applies these values.