One div mirrored in several locations on one page - javascript

I'm making a one-page website with a layout made of horizontally sliding sections. There is a somewhat complex form at the end of each section. The form is always the same between sections, and if a bit of it is filled in one, changes should appear in all.
My question is: what is the best approach for this?
I want the website to be as lightweight as possible as it is meant to be used in very underdeveloped countries. (I haven't had to require jquery so far but it is still an option).
My best idea so far is replicating the form on page load but it will require loads of script to live update each form when the user modifies one.
Isn't there a possibility to just mirror a div? That all the instances of the form would actually be the same div unic appearing in multiple places?

Duplicate the data of input as it changed?
<!DOCTYPE HTML>
<html>
<head>
<title>Bla!</title>
<style type='text/css'>
</style>
<script type='text/javascript'>
function duplicate(object) {
var data = object.value;
inputs = document.getElementsByName(object.name);
for (var i in inputs) {
var input = inputs[i];
input.value = data;
}
}
</script>
</head>
<body class='body' >
<div id='div1'>
<h2>Form1</h2>
<form>
<input onchange='duplicate(this);' name='input1'>
<input onchange='duplicate(this);' name='input2'>
<input onchange='duplicate(this);' name='input3'>
</form>
</div>
<div id='div2'>
<h2>Form2</h2>
<form>
<input onchange='duplicate(this);' name='input1'>
<input onchange='duplicate(this);' name='input2'>
<input onchange='duplicate(this);' name='input3'>
</form>
</div>
<div id='div3'>
<h2>Form3</h2>
<form>
<input onchange='duplicate(this);' name='input1'>
<input onchange='duplicate(this);' name='input2'>
<input onchange='duplicate(this);' name='input3'>
</form>
</div>
</body>
</html>

Related

Javascript element.click() not working with div tags

For some reason, this simple bit of code isn't ticking the checkbox:
<!DOCTYPE html>
<html>
<body>
<p>Automatically tick the box</p>
<form>
<div id='checkingTheBox'>
<div class='someValue'>
<input type="checkbox" name="checkingTheBox">
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById("checkingTheBox").click();
</script>
</body>
</html>
However, when removing the div tags, it works fine. Is there any reason why this isn't working as it's shown, and any advice for getting the javascript to click the element successfully without changing HTML structure?
Edit: I tried using id instead of name inside the input tag. That didn't work either.
You cannot have two or more elements on the page with the same id. The id tag should be unique. Also you cannot use the name tag as a id tag. It is not the same. Here's the code example which works as you wanted to:
<!DOCTYPE html>
<html>
<body>
<p>Automatically tick the box</p>
<form>
<div>
<div class='someValue'>
<input type="checkbox" id="checkingTheBox">
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById("checkingTheBox").click();
</script>
</body>
</html>
EDIT:
It works but it doesn't make any sense to do that. You can just use a simple checked tag in your checkbox to have it to be checked by default. Here's an example:
<input type="checkbox" id="checkingTheBox" checked>
you are selecting the div and want to click function on it inner child so try this script that will select the inner child from your selected this and call click function on that child
const div = document.getElementById('checkingTheBox');
div.firstElementChild.firstElementChild.click();

How do I create a download pdf button on an HTML form that fills in automatically?

I would like to make a button on the bottom of my summary form that downloads a pdf with all of the inputs and outputs.
The biggest problem is, I'm working in webStorm (which doesn't support php) and I'm somewhat of a noob in web development. Should I download phpStorm and do it there (if so, please give me some suggestions on how to do it), or does anyone have any suggestions just using HTML and JS?
Here is my code currently:
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" href="styler.css">
</head>
<body>
<h1>Calculator</h1>
<div class="logoPicture-img">
<img src="images/Logo.png">
</div>
<select id="form-selector">
<option value="_" selected disabled>Pick One</option>
<option value="Input">Input</option>
<option value="Output">Output</option>
<option value="Summary">Summary</option>
</select>
<div id="my-forms">
<form name = "Input">
<h2>Input</h2>
<div>
Cost of Candy ($):
<br>
<input type="number" name="costOfCandy" placeholder="5.00" min="0.01" max="20.00">
</div>
<!-- A bunch more inputs like this follow, but are unshown -->
<div>
<input type="button" value="Calculate" onclick="performCalculations()">
</div>
</form>
<form name = "Output">
<h2>Output</h2>
<div>
Baseline Annual Cost of Candy ($):
<br>
<input type="text" name="BCostCandy">
</div>
<!-- A bunch more outputs like this follow, but are unshown -->
</form>
<form name = "Summary">
<h2>Summary</h2>
<div>
Impact on Annual Candy Cost ($):
<br>
<input type="text" name="NCandyCost">
</div>
</form>
</div>
<script type = text/javascript>
const formSelect = document.getElementById('form-selector'),
myForms = document.getElementById('my-forms');
formSelect.oninput=()=>{ myForms.className = `f-${formSelect.value}` }
</script>
<script type = "text/javascript">
function performCalculations()
<!-- Performs all of the calculations and returns them to the appropriate boxes -->
Thank you in advance for anyone that can help!
Add the following 2 lines at the end of your file:
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- jsPDF library -->
<script src="js/jsPDF/dist/jspdf.min.js"></script>
This will ensure that you have some utility in place to get your work done,
the next step is to write out some lines using the jsPDF library.
For example, in your case, if you want the whole body to be a pdf, then,
<script>
var doc = new jsPDF({
orientation: 'landscape'
});
var elementHTML = $('body').html();
doc.save('document.pdf');
</script>
This piece of code added after the above 2 lines should do the magic.
Consult this article for further information:
You can simply use print.js library. You can give any area of your web page. If you don't want to export pdf with your current template, you can create appropriate document template and hide it from users and print that one. You can get this library from here or from their site.
You can understand it very easily by going through their explanation.

