Clicked body text and shown email field

I like to set clicked texarea (ID clickedarea) than it should be shown email input. How to do it using Javascript jQuery?


<!DOCTYPE HTML>

<html>

<head>
  <title>Form and clicked area</title>
</head>

<body>
<div class="clicked_form_area1">

<form id="" novalidate="novalidate">

<label>clicked form</label>

<textarea rows="" id="clickedarea" name="clickedinput"></textarea>

<div id="clickedarea_hide" style="display: none;">

<label>Email</label>
<input name="emailinput" type="text">

</div><!-- .clickedarea_hide -->

<button type="submit">Submit form</button>

</form>

<div id="alert-message-success" style="display:none;">
Thanks for your message!
</div>

</div><!-- .clicked_form_area1 -->
</body>

</html>

As I understand you want to cilck in the textarea and send its content?

Is this what you’re looking for?

$(“#clickedarea”).focus(function(){
$(“#clickedarea_hide”).show()
})

Thank you for this information.
So, this is the correct code:


<!DOCTYPE HTML>

<html>

<head>
  <title>Form and clicked area</title>
<script>
jQuery(document).ready(function()
  {

    jQuery("#clickedarea").focus(function()
      {
        jquery("#clickedarea_hide").show()
      }
    )

  }
);
</script>

</head>

<body>
<div class="clicked_form_area1">

<form id="" novalidate="novalidate">

<label>clicked form</label>

<textarea rows="" id="clickedarea" name="clickedinput"></textarea>

<div id="clickedarea_hide" style="display: none;">

<label>Email</label>
<input name="emailinput" type="text">

</div><!-- .clickedarea_hide -->

<button type="submit">Submit form</button>

</form>

<div id="alert-message-success" style="display:none;">
Thanks for your message!
</div>

</div><!-- .clicked_form_area1 -->
</body>

</html>

You can use the dialog widjet also to as modal doing your job.It’s more delicate and practical without adding new element in the DOM. To use the dialog widjet first set in the head of document the latest UI cdn library WITHOUT jquery library (the reason is that many times there is a conflict between them due to latest versions).
Second I made a small changes in yout HTML code (I added another one div with class=dialog)
HTML:

<div class="clicked_form_area1">

<form id="" novalidate="novalidate">

<label>clicked form</label>

<textarea rows="" id="clickedarea" name="clickedinput"></textarea>

<div id="clickedarea_hide" style="display: none;">

<label>Email</label>
<input name="emailinput" id="email" type="text">

</div><!-- .clickedarea_hide -->

<button type="submit">Submit form</button>

</form>
<div class="dialog"></div>
<div id="alert-message-success" style="display:none;">
Thanks for your message!
</div>

</div>

Finally I made the following JQuery code:

$(document).ready(function()
  {

    $("#clickedarea").focus(function()
      {
        $(".dialog").dialog({
          modal:true,                            
          buttons: {
          Cancel: function() {
          $(this).dialog('close');
           },
           Email:function(){
           $("#clickedarea_hide").show().appendTo(this);
            },
            Send:function(){
            var a=$('#email').val();
            return a;
            }
           }                  
          });
      }
    );
  }
);

Tested in liveweave.

As you can see the function at the end of the buttons property in dialog method returns a variable a that is the value of the input element inside the modal.

Thank you.


<!DOCTYPE HTML>

<html>

<head>
  <title>Toggle</title>

<script>
var Add_input1 = {
init: function() {
    $("#clickedarea").focus(function()
      {
        $("#clickedarea_hide").show()
      }
    )
  }
}

var Modal_popup1 = {
init: function() {

    $(document).ready(function()
      {

        $("#clickedarea").focus(function()
          {
            $(".dialog").dialog(
              {
              modal: true,
              buttons: {
                Cancel: function() {
                    $(this).dialog('close');
                  },
                Email: function() {
                    $("#clickedarea_hide").show().appendTo(this);
                  },
                Send: function() {
                    var a = $('#email').val();
                    return a;
                  }
                }
              }
            );
          }
        );
      }
    );

  }
}
Add_input1.init();
//Modal_popup1.init();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>

<body>

<div class="clicked_form_area1">

<form id="" novalidate="novalidate">

<label>clicked form</label>

<textarea rows="" id="clickedarea" name="clickedinput"></textarea>

<div id="clickedarea_hide" style="display: none;">

<label>Email</label>
<input name="emailinput" id="email" type="text">

</div><!-- .clickedarea_hide -->

<button type="submit">Submit form</button>

</form>
<div class="dialog"></div>
<div id="alert-message-success" style="display:none;">
Thanks for your message!
</div>

</div>

</body>

</html>

I have done both examples. I’m not sure but it is any action.

I have solved. Thank you for all replies.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.