Build, Modify, Output Javascript Array - javascript

I'm trying to accomplish the following...if it's asking too much in a single question then some simple steps on what events to use will still help.
There are 2 blank textareas sitting next to eachother - Input and Output. Between them are two inputs Before and After. I want to type or paste a list of words into Input separated by line break, for example:
melons
peaches
apples
And then use the Before and After inputs to add in a word/phrase/symbol before and after each keyword. So if I type 'buy' in before and 'today' in after, the Output text area will display:
buy melons today
buy peaches today
buy apples today
I'd like to accomplish this without having any page refreshing. We can assume the form elements are named as follows:
<textarea id="input"></textarea>
<input type="text" id="before" />
<input type="text" id="after" />
<textarea id="output"></textarea>
I've been try to at least get the Input text to display in Output using this code, but that's not even working:
$(document).ready(function(){
$('#input').keyup(function(e){
$('#output').html($(this).val());
});
});
Any guidance would be awesome!

a compact one:
$("#input,#before,#after").on("keyup", function () {
$("#output").val(
$.map($("#input").val().split("\n"), function (n, i) {
return $("#before").val() + " "+ n + " " + $("#after").val();
}).join("\n"));
});
example

This would do the trick:
function update_output(){
//Split input by newline
var input_words = $('#input').val().split('\n');
var output_lines = new Array();
//Iterate over each keyword and prepend and append values
$.each(input_words, function(i, word){
output_lines.push($('#before').val()+' '+word+' '+$('#after').val());
});
//Display output in textarea
$('#output').val(output_lines.join('\n'));
}
You just need to choose when you want to update the output textarea, maybe bind it so it updates every time the #input or #before and #after changes:
$('#input,#before,#after').on('change',update_output);

Alright, I can help you to get started. My answer is not complete, but you can have a very good idea from here. Note I wrote this code to be easy to understand and I am not using sophisticated approaches on purpose.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$("#input").keypress(function(key){
if(key.which == 13) {
refreshData();
}
});
});
function refreshData() {
var beforeVal = $("#before").val();
var inputLines = $("#input").val().split(/\r\n|\r|\n/g);
var desiredOutputVal = "";
for(var i=0; i<inputLines.length; i++) {
desiredOutputVal += beforeVal + inputLines[i] + "\n";
}
$("#output").val(desiredOutputVal);
}
</script>
</head>
<body>
<form>
<textarea id="input"></textarea>
<input type="text" id="before" />
<input type="text" id="after" />
<textarea id="output"></textarea>
</form>
</body></html>

Related

Javascript eval() input field and output answer in same field