Asp.net core MVC disable lot of elements on client computer without contacting server

Hey I have a lot of elemetns. When I push button it will check what background color is and then based on that disable or enable a lot of elements. Some idea? I personaly dont know where to start. Thanks for any help. Also I need it to execute on users computer so I dont need to contact server. I was wandering if JavaScript can do it well, but I dont want to assing all elements seperately so maybe assing class or something.
You can use jQuery to build a simple code, which works at client-side.
With the help of proper selector you can modify multiple elements with single line of code.
Below example will enable/ disable inputs with background color as 'blue' on click of a button.
<!DOCTYPE html>
<html>
<head>
<style>
.blueCss{
background-color: blue;
}
.greenCss{
background-color: green;
}
.redCss{
background-color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnEnable").click(function(){
// below line enables all input elements with class blueCss
$("input.blueCss").removeAttr('disabled');
});
$("#btnDisable").click(function(){
// below line disables all input elements with class blueCss
$("input.blueCss").attr('disabled','disabled');
});
});
</script>
</head>
<body>
<input type="text" class="blueCss" value="First"> <br>
<input type="text" class="greenCss" value="Second"> <br>
<input type="text" class="greenCss" value="Third"> <br>
<input type="text" class="blueCss" value="Fourth"> <br>
<input type="text" class="redCss" value="Fifth"> <br>
<input type="Button" id="btnDisable" value="Disable Blue">
<input type="Button" id="btnEnable" value="Enable Blue"> <br>
</body>
</html>

Display form field value on another html page, after submit

I really need help... :-) I have two html pages and forms on both of them. I need solution to show field value from first form (on first page) in field on second form, after click on SEND button. But, I need both pages to stay open, on first I need to insert values and on second page that values should be shown. Also, I need a solution without PHP because this app will be running on local devices, without server. I don't have any solution and please, I need some tips how I can do that.
I found here some solutions with localStorage and it looks interested but I need to stay on First page and send field value to Second page, in live. There is code which I found here, this is example what I need, just I need both pages to be open and after I insert some value in field on first page and click on button, that value should be shown in field on second page. Thank you in advance!
<html>
<head>
<title>First Page</title>
<script type="text/javascript">
function saveVal() {
var inputFirst = document.getElementById("name").value;
localStorage.setItem("name", inputFirst);
inputFirst = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="secondPage.html" method="get">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" />
</label>
<input type="submit" value="submit" onclick="saveVal()"/>
</form>
</body>
</html>
<html>
<head>
<title>Second Page</title>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name"
readonly="readonly" />
</label>
<script type="text/javascript">
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
</script>
</form>
</body>
</html>
You can use setInterval to constantly check and set the value:
//this will run storeCheck function every 250 miliseconds and update values from localStorage.
setInterval(storeCheck, 250);
function storeCheck() {
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
}

Pulling javascript from tumblr with specified username

I am trying to get a fairly simple bit of code to work. The essence of it is just to take user input, append it on to a source URL, and then use a script to display the appropriate tumblr feed.
I have spent some time on this, and I can't get my head around how javascript works enough to do something like this.
This is what I have so far:
<html>
<body>
<form>
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src= username + ".tumblr.com/js"></script>
</body>
</html>
Thanks in advance.
The way that JavaScript works, is you need an event to attach the running of your code. In your case, the form's submit event. Additionally, you cannot compute values within the HTML as you're attempting; you'll need code to manipulate the HTML (the DOM). Here's a sample of how you can do it:
<html>
<body>
<form onSubmit="handleSubmit(event)">
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script id="theScript" type="text/javascript"></script>
<script>
function handleSubmit(e) {
e.preventDefault(); // Keep the form from actually submitting
var username = document.querySelector('[name="username"]').value;
document.getElementById('theScript').src = username + '.tumblr.com/js';
}
</script>
</body>
</html>
Because the JS file that is on username.tumblr.com uses document.write, I think it'd be better to just load the actual url of the user in an iframe, as this wouldn't require you to refresh the page, while creating a mini page inside your page.
This won't work on the snippet tool here or on JSFiddle, but I've tested it on a web server:
<html>
<body>
<script>
function getUN() {
var username = document.getElementsByName("username")[0].value;
document.getElementById("tumblrframe").src = "http://" + username + ".tumblr.com";
}
</script>
Tumblr Username:
<br>
<input type="text" name="username">
<br>
<br>
<button onclick="getUN()">Submit</button>
<br/>
<br/>
<iframe id="tumblrframe" width="80%" height="600px"></iframe>
</body>
</html>

Categories

Resources