1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:05 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Quiz using Javascript

         

toplisek

9:52 pm on Mar 20, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I like to set simple quiz form. Can be improved Javascript as click inside textarea will open new input for the email. I do not like to use POPup in this case due to usability issues.

<!DOCTYPE HTML>

<html>

<head>
<title>Toggle</title>

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

Add_input1.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>

Gowri pandiyan

6:43 am on Mar 24, 2017 (gmt 0)

10+ Year Member



Try this code

<!DOCTYPE HTML>

<html>

<head>
<title>Toggle</title>

<script src="/jquery.min.js"></script>

<script>
$(document).ready(function(){
$("#clickedarea").focus(function(){
$("#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" 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>

toplisek

3:46 pm on Mar 25, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thank you for all replies.

tangor

5:28 am on Mar 26, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



As an aside, js is subject to many blockers out there whereas Perl or other server side options are not. Might look into that as a fall back just in case.

Personally I web with JS disabled and about 30% of the web does as well.

I suggest this only for critical operations, not as any statement against JS!

toplisek

8:17 pm on Mar 27, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Responsive webdesign is based on JS.

tangor

11:50 pm on Mar 27, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



JS or CSS? I suspect the latter.

toplisek

8:57 am on Apr 1, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I like to modify this script into modal window. Can you check please how to solve in this case that modal window will work also inside Bootstrap?
I have done starting code what I mean. It is just as an example and used ID called: #myDialog

<!DOCTYPE HTML>

<html>

<head>
<title>Toggle using modal window in Bootstrap</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script>
$(document).ready(function()
{

$("#clickedarea").focus(function()
{
$("#myDialog").dialog(
{
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
Email: function() {
$("#clickedarea_hide").show().appendTo(this);
}
}
}
);
}
);
}
);

</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>

<!-- Button trigger modal -->
<!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myDialog">Start dialog!</button-->>

<!-- Modal -->
<div class="modal fade" id="myDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog"><div class="modal-content"><div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Panel inside of Modal window</h4>

</div>

<div class="modal-body">

<div class="row"><div class="col-md-4"><div class="panel panel-default">

<div class="panel-heading">Panel title</div>
<div class="panel-body">Panel content</div>

</div></div>

<div class="col-md-4"><div class="panel panel-default"><div class="panel-heading">

<h3 class="panel-title">Panel title</h3>

</div>

<div class="panel-body">Panel content</div>

</div></div>

<div class="col-md-4"><div class="panel panel-default"><div class="panel-heading">

<h3 class="panel-title">Panel title</h3>

</div>

<div class="panel-body">Panel content</div>

</div></div></div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div></div></div></div>

<div id="push"></div>

</body>

</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:05 pm May 13, 2026