I am learning and want to know if there is a way to do this, let's say I have HTML input field:
<input type=text id="input">
Nearby I would have one button:
<button id="equal">=</button>
I want to write javaScript that would evaluate statement (if it is an equation like "2+3" "6/2" etc) in that text field and replace that statement with an answer for the equation. What I tried:
var equal = document.querySelector("#equal");
var input = document.querySelector("#input");
equal.addEventListener('click', function () {
eval(input.value) += input.innerText;
});
I already made only possible input 1234567890 and /*-+
If there is a way, I would highly appreciate the answer with explanation, started javaScript just recently so it is still like a dark forest for me, but I do have a wish to have a better understanding of it. :)
You just need to swap eval(input.value) += input.innerText to input.value = eval(input.value)
var equal = document.querySelector("#equal");
var input = document.querySelector("#input");
equal.addEventListener('click', function() {
input.value = eval(input.value);
});
<input type=text id="input">
<button id="equal">=</button>
Also, it would be recommended to use document.getElementById instead of document.querySelector, though there isn't much difference (mainly compatibility with older browsers). Read more
You want the place where you type in the expression to be different than the place where you display it:
<!DOCTYPE html>
<html>
<body>
<button id="evaluate">Get answer</button>
<input id="input" />
<p id="result">waiting for answer...</p>
<script>
var evaluate = document.getElementById("evaluate");
var input = document.getElementById("input");
var result = document.getElementById("result");
evaluate.addEventListener('click', function () {
try {
result.textContent = eval(input.value);
}
catch (error) {
result.textContent = "waiting for answer...";
}
});
</script>
</body>
</html>

Jquery Not working to create new Inputs

Below is my Html Doc and the JQuery does not do anything when the range input changes, any assistance is much appreciated as I am extremely new to web design. Even the alert doesn't work at the top so I am unsure as to what my problem is. My belief is somehow the script is never being called or it's a problem with it being an html doc but either way thank you.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var num=0;
var numOptions = new Array(100);
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
$(document).ready(function(){
$("#numQuestions").on('input',function(){
var numbQuestions = $("#numQuestions".text());
if(num>numbQuestions){
for(i=numbQuestions;i<=num;i++){
try{
$("#qRowNum'+i).remove();
}catch(err){
}
}
}else{
for ( i=num; i < numbQuestions; i++)
{
var row = '<div id="qRowNum'+ i '">
#the below function is not implemented in this version
<input type="text" placeholder="Question '+i'"> <input type="range" name="numOptions'+i'" min="0" max="5" placeholder="Number Of Options" onchange="CreateOptions(this);" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();> </div>';
$("#questionRows").append(row);
//New script test
}
}
num = numbQuestions;
});
});
<div id="questionRows">
</div>
<input type="submit" value="Start">
</form>
</body>
</html>
This is your problem:
var numbQuestions = $("#numQuestions".text());
Firstly I think you mean this:
var numbQuestions = $("#numQuestions").text();
But that is also not true because an input field has not text property. They have value So do this:
var numbQuestions = $("#numQuestions").val();
And this is another problem: $("#qRowNum'+i) When you start selector by double quotation, you need to end this also by double quotation. But it still is not a true jquery selector.
I think you need to more studies about jquery.

How to apply keypress and mousedown event on dynamically created textbox

I am working in an application where i have three textboxes dynamically polulated,one is for input value 2nd one is for a time and 3 rd one is also for a time both 2nd and 3 rd boxes have timepicker api in it.So now what i need i will type something in the textbox and also select time from those two timepicker boxes and values will be appending on the respective textboxes on top of them.Like i am giving a fiddle where i have implemented the situation i have reached so far,This is it DEMO
So i will write something on textbox1 and that will be that will be showing on textbox on top of it and also i will select a time from 2 nd box and 3 rd box and that will be on the 2 nd and 3 box on top of that.I am trying to use keypress and mousedown but that is not working on dynamic population of the textboxes like i tried using
$('#TextBoxContainer').on('keypress', 'input', function () {
});
But this is not giving the value of the textboxes .Somebody please help
Try this code.
Note : I used comma to separate the values from different text boxes.
Demo
HTML
<input id="text1" type="text" value="" />
<input id="text2" type="text" value="" />
<input id="text3" type="text" value="" />
<div id="TextBoxContainer">
<input id="btnAdd" type="button" value="Add" />
</div>
JS
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
$(".time").timepicker();
$('.txt1,.txt2,.txt3').change(function () {
UpdateData()
});
});
$("#btnGet").bind("click", function () {
var valuesarr = new Array();
var phonearr = new Array();
var phonearr1 = new Array();
$("input[name=DynamicTextBox]").each(function () {
valuesarr.push($(this).val());
$('#DynamicTextBox').val(valuesarr);
});
$("input[name=phoneNum]").each(function () {
phonearr.push($(this).val());
$('#phoneNum').val(phonearr);
});
$("input[name=phoneNum1]").each(function () {
phonearr1.push($(this).val());
$('#phoneNum1').val(phonearr1);
});
alert(valuesarr);
alert(phonearr);
alert(phonearr1);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input class="txt1" name = "DynamicTextBox" type="text" value = "' + value + '" /> <input class="txt2 time" id="myPicker" class="time" type="text" /> <input name = "phoneNum1" id="phoneNum1" class="time txt3" type="text" /><input type="button" value="Remove" class="remove" />';
}
function UpdateData() {
var text1 = ''
$('#TextBoxContainer').find('.txt1').each(function (index, Obj) {
if ($(Obj).val()) text1 += $(Obj).val() + ','
})
$('#text1').val(text1)
var text2 = ''
$('#TextBoxContainer').find('.txt2').each(function (index, Obj) {
if ($(Obj).val()) text2 += $(Obj).val() + ','
})
$('#text2').val(text2)
var text3 = ''
$('#TextBoxContainer').find('.txt3').each(function (index, Obj) {
if ($(Obj).val()) text3 += $(Obj).val() + ','
})
$('#text3').val(text3)
}
If I understood you correctly, you don't need processing keypress and mousedown events.
You just need to process onsubmit event of your form. Just read values from textbox, DateTimeBox, DateTimeBox and paste them to newly created textbox2, DateTimeBox21, DateTimeBox22.
In case you want to create dynamicly 3 input boxes with the value of text1 text2 and text3 here is the result.
And this is pretty much what i've changed:
...
$("#btnAdd").bind("click", function () {
var a = $("#text1");
var b = $("#text2");
var c = $("#text3");
var div = $("div");
div.html(GetDynamicTextBox(a, b , c));
...
Obviously in GetDynamicTextBox() function i'm filling the InputBoxes with the expected values (from a, b and c).
In case you want to update text1 text2 and text3 with the values of the generated input boxes this would do it:
here is the relevant code i've changed on this one:
$('.txt1').bind('keyup',function(e){
var code = e.which;
if(code==13)e.preventDefault();
if(code==32||code==13||code==188||code==186){
$('#text1').val($('#text1').val()+', '+$(this).val());
}
});
For the above solution to work, you've got to press enter after changing each input box.
In case you preffer to not press enter here you've got a solution which works when the generated input box loses the focus.
This is the relevant code:
$('.txt1').bind('focusout',function(){
$('#text1').val($('#text1').val()+', '+$(this).val());
});
You might want to check if the new value is the same that the old one or not in this one.
PS: I'm showing here the snippet of just the first inputbox since for the rest of them is pretty much the same. The complet solution is in the jsfiddle though.

3 text box Math in Javascript

Hi I am NewBee in Javascript. This is my second week.
Below is the code that has a form with three input fields.
The relationship of the fields is:
the second field is twice the value of the first field
the third field is the square of the first field
I have managed to do the above but i am not able to do the below :
If a user enters a value in the second or third field, the script should calculate the appropriate value in the other fields. Currently the code works well ONLY if I enter the value in the first field.
I hope I explained well in other words : how do I enter say 144 in the last textbox and the other 2 textboxes show 12 and 24 respectively. Or If I enter 24 first and first and the third text boxes show 12 and 144.
Thanks
Vipul
<html>
<head>
<script>
window.onload = init;
function init() {
var button = document.getElementById("usrButton");
button.onclick = save;
onkeyup = doMath;
function doMath(){
var base = document.getElementById("base").value;
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
}
</script>
</head>
<body>
<form>
<input type="text" name="base" id="base" onkeyup= "doMath()">
<br><br>
<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= doMath()>
<br><br>
<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= doMath()> <br><br>
</form>
</body>
</html>
take a look at the code below:
<html>
<head>
<script>
window.onload = init;
var init = function(){
var button = document.getElementById("usrButton");
button.onclick = save;
onkeyup = doMath;
}
var doMathbase = function(){
console.log('here');
var base = document.getElementById("base").value;
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
var doMathBase2Time = function(){
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value;
var base = document.getElementById("base").value = (baseNumber_timesTwo/2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
</script>
</head>
<body>
<form>
<input type="text" name="base" id="base" onkeyup= "doMathbase()">
<br><br>
<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= "doMathBase2Time()">
<br><br>
<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= "doMathBaseSquare()">
<br><br>
</form>
</body>
You need to bind another function to the second and third field. I did it to the second. Now if you entered a number in the second field it return the 'base' number and the square of the base.
Try do it for the third :)
This should fit your needs:
Fiddle
//declaring those earlier saves you to get those by ID every
//time you call "doMath()" or something else
var base = document.getElementById("base");
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo");
var baseNumber_square = document.getElementById("baseNumber_square");
function clearUp() {
base.value = "";
baseNumber_timesTwo.value = "";
baseNumber_square.value = "";
}
function doMath() {
//check which of the fields was filled
if(baseNumber_timesTwo.value){
base.value = baseNumber_timesTwo.value / 2;
}
if(baseNumber_square.value){
base.value = Math.sqrt(baseNumber_square.value);
}
//fill other fields according to that
baseNumber_timesTwo.value = (base.value*2);
baseNumber_square.value = (base.value*base.value) ;
}
As you see: There is no need to write more than one arithmetic function if you make sure that only one value is given at the time of evaluation (this is achieved by the cleanUp()
method)
However there are still some flaws in this solution! Since you are a js beginner I would suggest you to read the code and think about possible solutions for those problems as a little exercise :-)
- You cannot enter a 2 (or more) digit number in any field, why not? What do you have to change in order to allow such numbers as input?
- Why is it better (in this case!) to set the values to " " instead of '0' in the cleanUp function? Why does the code break when you try using '0' instead of "" ?
- Why does doMath() only check for values in the last two field (baseNumber_timesTwo and baseNumber_square) while ignoring the 'base' field?
Greetings, Tim

understanding click(),change() and inputs scopes

I am trying to understand scope as far as inputs and clicks or checks are concerned. I am working on a project and what I am trying to do is. Ask if they work out a lot, they will answer yes or no. then I will ask them 3 question either way. I will ask how much they can bench, how much they can squat, how much they can curl. I have this part set up I will give them feedback based on what they input. What I am trying to do is add a check box to it for them to select if they are male or female. I think I should do it something like this
function one() {
a = 100;
b = 200;
c = 300;
return two();
function two() {
a += a;
b += b;
c += c;
return three();
function three() {
a += 1;
b += 1;
c += 1;
return four();
function four() {
console.log(a, b, c);
}
}
}
}
one()
I guess my question is how would I do this with click and checks and inputs. It seems no matter where I add the check box to what I have, it will not work for some reason. Either there will be a issue with the first question... Do you work out a lot? a the question will not be there. Or I will get a post era. I have a fiddle below. If someone would tell me how to make it work...or even better show me it working, I will be very thankful. I think this would help a lot of people out. I have seen a lot of good answers to this question on here, but no working examples. I think the most helpful thing for some people, is a working example they can see, I know it is for me.
ps in my fiddle i am recycling the same inputs for the questions i'm asking. Whether they work out or not, i would like to do it properly, but not my main issue.
http://jsfiddle.net/vicky1212/G24aQ/10/
I have added some explanation with the code..
$('.myOptions').change(function () {
// Remove the active class
$('.list').removeClass('active');
// Add the active class
// this.value holds the current value that is selected
// No need to use filter
$('.' + this.value).addClass('active');
});
$('#butt').click(function () {
// Better to have Lesser variables ,
var active = $('.list.active'),
$boxOne = active.find('.box1'),
$boxTwo = active.find('.box2'),
$boxThree = active.find('.box3'),
$output = $('#output'),
total = (parseInt($boxOne.val(), 10) + parseInt($boxTwo.val(), 10) + parseInt($boxThree.val(), 10)),
msg = '';
$output.addClass('error');
var dropdownValue = $('.myOptions').val(),
// you need to select the inputs specifically
// you were trying to access it using $('input') that gives the list of all the inputs
// on your page.. So you need to be more specific
$genderRadio = $('input[name=gender]');
// If dropdown is empty show some message
if (dropdownValue === '') {
msg = 'Please select an option....';
} else if (isNaN(total)) {
msg = 'Input three numbers, please...';
} // If gender is not selected show a specific message
else if ($genderRadio.filter(':checked').length === 0) {
msg = 'Please select your gender....';
} else {
// If it comes to this statemenet it means there is no error
// remove the error class
$output.removeClass('error');
if (total < 14) {
msg = "That's bad, should be higher...";
} else if (total > 15) {
msg = "That's bad, should be lower...";
} else {
msg = "You got it... Nice work.";
}
var genderPrefix = $genderRadio.filter(':checked').val() === 'Male' ? 'Sir..' : 'Miss..';
msg = genderPrefix + msg;
}
$output.text(msg);
});
Check Fiddle
I will give an little introduction to javascript pattern with my example. you can read about them in http://addyosmani.com/resources/essentialjsdesignpatterns/book/ is not a easy reading but when you are ready you will understand pretty much about how to organize you javascript code with that book.
meanwhile I can advise you to read about how to code forms with good practices at http://net.tutsplus.com/tutorials/html-css-techniques/20-html-forms-best-practices-for-beginners/
Ok beside that here are the working example about how to work with click and forms http://jsfiddle.net/ncubica/BQaYz/
HTML
<label><input type="Radio" name="gender" id="male" value="male" /> male</label>
<label><input type="Radio" name="gender" id="female" value="female" />female</label>
<input type="text" id="name" placeholder="name" />
<input type="text" id="lastname" placeholder="lastname" />
<input type="button" id="submit" value="store" />
javascript
var survey = (function(_module){
var modulename = _module;
var user = {};
/*private methods*/
function init(){
observers();
}
function observers(){
$(document).on("click","#submit", survey.store)
}
/*public methods*/
$r = {}
$r.store = function(){
user.name = $("#name").val();
user.lastname = $("#lastname").val();
user.gender = $("input:radio[name=gender]:checked").val();
survey.toString();
}
$r.toString = function(){
var genderStr = (user.gender == "male") ? "Man" : "Girl";
alert(user.name + " " + user.lastname + " is " + genderStr);
}
$r.init = function(){
init();
}
return $r;
})("survey")
survey.init();
Ok, I know at first look a little "big" code but is really simple, in javascript a variable can take any kind of form from a function to a normal string.
here we are working with anonymous functions to create a module will help us to work more clear and structure, this variable will have 2 kind of methods and variable, public and privates.
for make a method public we have to return the methods in an object after we finish to run the code this is why exist the $r variable which is an object who have function by properties, and at the end of the code you return it doing return $r with this pattern now you can easily can navigate throw methods and catch events like click, change, etc....
you only should have to add this event to the method observers create a private or public function which will be activate after the event an you are done.
Read the code and if you have any further question you can ask me anything. I try to solve you problem and structure you code.
best good luck
[Here is below answer as a jsFiddle]
This answer is intended as a starter. I tried to write it at a beginner level, so that you can customize it for yourself. Hopefully, this simple example can give you a starting place. I used the example of a training gym asking some basic questions of their users.
My approach was to create an empty DIV, called #ques, where all Questions and output will be displayed, and a hidden <form> containing hidden fields that will store the responses.
I created a counter, cnt, which is incremented after each question.
There is a function called ask_next_ques() that takes the parameter cnt. Depending on where we are in the survey, it asks the next question (eg. when cnt==3 it asks the third question).
Unfortunately, javascript insists that all strings be on one line. Therefore, I built the html like this:
var qq = '
<ul style="list-style:none">
<li>
What can you curl?<br />
<input type="text" id="curl"> Kg
</li>
<li>
What can you bench?<br />
<input type="text" id="bench"> Kg
</li>
<li>
What can you lift?<br />
<input type="text" id="lift"> Kg
<input type="button" id="cbl_btn" value="Go">
</li>
</ul>
';
and then re-arranged it onto one line, like this:
var qq = '<ul style="list-style:none"><li>What can you curl?<br /><input type="text" id="curl"> Kg</li><li>What can you bench?<br /><input type="text" id="bench"> Kg</li><li>What can you lift?<br /><input type="text" id="lift"> Kg<input type="button" id="cbl_btn" value="Go"></li></ul>';
Much more difficult to read that way, but that's how javascript wants things.
As each question is answered, the responses are read by javascript/jQuery and then saved into hidden fields inside the <form> structure.
When all questions have been asked, you can just POST the form to another (PHP?) file for processing (storage in a MySQL database?), or email the answers to yourself, or re-display them to the user, or... I chose to display the answers in a lightbox.
Here is all the code. Just copy/paste it into a single HTML or PHP file, and run.
SURVEY.PHP
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /><!--Lightbox-->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script><!--Lightbox-->
<style>
</style>
<script type="text/javascript">
//Declare vars outside document.ready() so they can be accessed globally
var ctr = 1;
var mf = '';
var pl = '';
$(document).ready(function() {
ask_next_ques(ctr);
/* ------------------------------------------------------------ */
$("input:radio[name=gender]").click(function() {
//Note: var mf must be initialized above (outside document.ready() ) so can be used in below fn ask_next_ques()
mf = $('input:radio[name=gender]:checked').val();
$('#hgender').val(mf);
ctr++;
ask_next_ques(ctr);
});
/* ------------------------------------------------------------ */
$(document).on('click', "#cbl_btn", function() {
var cc = $("#curl").val();
var bb = $("#bench").val();
var ll = $("#lift").val();
//alert('Value of cc: ' +cc+ ' Value of bb: ' +bb+ ' Value of ll: ' + ll);
//Check if any one of these fields left empty
if (cc.length<1 || bb.length<1 || ll.length<1) {
alert("Please complete all fields");
}else{
$('#hcurl').val(cc);
$('#hbench').val(bb);
$('#hlift').val(ll);
ctr++;
ask_next_ques(ctr);
}
});
/* ------------------------------------------------------------ */
$(document).on('click', "input:radio[name=plan]", function() {
//Note: var pl must be initialized above so can be used in below fn ask_next_ques()
pl = $('input:radio[name=plan]:checked').val();
$('#hplan').val(pl);
ctr++;
ask_next_ques(ctr);
});
/* ------------------------------------------------------------ */
}); //END $(document).ready()
function ask_next_ques(ctr) {
if (ctr==1) {
var qq = 'Male: <input value="Male" type="radio" name="gender"><br />Female: <input value="Female" type="radio" name="gender">';
$('#ques').html(qq);
}else if (ctr==2){
var qq = '<ul style="list-style:none"><li>What can you curl?<br /><input type="text" id="curl"> Kg</li><li>What can you bench?<br /><input type="text" id="bench"> Kg</li><li>What can you lift?<br /><input type="text" id="lift"> Kg<input type="button" id="cbl_btn" value="Go"></li></ul>';
$('#ques').html(qq);
}else if (ctr==3){
var qq = 'Are you an:<br />Owner: <input value="Owner" type="radio" name="plan"><br />Member: <input value="Member" type="radio" name="plan">';
$('#ques').html(qq);
}else if (ctr==4){
//All questions have been asked; All responses saved into hidden fields
//Can now read all hidden fields and do an AJAX POST into the database, or
//Or can simply POST the form to another page for processing.
alert("All questions have been asked");
var hg = $('#hgender').val();
var hc = $('#hcurl').val();
var hb = $('#hbench').val();
var hl = $('#hlift').val();
var hp = $('#hplan').val();
qq = 'The values saved into all hidden fields are:<br />Gender: ['+hg+ ']<br />Curl: [' +hc+ ']<br />Bench: [' +hb+ ']<br />Lift: [' +hl+ ']<br />Plan: [' +hp+ ']<br />You can now send these values to a<br />database, or email them to yourself.';
$('#ques').html(qq);
//We could just leave it here, but to be interesting we'll display the results in a lightbox
//To remove all lightbox stuff, just delete the next 8 lines and delete the two lightbox references in the header (for jquery-ui)
$('#ques').dialog({
autoOpen:true,
width: 450,
title: "Hidden Field Valuess:",
close: function() {
alert('Thank you for taking our survey');
}
});
}
}
</script>
</head>
<body>
<div id="ques"></div>
<div id="hidden_form">
<form method="POST">
<input type="hidden" id="hgender" name="gender">
<input type="hidden" id="hcurl" name="curl">
<input type="hidden" id="hbench" name="bench">
<input type="hidden" id="hlift" name="lift">
<input type="hidden" id="hplan" name="owner">
</form>
</div>
</body>
</html>

Categories

Resources