I have thirty programs that use the same form.
I have the form coded in every single program.
It would be much better to have only one file to change if there is a need to change the form.
I tried inserting the form into my html code,
but it did not work.
This is a portion of the html form file -
document.write("<form name="game">");
document.write("<pre>");
document.write("<textarea name="status" rows="8" cols="16" onfocus="stayAway()">");
document.write("</textarea><br>");
document.write("</pre>");
document.write("<p> <input name="toGuess" onfocus="stayAway()" type="text"> <br>Word to guess.</p>");
document.write("<input value=" A " id="A" onclick="guess('A')" type="button">");
document.write("<input value=" B " id="B" onclick="guess('B')" type="button"html >");
document.write("</form>");
I named it hangman.html and I tried to insert it like this
<script type="text/javascript" src="../scripts/hangman.html"></script>
I have other html files in my scripts directory that are called like this, but the form simply does not display. Is it a "form" issue that forms can't be inserted this way?
How do I insert a form into an html program so it can be used in many different programs?
In html page just you have to add class like this and after that you will get the form in same html.
$(document).ready(function() {
$(".formContainer").append('<form name="game"> <div><input type="text" name="name" placeholder="Name"> </div> <div><input type="text" name="email" placeholder="Email"></div> <div><textarea name="status" rows="8" cols="16" placeholder="Message"></textarea></div> </form>')
})
.formContainer input{
height: 30px;
width: 100%;
max-width: 500px;
margin: 5px auto;
padding: 5px;
}
.formContainer textarea{
width: 100%;
max-width: 500px;
margin: 5px auto;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formContainer"></div>
I like to use PHP, so what you could do is paste your code in an external file, say form.php like:
<?php
echo "<form action.....>
</form>";
?>
Then put this line wherever you want the form to show up:
<?php include 'form.php' ?>
This solution will require you to run Apache though.
you can use this HTML code
<html>
<head>
<title>Contact Form using JavaScript </title>
<!-- include css file here-->
<link rel="stylesheet" href="css/form.css"/>
</head>
<body>
<div id="main">
<h1>Contact Form using JavaScript</h1>
<div id="form_sample">
</div>
<!-- include JavaScript file here -->
<script src="js/form.js"></script>
</body>
</html>
next use this javascript code
var x = document.getElementById("form_sample");
var createform = document.createElement('form'); // Create New Element form
createform.setAttribute("action", ""); // Setting action Attribute on form
createform.setAttribute("method", "post"); // Setting method Attribute on form
x.appendChild(createform);
var heading = document.createElement('h2'); // Heading of form
heading.innerHTML = "Contact Form ";
createform.appendChild(heading);
var line = document.createElement('hr'); //giving horizontal row after heading
createform.appendChild(line);
var linebreak = document.createElement('br');
createform.appendChild(linebreak);
var namelabel = document.createElement('label'); // Create Label for name field
namelabel.innerHTML = "Your Name : "; // Set Field Labels
createform.appendChild(namelabel);
var inputelement = document.createElement('input'); // Create input field for name
inputelement.setAttribute("type", "text");
inputelement.setAttribute("name", "fname");
createform.appendChild(inputelement);
var linebreak = document.createElement('br');
createform.appendChild(linebreak);
var emaillabel = document.createElement('label'); //Create Label for email field
emaillabel.innerHTML = "Your Email : ";
createform.appendChild(emaillabel);
var emailelement = document.createElement('input'); // Create input field for email
emailelement.setAttribute("type", "text");
emailelement.setAttribute("name", "demail");
createform.appendChild(emailelement);
var emailbreak = document.createElement('br');
createform.appendChild(emailbreak);
// Append Textarea
var messagelabel = document.createElement('label');
messagelabel.innerHTML = "Your Message : ";
createform.appendChild(messagelabel);
var texareaelement = document.createElement('textarea');
texareaelement.setAttribute("name", "dmessage");
createform.appendChild(texareaelement);
var messagebreak = document.createElement('br');
createform.appendChild(messagebreak);
// Append Submit Button
var submitelement = document.createElement('input');
submitelement.setAttribute("type", "submit");
submitelement.setAttribute("name", "dsubmit");
submitelement.setAttribute("onclick", "showInput();");
submitelement.setAttribute("value", "Submit");
createform.appendChild(submitelement);
use this css code
/* below line is write to use google font online */
#import url(http://fonts.googleapis.com/css?family=Ubuntu);
div#main{
width: 830px;
height: 650px;
margin: 0px auto;
font-family: 'Ubuntu', sans-serif;
}
div#form_sample{
text-align:center;
border: 1px solid #ccc;
width: 300px;
padding: 0px 50px 15px;
margin-top:20px;
box-shadow: 0 0 15px;
border-radius: 6px;
float:left;
}
#main h1{
margin-top:40px;
}
hr{
margin-top:-5px;
}
label{
float: left;
font-size: 16px;
}
input[type="text"]{
width:100%;
margin-top:10px;
height: 35px;
margin-bottom: 25px;
padding:10px;
border:3px solid #2BC1F2;
}
textarea{
width:100%;
border:3px solid #2BC1F2;
padding:10px;
margin-bottom: 25px;
margin-top: 10px;
height: 100px;
resize:none;
}
input[type="submit"]{
width:100%;
padding: 10px 45px;
background-color: #2BC1F2;
border: none;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
font-family: 'Ubuntu', sans-serif;
}
this time I am used this.
i hope you can easily understand this code.
Related
I am new to Blazor and trying to set up an address form to use google place autocomplete. I have done this web and mobile before.
I am not sure how to:
Call the javascript from the blazor component.
Populate the address fields from the selected address.
Save the data in the fields to the backend.
I was able to get working with the code below. For the complete solution see github repo. Here is the demo site.
\Shared\_Host.cshmtl
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYI&libraries=places"></script>
</head>
\wwwroot\js\serverSideScripts.js
window.initAutocomplete = () => {
let autocomplete;
let address1Field;
let address2Field;
let postalField;
fillInAddress = (autocomplete) => {
// Get the place details from the autocomplete object.
const place = autocomplete.getPlace();
let address1 = "";
let postcode = "";
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
// place.address_components are google.maps.GeocoderAddressComponent objects
// which are documented at http://goo.gle/3l5i5Mr
if (place) {
for (const component of place.address_components) {
const componentType = component.types[0];
switch (componentType) {
case "street_number": {
address1 = `${component.long_name} ${address1}`;
break;
}
case "route": {
address1 += component.short_name;
break;
}
case "postal_code": {
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix": {
postcode = `${postcode}-${component.long_name}`;
break;
}
case "locality":
document.querySelector("#locality").value = component.long_name;
break;
case "administrative_area_level_1": {
document.querySelector("#state").value = component.short_name;
break;
}
case "country":
document.querySelector("#country").value = component.long_name;
break;
}
}
address1Field.value = address1;
postalField.value = postcode;
// After filling the form with address components from the Autocomplete
// prediction, set cursor focus on the second address line to encourage
// entry of subpremise information such as apartment, unit, or floor number.
address2Field.focus();
}
}
address1Field = document.querySelector("#ship-address");
address2Field = document.querySelector("#address2");
postalField = document.querySelector("#postcode");
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: { country: ["us", "ca"] },
fields: ["address_components", "geometry"],
types: ["address"],
});
address1Field.focus();
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", function () { fillInAddress(autocomplete) });
}
\Pages\GoogleAutoComplete.razor
#page "/AddressAutocompleteForm"
#inject IJSRuntime JSRuntime
<title>Place Autocomplete Address Form</title>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
color: #686868;
}
form {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 400px;
padding: 20px;
}
input {
width: 100%;
height: 1.2rem;
margin-top: 0;
padding: 0.5em;
border: 0;
border-bottom: 2px solid gray;
font-family: "Roboto", sans-serif;
font-size: 18px;
}
input:focus {
border-bottom: 4px solid black;
}
input[type="reset"] {
width: auto;
height: auto;
border-bottom: 0;
background-color: transparent;
color: #686868;
font-size: 14px;
}
.title {
width: 100%;
margin-block-end: 0;
font-weight: 500;
}
.note {
width: 100%;
margin-block-start: 0;
font-size: 12px;
}
.form-label {
width: 100%;
padding: 0.5em;
}
.full-field {
flex: 400px;
margin: 15px 0;
}
.slim-field-left {
flex: 1 150px;
margin: 15px 15px 15px 0px;
}
.slim-field-right {
flex: 1 150px;
margin: 15px 0px 15px 15px;
}
.my-button {
background-color: #000;
border-radius: 6px;
color: #fff;
margin: 10px;
padding: 6px 24px;
text-decoration: none;
}
.my-button:hover {
background-color: #666;
}
.my-button:active {
position: relative;
top: 1px;
}
</style>
<!-- Note: The address components in this sample are based on North American address format. You might need to adjust them for the locations relevant to your app. For more information, see
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
-->
<form id="address-form" action="" method="get" autocomplete="off">
<p class="title">Sample address form for North America</p>
<p class="note"><em>* = required field</em></p>
<label class="full-field">
<!-- Avoid the word "address" in id, name, or label text to avoid browser autofill from conflicting with Place Autocomplete. Star or comment bug https://crbug.com/587466 to request Chromium to honor autocomplete="off" attribute. -->
<span class="form-label">Deliver to*</span>
<input id="ship-address"
name="ship-address"
required
autocomplete="off" />
</label>
<label class="full-field">
<span class="form-label">Apartment, unit, suite, or floor #</span>
<input id="address2" name="address2" />
</label>
<label class="full-field">
<span class="form-label">City*</span>
<input id="locality" name="locality" required />
</label>
<label class="slim-field-left">
<span class="form-label">State/Province*</span>
<input id="state" name="state" required />
</label>
<label class="slim-field-right" for="postal_code">
<span class="form-label">Postal code*</span>
<input id="postcode" name="postcode" required />
</label>
<label class="full-field">
<span class="form-label">Country/Region*</span>
<input id="country" name="country" required />
</label>
<button type="button" class="my-button">Save address</button>
<!-- Reset button provided for development testing convenience.
Not recommended for user-facing forms due to risk of mis-click when aiming for Submit button. -->
<input type="reset" value="Clear form" />
</form>
#functions {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("initAutocomplete");
}
}
}
I am trying to create simple jquery App, but i ran over small problem, which i can't solve, I want to search in textarea box form input field, if input form value will match textarea value, i want to marked matched text, picture below shows what i want to done, any suggestion?
$('#search').on('input', function(e) {
e.preventDefault();
var searchTxtBox = $('#search');
searchTxtBox.val(searchTxtBox.val().replace(/(\s+)/, "(<[^> ]+>)*$1(<[^> ]+>)*"));
var textarea = $('#editor');
var enew = '';
if (searchTxtBox.val() != '') {
enew = textarea.html().replace(/(<mark>|<\/mark> )/igm, "");
textarea.html(enew);
var query = new RegExp("(" + searchTxtBox.val() + ")", "gim");
newtext = textarea.html().replace(query, "<mark>$1</mark>");
newtext = newtext.replace(/(<mark>[^<>]*)((<[^> ]+>)+)([^<>]*<\/mark>)/, "</mark><mark>");
textarea.html(newtext);
} else {
enew = textarea.html().replace(/(<mark>|<\/mark> )/igm, " ");
textarea.html(enew);
}
});
mark {
background-color: red;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder='search' id='search'>
<div id="editor" rows="4" cols="50">
</div>
The simplest way I can think of is positioning a transparent element behind the textarea
and adding the results there:
Key features to program this:
The elements must render the same (size, font, line ect..)
The textarea must have a transparent background.
Whenever the textarea is changed (resized) we need to match the size of the result container.
Here is my implementation:
$(function(){
//Simple helper function to match the size of the elements:
function matchSize($base, $target) {
$target.css({
width : $base.outerWidth(),
height : $base.outerHeight()
});
}
//Attach whenever serach field changed run the query:
$("#search").keyup(function(){
let $search = $(this),
$input = $('#input');
let $result = $input.prev('code');
//Match size:
matchSize($input, $result)
//Search
let marked = $input.val().replace(
new RegExp("(" + $search.val().trim() + ")", "g"),
"<mark>$1</mark>"
);
//Set marked transparent text:
$result.html(marked);
});
//textarea can be resized so always match the size:
$('#input').bind('mouseup', function(){
let $input = $('#input');
let $result = $input.prev('code');
matchSize($input, $result)
});
});
.wrap {
position: relative;
display:block;
}
/* match the two */
.wrap code,
.wrap textarea {
position:absolute;
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-align: start;
appearance: textarea;
flex-direction: column;
white-space: pre-wrap;
overflow-wrap: break-word;
margin: 0em;
font: 400 13.3333px Arial;
border-width: 1px;
border-style: solid;
padding: 2px;
background-color:transparent;
z-index: 2;
box-sizing: border-box;
}
.wrap code {
z-index: 1;
top:0;
left:0;
border-color:transparent;
color:transparent;
background-color: white;
}
.wrap code mark {
color: transparent;
background-color: yellow;
padding:0;
margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<code></code>
<textarea id="input">the easiest way to do this and the quickest.</textarea>
</div>
<br/><br/><br/><br/>
Search: <input id="search" placeholder='Search' />
I have a csv file that I load into an 11 column html table. The data displays as expected except there is a very narrow column on the far right. There is also an extra blank row at the bottom. I have made dozens of adjustments to the width percentages but the little column on the right prevails. I haven't tried to eliminate the extra row on the bottom because I don't know what to try. See CSS code.
<title>CSV to HTML5</title>
<style type="text/css">
table {
width: 850px;
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: center;
padding: 6px;
border: 1px solid black;
border-collapse: collapse;
}
tr {
height: 24px;
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #00FFFF;
}
td {
font-family: Arial, Verdana;
font-size: 0.8em;
font-weight: 700;
}
td {
border: 1px solid black;
cellpadding: 3px;
}
td:nth-child(1) {
width: 4%;
text-align: center;
}
td:nth-child(2) {
width: 6%;
text-align: left;
padding-left: 5px;
}
td:nth-child(3) {
width: 14%;
text-align: left;
padding-left: 5px;
}
td:nth-child(4) {
width: 14%;
text-align: left;
padding-left: 5px;
}
td:nth-child(5) {
width: 18%;
text-align: left;
padding-left: 5px;
}
td:nth-child(6) {
width: 6%;
padding-left: 5px;
}
td:nth-child(7) {
width: 5%;
text-align: center;
}
td:nth-child(8) {
width:8%;
text-align: center;
}
td:nth-child(9) {
width: 8%;
text-align: center;
}
td:nth-child(10) {
width: 8%;
text-align: center;
}
td:nth-child(11) {
width:8%;
text-align: center;
</style>
</head>
<body>
<div>
<div>
<legend>
<h1 id="clubname" style="text-align:center"></h1>
<h2 id="racename" style="text-align:center"></h2>
<h3 id="racedate" style="text-align:center"></h3>
</legend>
</div>
<div id="output">
</div>
<div id="myDiv" class="container">
<hr>
<form>
<div class="form-group">
<input type="text" class="form-control" id="inp_clubname" placeholder="Club Name" size="24" required>
<input type="text" class="form-control" id="inp_racename" placeholder="Race Name" size="24" required>
<input type="date" class="form-control" id="inp_racedate" placeholder="Date Name" size="24" required>
<label for="csvFileInput">CSV File: </label>
<input type="file" id="csvFileInput" onchange=accept=".csv" size="35" required>
<input type="button" class="btn btn-primary" onclick="generate()" value="Generate" />
</div>
</form>
<hr>
</div>
</div>
<footer>
<p style="text-align:center">©: Klexy Soft</p>
</footer>
<script type="text/javascript">
function generate() {
console.log('generate called')
//copy text from form to headings
ids = ["clubname", "racename", "racedate"]
for (i in ids) {
value = document.getElementById('inp_' + ids[i]).value
document.getElementById(ids[i]).innerHTML = value
}
files = document.getElementById('csvFileInput').files
// Check for the various File API support.
if (window.FileReader) {
// FileReader are supported.
var reader = new FileReader();
// Read file into memory as UTF-8
reader.readAsText(files[0]);
// Handle errors load
reader.onload = loadHandler;
reader.onerror = errorHandler;
} else {
alert('FileReader is not supported in this browser.');
}
}
function loadHandler(event) {
var csv = event.target.result;
processData(csv);
}
function processData(csv) {
var allTextLines = csv.split(/\r\n|\n/);
var lines = [];
for (var i = 0; i < allTextLines.length; i++) {
var data = allTextLines[i].split(',');
lines.push(data);
}
//console.log(lines);
drawOutput(lines);
}
function errorHandler(evt) {
if (evt.target.error.name == "NotReadableError") {
alert("Canno't read file !");
}
}
function drawOutput(lines) {
//Clear previous data
document.getElementById("output").innerHTML = "";
var table = document.createElement("table");
for (var i = 0; i < lines.length; i++) {
var row = document.createElement("TR");
table.appendChild(row)
for (var j = 0; j < lines[i].length; j++) {
// first row is header
cell = document.createElement(i == 0 ? "TH" : "TD");
row.appendChild(cell)
cell.appendChild(document.createTextNode(lines[i][j]));
}
}
document.getElementById("output").appendChild(table);
document.getElementById("myDiv").style.visibility = "hidden";
}
console.log('initialized')
</script>
</body>
csv file
PL,Sail#,Yacht,Type,Skipper,Club,Rtg,Finish,Elapsed,Cor'ted, 1st +,
1,1234,Boat Name,42MkII,Name,GYC,115,14:10:53,02:00:53,01:46:42,00:00:00,
2,1234,Boat Name,4000,Name,GYC,107,14:16:29,02:06:29,01:53:17,00:06:35,
3,1234,Boat Name,Catalina36MKII,Name,GYC,144,14:26:34,02:16:34,01:58:48,00:12:06,
4,1234,Boat Name,42,Name,GYC,131,14:26:37,02:16:37,02:00:28,00:13:46,
5,1234,Boat Name,Mark3,Name,GYC,218,14:52:01,02:42:01,02:15:08,00:28:26,
6,1234,Boat Name,Nonsuch 30C,Name,GYC,156,14:54:43,02:44:43,02:25:29,00:38:47,
7,1234,Boat Name,KP44,Name,GYC,168,15:25:50,03:15:50,02:55:07,01:08:25,
One of the problems I was having was the java script, function drawOutput(lines) { and the codes that perform the function, generates the table and adds an extra blank row at the bottom, I guess waiting for another line of data. By adding one more line to the java script function code, the very last line, I was able to remove the extra empty row.
document.getElementById("output").appendChild(table).deleteRow(-1);
I have a few controls that I am attempting to encapsulate on my webpage. I have tried a few different methods on encapsulating my controls and they have not succeeded. I tried using a div and this did not work too well and I have also tried this post:
Create a group box around certain controls on a web form using CSS
What is happening is that a box is being created but it is at the top of my webpage instead of around the controls.
I would like to create a grey box similar to the ones found on this webpage:
https://img.labnol.org/di/trigger1.png
Below, I am attaching a copy of the CSS and HTML code that I am using in order to create my form. The form is a simple file upload form that I tweaked from an example. I am using this on my own, personal website.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury # DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event){
//_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
function changeText()
{
document.getElementById('p1').innerHTML = "1 file selected";
}
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>Upload</h2>
<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:508px; margin-left: -4px; margin-top: 10px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</fieldset>
<script>
// self executing function here
(function() {
document.getElementById('upload_form')[0].onchange = changeText;
})();
</script>
</body>
</html>
Here is the CSS (which is referred to in the html as test.css):
body{
background: rgba(0,0,0,0.0);
}
form{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #0D0D0D;
}
form p{
width: 100%;
height: 100%;
text-align: center;
line-height: 140px;
color: #0D0D0D;
font-family: Arial;
}
h2{
text-align: center;
}
form input[type="file"]{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
form input[type="button"]{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form input[type="button"]:hover{
background: #149174;
color: #0C5645;
}
form input[type="button"]:active{
border:0;
}
form progressBar{
text-align: center;
}
Coming back to the HTML, the fieldset tags are placed around the controls that I am attempting to encapsulate. I left them there so that anyone can see the main issue that I am running into.
I apologize but I am very new to web programming. Any help will be greatly appreciated, thank you.
Note: how the box is created doesn't really matter to me. I would expect that the box is created in HTML and then I can style it using CSS.
The structure of your HTML is fine, but the position: absolute properties in your CSS are clashing with the fieldset.
Since <fieldset> is wrapping all your controls, I would suggeset giving it a fixed width and height and position your child elements based on that, i.e. use width: 100% for your children and give all of them the same margin so they align nicely. Also make sure you either edit your #progressBar style in the markup.
Here's a snippet with the changes I just mentioned:
body {
background: rgba(0, 0, 0, 0.0);
}
fieldset {
width: 508px;
height: 270px;
/* fixed width and height*/
margin: 13vh auto;
}
#p1 {
border: 4px dashed #0D0D0D;
/* modified the actual text box instead of the entire form */
width: 508px;
height: 140px;
line-height: 140px;
margin-top: 0px;
}
form p {
text-align: center;
color: #0D0D0D;
font-family: Arial;
}
h2 {
text-align: center;
}
form input[type="file"] {
position: absolute;
margin: 0;
outline: none;
width: 508px;
height: 140px;
margin: 22px 4px;
opacity: 1;
background-color: orange;
/* Last two properties are a visual representation. Delete background-color and set opacity to 0 */
}
form input[type="button"] {
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 100%;
/* width relative to parent fieldset */
height: 35px;
margin-top: -20px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form input[type="button"]:hover {
background: #149174;
color: #0C5645;
}
form input[type="button"]:active {
border: 0;
}
form progressBar {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury # DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event) {
//_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
function changeText() {
document.getElementById('p1').innerHTML = "1 file selected";
}
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>Upload</h2>
<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
<input type="button" value="Upload File" onclick="uploadFile()">
<!-- changed progressBar style -->
<progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</fieldset>
<script>
// self executing function here
(function() {
document.getElementById('upload_form')[0].onchange = changeText;
})();
</script>
</body>
</html>
Hope it helps!
While clicking on the add button the static text and a text box is adding vertically.
How can I add this horizontally ?
How can I make this design responsive ?
For Desktop/Laptop : 4 in a row., Tablet: 3 in row and Mobile : 1 in a row.
Attached the HTML, Java script and css files. Please suggest.
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({'id': 'choice' + newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length - 1;
$scope.choices.splice(lastItem);
};
});
fieldset {
background: #FCFCFC;
padding: 16px;
border: 1px solid #D5D5D5;
}
.addfields {
margin: 10px 0;
}
#choicesDisplay {
padding: 10px;
background: rgb(227, 250, 227);
border: 1px solid rgb(171, 239, 171);
color: rgb(9, 56, 9);
}
.remove {
background: #C76868;
color: #FFF;
font-weight: bold;
font-size: 21px;
border: 0;
cursor: pointer;
display: inline-block;
padding: 4px 9px;
vertical-align: top;
line-height: 100%;
}
input[type="text"],
select {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<select>
<option>Mobile</option>
<option>Office</option>
<option>Home</option>
</select>
<input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
For making it responsive you should use Angular Material or Bootstrap
You can use Bootstrap grid (which can bug out in other way though since you won't have proper .rows when adding columns this way) or just use flexbox and code it manually as your requirements are really simple: https://css-tricks.com/dont-overthink-flexbox-grids/