Multiple Forms in One HTML file (but on multiple pages) - javascript

I'm working on a project where, on the client side, the user would have to fill out an online survey and on the server side, the data is stored in a database. The survey itself consists of multiple pages, where each page is a form. So essentially, that single online survey consists of multiple forms.
I'm picking up right after where the person who created the online survey left off. The way she had it done was something like this:
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="survey.css">
<script>
// when the user clicks the button on the first page, he/she is brought to a new page where the stuff inside the function is displayed
function Q2(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q3()'>Next</button>";
// same deal here, stuff in this function are displayed in a new page
function Q3(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q4()'>Next</button>";
// same as the two functions above
function Q4(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q5()'>Next</button>";
// keeps going until the last question
</script>
</head>
<body>
<!-- this is the first page when the file is opened -->
<h1>Meeting 1</h1>
<p id="Q">Some text...<br><input type="text" name="tweet" style='height: 50px;width: 500px;'><br><br>
<button type="button" onclick="Q2()">Next</button>
</p>
</body>
</html>
I have to store things in a database, and that's where things started getting confusing for me. I've done research online and I'm sure that rather than having each page/form be a function (Q2, Q3, etc.) in JS, it would be better to have each page be its own HTML form and send the data to a PHP file, where the connection and storing data to the database happens.
WHAT I WANT TO HAPPEN: Is it possible to have all the forms be written/stored in a single HTML file, and at the same time, have each subsequent form be displayed on the next page? If that's not possible, what should I do?
Here's some test code I created (currently displays both forms on the same page, which isn't what I want):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<link rel="stylesheet" type="text/css" href="survey.css">
</head>
<body>
<div>
<h1>Meeting 1</h1>
<form name="form1">
<!-- Some HTML code goes here -->
<button type="button">Next</button>
</form>
</div>
<div>
<form name="form2">
<!-- Some HTML code goes here -->
<button type='button'>Next</button>
</form>
</div>
</body>
</html>
Thank you in advance!

you could use actually simply use jQuery and CSS to put all your forms in the same place one behind the other. However you'd have to use ajax to put the form info into your database. Do it as such:
$(".step1").show();
$(".step2").hide();
$(".step3").hide();
$(".step1").submit(function(e)
{
e.preventDefault();
$.ajax({
url : 'submission1.php',
data : { name : $(".step1").children("input[name='username']") },
method : 'POST'
})
.done(function(data)
{
$(".step2").show();
});
});
/** Repeat the same process with step 2 and 3 **/
Then your CSS could be as follows Your forms must be in a parent container:
.step1
{
position: relative;
top: 0;
left: 0;
z-index: 10;
}
.step2
{
position: relative;
top: 0;
left: 0;
z-index: 5;
}
.step3
{
position: relative;
top: 0;
left: 0;
z-index: 1;
}
Complete example here: https://jsfiddle.net/LkjmL43h/3/

Related

how to edit and preview song chords using jquery

I have one requirement of edit and preview the songs chords. Like in this example https://songbase.life/admin/example . Actually this built in react js but i want to implement same in jquery or javascript
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="InputTEXT">
<textarea id="editText" class="form-control" rows="5"></textarea>
</div>
<div id="preview">
//Preview here
</div>
</body>
</html>
Once you open the link on the left side user is typing and preview is on right side...
$(document).ready(function(){
$('#editText').keyup(function(){
$('#editText).val();
$('#preview').html($('#editText).val());
})
})
I want to set the chords positing like mentioned in the above example.
Note :- i want songs text to be formatted in preview same way in the above example link
Copying over the text from the source to the destination is rather simple as #Swati mentioned, but formatting it will be significantly more difficult. It looks like the example provided uses Markdown for the baseline formatting and expands upon it for use with music.
Writing the tool to transform your text from pure text to Markdown from scratch is a bit overkill, so I would recommend using something like Marked to get you started. From there, you should be able to extend the tool for use in music as they do in the example using the marked.use() functionality.
Building in the entirety of this functionality is going to require significant effort, but to get you started I've added an example of how to use Marked below.
$(document).ready(function(){
$source.keyup(transformText)
})
const $source = $('#editText')
const $dest = $('#preview')
function transformText() {
const markdown = marked($source.val());
$dest.html(markdown)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="InputTEXT">
<textarea id="editText" class="form-control" rows="5"></textarea>
</div>
<div id="preview">
//Preview here
</div>
</body>
</html>
Edit
I didn't have anything better going on tonight, so here's an example of how to manually replace chords. This does not cover stanzas, lines, or links, but it's the best I can do to get you started on the solution.
The basic flow is as follows:
Wait for the textfield to change, then trigger the transformation
Use Marked to handle the basic Markdown functionality
Look for chord word combinations with the format [chord]word
Fill in template and replace each instance of [chord]word with the template
Set the output to our new markdown
The CSS comes straight from the example website and requires a bit of knowledge regarding data attributes and pseudo-elements.
$(document).ready(function(){
$source.keyup(transformText)
transformText()
})
const $source = $('#editText')
const $dest = $('#preview')
function transformText() {
let markdown = marked($source.val());
markdown = replaceChordWords(markdown)
$dest.html(markdown)
}
function replaceChordWords (input) {
let markdown = input
const chordWordRegex = /\[(.*?)\]\w+/g
markdown = markdown.replaceAll(chordWordRegex, (input) => {
const chordRegex = /\[(.*?)\]/
const inputSplit = input.split(chordRegex).filter(x => x !== '')
return `<span class="chord-word">
<span class="chord" data-uncopyable-text="${inputSplit[0]}"></span>
${inputSplit[1]}
</span>`
})
return markdown
}
.chord-word {
display: inline-block;
padding-top: 17px;
height: 17px;
position: relative;
}
.chord {
color: #1f45ff;
white-space: pre;
position: absolute;
bottom: 17px;
font-weight: normal;
font-style: normal;
white-space: wrap;
}
[data-uncopyable-text]::after {
content: attr(data-uncopyable-text);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="InputTEXT">
<textarea id="editText" class="form-control" rows="5">
You can enter [C]chords in [Am]the ex[F]act place you want them [G]with squ[E7]are b[C]rackets like this.
</textarea>
</div>
<div id="preview">
//Preview here
</div>
</body>
</html>

How Can I Make A Dynamic Navbar

I would like to make my navbar dynamic so that when I am on that selected page the class active is added.
I know I can do as bellow, however, is there a simpler way even with Javascript so that I don't need to copy and paste a bunch of times?
(maybe with a different class?)
$a='home';
<nav>
home
</nav>
this is a JavaScript salutation:
<!doctype html>
<html>
<head>
<style>
.active {
color: red;
}
</style>
</head>
<body>
Curent Page
Difrent Page
Difrent Page
<script>
var navClass = document.getElementsByClassName("nav-item");
var path = window.location.href;
for (i = 0; i < navClass.length; i++) {
if (path.includes(navClass[i].href)) {
navClass[i].classList.add("active");
}
}
</script>
</body>
</html>
it takes the content of the href and sees if it is included in curent url if yes it adds a class

ZeroClipboard doesn't work on popup page's button

I am wondering if there is any way that I can make ZeroClipBoard working on my popup page's buttons?I have the following code so far which will bring a popup page, the popup page is called from a php file include 2 buttons.
code for the first page:
<html>
<head>
<title>test</title>
<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
</head>
<body>
<div id="myDiv">This is the content to get copied to the text area and then to clipboard</div>
<button id="testButton" data-clipboard-target="myDiv"><b>Copy To Clipboard</b></button>
<!--<script type="text/javascript">
var clicks = 0;
</script>-->
<button onclick="launchPopUp('', '', 700, 'embedCode.php');">test button</button>
<!--<script>
function test123(){
if(clicks>=1){
alert(clicks);
var client = new ZeroClipboard( document.getElementById('copyAll') );
}
}
</script>-->
</body>
<script>
var client1 = new ZeroClipboard( document.getElementById('testButton') );
</script>
I have tried make the "copy to clipboard" for "testButton" button working on my first page by using ZeroClipboard.
my code for second page which will be the content for popup page:
<?php
session_start();
$userName = "asdfbsadf";//$_SESSION['user_name'];
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
</head>
<body>
<div id="copiedContent" style="border: 2px solid; margin: 30px 20px 10px 20px; padding: 4px 3px 5px 3px;">
Here will be the content and <?php echo $userName?> that be copied to the clipboard
</div>
<button id="copyAll" data-clipboard-target="copiedContent" style="float: right; margin-right: 20px;">Copy All</button>
<button style="float: right;" onclick="whatIsThis()">What Is This?</button>
<script>
function whatIsThis(){
alert("This is...");
}
</script>
</body>
<!--<script language="JavaScript">
var client = new ZeroClipboard( document.getElementById('copyAll') );
</script>-->
</html>
the "launchPopup()" function is called from an open source which called popUp2.0.js, if that js file is needed, I will post that, but that one is a 170 lines code.
The comment out codes above are the ones that I tried. I have tried add "var client = new ZeroClipboard( document.getElementById('copyAll') );" for my popup page's copyAll button to the second page, it didn't work; I tried to add that to first page, the button didn't work also.
I found that if the code "var client = new ZeroClipboard( document.getElementById('copyAll') );" is called after the button, that will work; but I have tried everything that I know to put it after the button, and when I run the page and click the test button to bring up the popup page, I found the code "var client = new ZeroClipboard( document.getElementById('copyAll') );" is always called before the button when I inspect the element.
I'm wondering if I have a function called test123(), is there any way that I can run this function after the button is clicked and the whole popup page is showed, so I can make the Javascript run after the popup page showed, and make the copyAll button working?
Or did I think that in a wrong way and my code is too bad? and if there have any way that can make it work I will appreciate as it's first time I use ZeroClipboard.
Have you tried calling the second function in the onclick event?
<button onclick="launchPopUp('', '', 700, 'embedCode.php'); test123();">test button</button>

Application requires a refresh to initialize

Creating a web mapping application in Javascript/Dojo:
When I load the app in a browser it loads the html elements but then stops processing. I have to refresh the browser to get it to load the rest of the page and the javascript.
I have done testing and debugging all day and figured out I had my external JS files in the wrong spot (I'm a rookie). Fixed that and the app loads great...EXCEPT one of my files isn't getting read correctly, or at all.
When I move the contents of the external JS file in question to the main code in the default, the functionality that they contain, work fine... BUT the map requires the refresh again.
Stumped. Below is the code in the external JS file that is causing my issue. I can't figure out why it is a problem because the functions work as expected when it is not external.
Any help is greatly appreciated.
//Toggles
function basemapToggle() {
basemaptoggler = new dojo.fx.Toggler({
node: "basemaptoggle",
showFunc : dojo.fx.wipeIn,
showDuration: 1000,
hideDuration: 1000,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(basemapToggle);
function layerToggle() {
layertoggler = new dojo.fx.Toggler({
node: "layertoggle",
showFunc : dojo.fx.wipeIn,
showDuration: 750,
hideDuration: 750,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(layerToggle);
function legendToggle() {
legendtoggler = new dojo.fx.Toggler({
node: "legendtoggle",
showFunc : dojo.fx.wipeIn,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(legendToggle);
EDIT
Edited to show additional code. Genuinely stumped by this. Would love to get some feedback. I've tried moving it to the main file, reformatting the functions and all of those things work, except they require the refresh. I'm also losing some information on a refresh. Very odd behavior. Any good way to track this down?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<link rel="Stylesheet" href="ZoningClassifications.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/esri/dijit/css/Popup.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/claroGrid.css">
<style type="text/css">
</style>
<script src="JS/layers.js"></script>
<script src="JS/search.js"></script>
<script src="JS/basemapgallery.js"></script>
<script src="JS/toggles.js"></script>
<script src="JS/identify.js"></script>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dijit.TitlePane");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("esri.tasks.locator");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Popup");
dojo.require("dijit.form.Button");
dojo.require("dojo.fx");
dojo.require("dijit.Dialog");
dojo.require("dojo.ready");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("esri.tasks.find");
var map, locator, layer, visible = [];
var legendLayers = [];
var resizeTimer;
var identifyTask,identifyParams;
var findTask, findParams;
var basemaptoggler = null;
var layertoggler = null;
var legendtoggler = null;
var findTaskParcel, findParamsParcel;
// var gridParcel, storeParcel;
EDIT 2
I've completely rewritten the app placing all the code (except the css) in the main default.html file. I tested piece by piece to make sure it functioned how I want. Adding the toggles code is the only code that throws it and causes the extra refresh.
So for now I am using dijit.TitlePane to hold the drop down elements (basemap gallery, layers, legend). However with this you can not change the look and feel to make them images, which is my end goal.
Can anybody suggest an alternative so I can use 3 different images so that when you click on the image and drop down menu opens holding the basemap gallery, layer list and legend?
EDIT 3
It'll probably help to show the code I use to call the toggle functions: I suspect this might be where my issues are.
<!--Legend-->
<div id="subheader">
<div style="position:absolute; right:60px; top:10px; z-Index:98;">
<div id="legendbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" title="Show Legend">
<img src="images/Legend.png" />
<script type="dojo/method" event="onClick">
legendtoggler[(dojo.style("legendtoggle","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="legendtoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
<div id="legendDiv"></div>
</div>
</div>
<!--Layer Toggle-->
<div id="layerbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" border="0" title="Toggle Layers">
<img src="images/layers.png"/>
<script type="dojo/method" event="onClick">
layertoggler[(dojo.style("layertoggle","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="layertoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
<span id="layer_list"><input type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();'
</span>
</div>
</div>
<!--Basemap Gallery-->
<div id="basemapbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">
<img src="images/imgBaseMap.png"/>
<script type="dojo/method" event="onClick">
</script>
</button>
<div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
<span id="basemapGallery">
</span>
</div>
</div>
As a Workaround here is something similar I did:
http://www.martindueren.de/paperwriting/
The Icons on the right hand side of the app make dijit.TitlePanes wipe in and out. The effect used for this can be found on this page:
http://dojotoolkit.org/documentation/tutorials/1.8/effects/
The code for this would be something like this:
<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>
<div id="slideTarget" class="red-block slide">
A red block
</div>
<script>
require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
var slideAwayButton = dom.byId("slideAwayButton"),
slideBackButton = dom.byId("slideBackButton"),
slideTarget = dom.byId("slideTarget");
on(slideAwayButton, "click", function(evt){
fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();
});
on(slideBackButton, "click", function(evt){
fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();
});
});
</script>
Feel free to look at my source-code and copy stuff from it! If I understood you correctly this is exactly what you need too.
Quite the story youve put up here, its difficult to pinpoint, excactly what your issue is.. But since youre saying 'map need an extra refresh', then im guessing it could be due to the flow of things you call require for. Problem may very well be, that youre rolling out legacy loader code from a dojo-version which is AMD loader capeable.
Since i really havent run any esri components before, this is kind of a wild guess - but from my pov it could be worth a shot. Im sure google maps has an onload listener - and i suspect esri to follow this behavior.
Try initializing everything in your application before loading any esri modules, like such:
dojo.addOnLoad(function() {
basemapToggle();
layerToggle();
legendToggle();
dojo.require("esri.map");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("esri.tasks.locator");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Popup");
dojo.require("esri.tasks.find");
});
As goes for the effects youre looking for, personally i'd make use of dojo.animateProperty and combine it with dijit/TooltipDialog.
This http://jsfiddle.net/seeds/a8BBm/2/ shows how to 'hack' the onShow mechanizm, leaving optional effects possible in the opening animation. By default, DropDownButton simply fades in.
See http://livedocs.dojotoolkit.org/dijit/TooltipDialog#programmatic-example for alternate ways to popup the tooltipdialog - i.e. connecting dijit.popup to any click/mouseover event.

Galleria jquery plugin

Here is the home page for the popular jquery-plugin galleria. I need to insert the download link to the right bottom corner for the active image. Now there is available statistic like (3/10), which indicates the current number from list.
Maybe someone already did this. What is the fastest way?
UPD: using the gearsdigital's idea I wrote the code:
var gallery = Galleria.get(0);
gallery.bind(Galleria.IMAGE, function(e) {
imgHandle = e.imageTarget;
console.log(imgHandle);
console.log(imgHandle.attr('href'));
//$('.galleria-counter').append('Download');
});
The first log line shows up something like:
<img width="584" height="438" src="http://....jpg" style="display: block; position: relative; left: 0px; top: -4px; opacity: 1;">
But how to get the src location, I see the error that attr function isn't available.
your getting the imgHandle from a DOMEvent, not a jquery object.
As attr is part of the jQuery object you need to transfer the dom object to a jquery object.
gallery.bind(Galleria.IMAGE, function(e) {
imgHandle = $(e.imageTarget); //Wrap it here
alert(imghandle.attr('href'))
//$('.galleria-counter').append('Download');
});
I would try to get the current Source-Attribute from the current image and append this as link.
//Untested. This is just a suggestion :)
currentImageSource = $('.galleria-image img').attr('src');
$('.galleria-counter').append('Download');
But a link like this will open the image separatly and not download ordinary. If you want a "real" Download you have to put this image in an zip archive.
$('.galleria-counter').append('Download');
This will produce something like that: http://www.example.com/galleria/img/mygreatimage.jpg.zip
Works for me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
currentImageSource = $('.container img').attr('src');
$('.placeholder').append('Download');
});
</script>
</head>
<body>
<div class="container">
<h2>Get img src</h2>
<img src="http://www.duba.at/wp-content/uploads/2007/08/bild_0570000.jpg" witdh="200" height="220"/>
</div>
<div class="placeholder">
<h2>Append Here</h2>
</div>
</body>
</html>

Categories

Resources