i have created a 2 pager website. It is basically a data gathering site.
On first page, i gather some information, in a form. I pass this to the second page using the "GET" method of the form submission.
On the second page, I parse the information and display it in readonly format. Alongside this information, there is another text field, which user is supposed to fill in.
the UI looks perfect, but the functionality is somehow broken.
Have a look at the code. I gotta paste more code here, as i do not know which part is responsible for functionality. It could be javascript functions, so including those. I have to include the css, as it is responsible for vertical splits, and bug might reside there and obviously html as well, as there might be few structural issues. Hence, this is the minimalistic code that can be there for the problem.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="referrer" content="origin">
<script>
var part1;
var part2;
var part3;
function GetSimpleStory(){
document.getElementById("emotion").value = getParameterByName("emotion");
var part1 = getParameterByName("myInputs_1[]");
addInput("previousInput_1", "Input_1", "prevInputs_1", "input_1", part1);
var part2 = getParameterByName("myInputs_2[]");
addInput("previousInput_2", "Input_2", "prevInputs_2", "input_2", part2);
var part3 = getParameterByName("myInputs_3[]");
addInput("previousInput_3", "Input_3", "prevInputs_3", "input_3", part3);
}
function getParameterByName(name){
var url = decodeURIComponent(window.location.search);
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "=([^&#]*)", 'g');
var match, result = [];
while ((match = regex.exec(url)) !== null)
result.push(match[1]);
return result;
}
function addInput(divName, nextDiv, arrName, nextArray, contents){
contents.forEach(function (value, i){
value = value.replace(new RegExp('\\+', 'g'), ' ');
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' value='" + value + "' readonly>";
document.getElementById(divName).appendChild(newdiv);
var newdiv1 = document.createElement('div');
newdiv1.innerHTML = "<input type='text' name='" + nextArray + "[]' value='' required>";
document.getElementById(nextDiv).appendChild(newdiv1);
})
}
</script>
<style>
html *
{
color: #000 !important;
font-family: Arial !important;
}
.wrapper
{
height: 100%;
width: 100%;
display: flex;
overflow:auto;
}
.window
{
width: 120%;
min-height: 200px;
display: flex;
flex-direction: column-reverse;
float: none;
align-items: center;
justify-content: center;
}
.generatedEmotion
{
font-weight: bold;
background-color: #f9f99f;
font-size:2.4em;
}
.generatedEmotionHidden
{
font-weight: bold;
font-size:2.4em;
visibility: hidden;
}
input[type=text], select {
width: 150%;
padding: 6px 10px;
margin: 4px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 0px;
float: left;
width: 75%;
margin: 5px;
margin-left: 0.5cm;
}
.floating-box {
float: left;
width: 100%;
margin: 5px;
margin-left: 0.5cm;
border: 3px solid #73AD21;
border-radius: 4px;
overflow: hidden;
}
</style>
</head>
<body onload="GetSimpleStory()">
<div class="wrapper">
<div class="window">
<div class="windowContent">
<p id="demo"></p>
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<b>Emotion </b><br>
<input type="text" value="" id="emotion" class="generatedEmotion" readonly>
<div id="previousInput_1">
<textarea rows="4" cols="50" readonly class="floating-box">
John arrived at Sally's house to pick her up. John and Sally were going to a fancy restaurant that evening for a dinner. John was little nervous because he was going to ask Sally to marry him.</textarea>
</div>
<div id="previousInput_2">
<div class="floating-box">Waiter shows John and Sally to their table.</div>
</div>
<div id="previousInput_3">
<div class="floating-box">John asks Sally, "Will you marry me?"</div>
</div>
</div>
</div>
<div class="window">
<div class="windowContent">
<br><br> <b>Interesting Version</b><br><br><br><br><br>
<div id="Input_1">
<textarea rows="4" cols="50" class="floating-box">
</textarea>
</div>
<div id="Input_2">
<textarea rows="2" cols="50" class="floating-box">
</textarea>
</div>
<div id="Input_3">
<textarea rows="1" cols="50" class="floating-box">
</textarea>
</div>
<input type="submit" value="Both parts completed, Submit story">
</div>
</div>
</form>
<div class="window">
<div class="windowContent">
<p><font size="6"><b>some other text goes in this vertical div</b></font></p>
</font>
</div>
</div>
</div>
</body>
</html>
Problems:
After submitting form, first field, emotion is not submitted. I read on SO that if it is readonly, it should be submitted.
Entire second vertical div is not getting submitted. It is made up of arrays input_1, input_2 and input_3. I have no idea what is wrong, because the similarly "stuffed" prevInputs get submitted
FYI, I am submitting the information via formspree.io
PS: url to try->
soq.html?emotion=Surprise&myInputs_1%5B%5D=hello&myInputs_1%5B%5D=dear+reader&myInputs_2%5B%5D=thank+you+for&myInputs_2%5B%5D=reading+the+question&myInputs_3%5B%5D=and+trying+to+solve+the+probelm
Related
I am attempting to create a form that outputs the entered data when "submit" is clicked to a textarea.
Currently I can get it to submit to the area below the form but am unsure how to have multiple ID's in a single textarea.
<html>
<head>
<script>
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
document.getElementById('name').innerHTML =
document.getElementById("user_name").value;
document.getElementById('stepsTaken').innerHTML =
document.getElementById("user_stepsTaken").value.replace(/(?:\r\n|\r|\n)/g, '<br />');
document.getElementById('theDate').innerHTML =
document.getElementById("user_theDate").value.replace(/(?:\r\n|\r|\n)/g, '<br />');
}
</script>
</head>
<body>
<script type="text/javaScript">
function Qreplace(e) {
var textfield = document.getElementById(e);
var regex = /#test/gi;
textfield.value = textfield.value.replace(regex, "1. test\n2. test");
var regex = /#report/gi;
textfield.value = textfield.value.replace(regex, "1. report\n2. report");
}
</script>
<form action="javascript:void(0);">
<p>
<label><b>Enter a Message</b></label><p>
<input type="text" id="user_input" required><p>
<label><b>Enter a name</b></label><p>
<input type="text" id="user_name" required><p>
<textarea id="user_stepsTaken" onkeyup="Qreplace('user_stepsTaken')" placeholder="Actions taken and notes..." style="height: 91px; max-height: 350px;" required></textarea>
<label for="sme">TL/SME Assist*</label>
<br>
Yes <input required="" type="radio" onclick="javascript:smeCheck();" value="Yes" name="TL/SME" id="yesCheck">
No <input type="radio" onclick="javascript:smeCheck();" value="No" name="TL/SME" id="noCheck"><br>
<div id="ifyes" style="display:none">
<input type="text" id="smeAssist" name="smeAssist" placeholder="Name or Initials of the TL/SME that provided assistance">
<!-- Hide/Show SME additonal options based on radio check box -->
<script type="text/javascript">
function smeCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifyes').style.display = 'block';
} else document.getElementById('ifyes').style.display = 'none';
}
</script>
</div>
<div style="display:block; margin-left: 0px;">
<label for="dateStarted">Issue Started*</label>
<input type="date" id="user_theDate" name="theDate" class="select">
</div>
<input type="submit" onclick="showInput();"><br/>
</form>
<label>Your input: </label>
<p><span id='display'></span></p>
<p><span id='name'></span></p>
<div id='stepsTaken'></div>
<div id='theDate'></div>
</body>
</html>
Thank you for any help I am quite unfamiliar with Javascript.
So the end result I am trying to accomplish is have the user input to output into a textarea with the following formatting below.
Message: Message here
Name: Name here
Info: Actions Taken
Date: 2018-12-13
you should keep return false; in function showInput() as form get submitted and there will be nothing to show
or make input type="button" instead of type="submit"
I found a solution to the issue using Jquery as follows
$('#summary').click(function() {
var name = $('#clientName').val()
var message = $('#errorMessage').val()
var ret = "Name: "+name+" \n\rMessage: " + message;
console.log(ret)
$(".output-container").fadeIn();
$("#output").text(ret);
})
$("#copyForm").click(function(){
$("#output").select();
document.execCommand('copy');
$(".success").fadeIn();
});
body {font-family: Helvetica;background-color: #1E365E;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #1E365E;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button] {
background-color: #1E365E;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=radio] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=date] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit]:hover {
background-color: #1E365E;
}
input[type=button]:hover {
background-color: #1E365E;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 5%;
}
.output-container {
display: none;
margin-top: 50px;
}
#output {
height: 300px;
}
.success {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="container">
<h2>Testing Copy</h2>
<form id="myForm" action="/action_page.php">
<label for="cName">Client Name*</label>
<input type="text" id="clientName" name="cName" placeholder="Client Name...">
<label for="errorMessage">Error Message</label>
<input type="text" id="errorMessage" name="errorMessage" placeholder="Any error messages?">
</form>
<button id="summary">View Summary</button>
<div class="output-container">
<textarea id="output">
<h2>Form Content</h2>
</textarea>
<button id="copyForm">Copy Summary</button>
</div><!-- #end output-container -->
<p class="success"><strong>Form successfully copied</strong></p>
</div>
I'm currently trying to inform a user about the form details they input.I'm not very clear how to go about this but what i thought of doing was to 1 html file to have the "form" and in the action ="htmlfile2.url" where the user has to be shown what his input was.
so currently i have 2 html files. The first one is a form to fill. the second html file is a modal pop up. In this pop up i want to show the user the details that they have entered. The issue is the name the user enter has to come to the second page on submitting ( after clicking the submit button the user gets directed to "htmlfile2" where the modal is shown. What i have so far is this.
HTML File 1
<div class="feedback-background">
<div class="feedback-content">
<div class="close">+</div>
<img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">
<form name="FeedbackForm" action="htmlfile2.html" onclick="return validation()" method="post">
Name:
<input id="Name" name="Name" type="text" placeholder="Name">
E-Mail:
<input id="E-mail" name="E-mail" type="email" placeholder="E-mail">
What do you think about us?<br>
<textarea id="comment" rows="6" cols="33" name="comment"></textarea>
<br>
How would you rate us ?
<br>
<label><input type ="radio" name="rating" id="rating" value="Excellent" checked>Excellent</label>
<label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
<label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
<label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
<label><input type ="radio" name="rating"id="rating" value="Extreamly Poor">Extremely Poor</label>
<br>
SUBMIT
</form>
</div>
</div>
HTML File 2
<body>
<div class="popup">
<div class="popuptext" id="myPopup"><p>Thank you <span id="username"></span> ,<br>Your feedback has been recorded.<br>
<br>You commented that"<span id="usercomment"></span>" <br><br>and rated our website "<span id="userrating"></span>".
<br><br>Thank you
for taking your time to do so.<br><br>You will now be re-directed automatically</p>
</div>
</div>
</body>
CSS File for both (Please note that the css file contain other styling done for other pages this is the entire css)
/*----------comment form----------*/
.feedback-background{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display:none;
}
.feedback-content{
width: 500px;
height: 550px;
background-color: white;
border-radius: 4px;
padding: 20px;
position:relative;
}
#submit{text-transform:uppercase;
padding:6px 2px;
margin-right: 40px;
margin-top: 20px;
background: #ee0c6e;
font-weight:600;
color:white;
border-radius: 3px;
font-size: 10px;
min-width: 100px;
text-decoration:none
}
input {
width: 50%;
display: block;
margin: 10px 0px;
}
label {
display: block;
}
input[type="radio"]{
width: auto;
display: inline;
}
.close{
position:absolute;
top:0px;
right:14px;
transform:rotate(45deg);
font-size:42px;
cursor:pointer;
}
#feedbacksubmit{
margin-left:600px;
margin-bottom:50px;
background-color:#484848;
border-radius:14px;
padding:10px;
cursor:pointer;
color:white;
outline:none;
}
/*-----popup----*/
.popup{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.popuptext{
width: 100px;
height: 350px;
background-color: #000025;
border-radius: 4px;
padding: 20px;
position:relative;
color:#fff;
width: 20%;
height:30%;
display: block;
margin: 10px 0px;
text-align:center;
margin-left:0px;
margin-bottom:80px;
}
What i want to do is after the first html (which contains the form) is submitted , it has to get directed to the second html where it basically say thank you to the person filling the form. Here i want to access the name the user added into the form ( if he entered "john") i want to say thank you John "Inside the SECOND HTML AFTER GETTING DIRECTED UPON submitting (sorry for caps that was just to highlight it)
If there is a better way to go about this please enlighten me. Thank you so much all.Also please note that i only know JavaScript . Dont know how to work with JQuery or PHP
For the sake of knowledge, You can get data in HTML File 2 using Javascript, use the following code in HTML File 2:
window.onload = function () {
var url = document.location.href;
var params = url.split('?')[1].split('&');
var data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById('username').innerHTML = data.name;
}
Nothing special we are just extracting data from the URL (HTTP Request) that was sent from the HTML file 1 form using some string functions.
But the proper way is to use some backend language.
A solution to your problem using php would be something like:
<?php
if(!empty($_POST['name']) && !empty($_POST['comment']) && !empty($_POST['rating'])): // you should also include other checks... ?>
<body>
<div class="popup">
<div class="popuptext" id="myPopup">
<p>
Thank you <span id="username"><?php echo $_POST['name'];?></span> ,<br>Your feedback has been recorded.<br>
<br>You commented that"<span id="usercomment"><?php echo $_POST['comment'];?></span>" <br><br>and rated our website "<span id="userrating"><?php echo $_POST['rating'];?></span>".
<br><br>Thank you
for taking your time to do so.<br><br>You will now be re-directed automatically
</p>
</div>
</div>
</body>
<?php endif; ?>
You could also use other programming languages, but I hope this can help you.
I recently designed a webpage, I am not a web developer, so I collected pieces and bits from various locations and kinda stitched them up.
Now, the page is fully designed and works in firefox, chrome and IE.
But it does not work on Safari.
Here is the code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="referrer" content="origin">
<script>
var counter = 0;
var limit = 50;
function addInput(divName, arrName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' required>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<style>
html *
{
color: #000 !important;
font-family: Arial !important;
}
.wrapper
{
height: 100%;
width: 100%;
display: flex;
overflow:auto;
}
.window
{
width: 100%;
min-height: 200px;
display: flex;
flex-direction: column-reverse;
float: none;
align-items: center;
justify-content: center;
}
.windowContent
{
}
input[type=text], select {
width: 150%;
padding: 6px 10px;
margin: 4px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 80%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]{
width: 50%;
background-color: #9CAFFF;
color: white;
padding: 6px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 0px;
float: left;
width: 75%;
margin: 5px;
margin-left: 0.5cm;
}
.floating-box {
float: left;
width: 100%;
margin: 5px;
margin-left: 0.5cm;
border: 3px solid #73AD21;
}
</style>
</head>
<body onload="GenerateEmotion()">
<div class="wrapper">
<div class="window">
<div class="windowContent">
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
<div id="dynamicInput_1">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_2">
<div class="floating-box">Sally heard a knock on the door.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_2', 'myInputs_2');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_3">
<div class="floating-box">Her heartbeat fast, Sally began to walk down the aisle.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_3', 'myInputs_3');">
</div>
<br>
<input type="submit" value="I have completed a story">
</form>
<script>
function GenerateEmotion(){
var emotion = "";
var raw = Math.random();
var final = Math.ceil(raw * 4);
if (final == 1)
document.getElementById("emotion").value = "Happy";
else if (final == 2)
document.getElementById("emotion").value = "Sad";
else if (final == 3)
document.getElementById("emotion").value = "Angry";
else if (final == 4)
document.getElementById("emotion").value = "Surprise";
}
</script>
</div>
</div>
<div class="window">
<div class="windowContent">
<p><font size="6"><b>Emotionalize it!</b></font></p>
<p><font size="3">We are trying to develop computer programs that can understand common emotions, so they can communicate better with human users.</font></p>
<p><font size="5"><b> Rules of the game </b></font></p>
<font size="3">
<p>Imagine you are a narrator. Today, you are narrating a story of John and Sally's wedding.</p>
<p>Your goal is to make your audience experience the emotion written on the left top. </p>
<p>We are helping you to maintain the flow, you just need to connect the dots!</p>
<p>As your story will be fed to a giant computer program, so can you:</p>
<ul>
<li>Please use simple language. Do NOT use compound, complex, or conditional sentences</li>
<li>Please do not use pronouns. Use the name - John instead of 'him'</li>
<li>Please use the past tense and active voice.</li>
<li>Please make sure to include events from the beginning to the end.</li>
<li>You want more characters? If yes, Please use David(male) and Amy(female)</li>
<li>You can use the also include character based actions, e.g. 'A waiter ...'</li>
<li>Your audiance should experience the said emotion</li>
</ul>
</font>
</div>
</div>
</div>
</body>
</html>
Specifically, what does not work:
button click to 'add new sentences'
submit
Is there any error: No, nothing happens after touch-clicking the button
What I am looking out for:
If you web developer guys can figure out why it does not work on Safari, it would be great help.
How to change that part, so functionality remains the same, but it works on safari
As I am already asking this question, another side question would help. can I know how to fix the scrollbar at the bottom?
PS_1: If you don't feel like copy pasting this code, it is in working condition here
PS_2: WHen I say safari, I mean the one on the iPhone
Try moving the "Emotion" input text box outside of the "dynamicInput_1" div. So, instead of:
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
<div id="dynamicInput_1">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
Try:
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div id="dynamicInput_1">
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
Also, take a look at this explanation of the use of id and class: div class vs id
You've got several divs using the same id. ids should be unique.
I'm not sure what you mean about fixing the scrollbar at the bottom, so I haven't addressed that question.
Do you have the javascript turned on in Safari?
Desktop: https://support.ezimerchant.com/hc/en-us/articles/200836150-How-do-I-enable-cookies-and-JavaScript-in-Safari-Mac-
Mobile: https://www.whatismybrowser.com/guides/how-to-enable-javascript/safari-iphone-ipod
I'm new to JavaScript, so bear with me if I'm not explaining what I want that well. So basically I have a form for creating activities, so whenever the user fills the fields and hit save it will create an instance of the div containing the information. Now those information are basically just in lines, and I would like to organize them inside a box (div), but I'm not sure how to create it, is it using JS or HTMl?
Here is a picture of what I have working right now.
And here is a view of the code.
window.onload = function() {
function addAct(nameact, when, where,desc) {
var buses = document.querySelectorAll(".bus");
var curr = document.createElement("div");
curr.setAttribute("class", "name");
var p0 = document.createElement("p");
p0.setAttribute("class", "nameact");
p0.innerHTML = nameact;
var p1 = document.createElement("p");
p1.setAttribute("class", "whereisit");
p1.innerHTML = when;
var p2 = document.createElement("p");
p2.setAttribute("class", "when");
p2.innerHTML = where;
var p3 = document.createElement("p");
p3.setAttribute("class", "describtion");
p3.innerHTML = desc;
curr.appendChild(p0);
curr.appendChild(p1);
curr.appendChild(p2);
curr.appendChild(p3);
if (buses.length) {
buses[buses.length -1].insertAdjacentHTML("afterEnd", curr.outerHTML)
} else {
document.forms[1].insertAdjacentHTML("afterEnd", curr.outerHTML)
}
}
var obj = {nameact: "", when: "", where: "",desc:""};
document.forms[1].onchange = function(e) {
obj[e.target.name] = e.target.value;
}
document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
}
<section id="cd-placeholder-2" class="cd-section cd-container">
<h2>Activities</h2>
<div id="Slider" class="slide-up">
<div>
<div class="contents" >
<form class="form2">
<div class="col-3">
<label>
Activity Name
<input placeholder="What is your activity?" tabindex="3" name="nameact" />
</label>
</div>
<div class="col-3">
<label>
Where?
<input placeholder="Where is it going to be?" tabindex="4" name="when" />
</label>
</div>
<div class="col-3">
<label>
When?
<input type="date" placeholder="mm\dd\yy" tabindex="4" name="where"/>
</label>
</div>
<div>
<label>
Care to share more?
<textarea placeholder="describtion of your activity" class="text" name="desc"></textarea>
</label>
</div>
<button type="submit" value="Submit" class="cd-btn" id="col-submit" style="position:relative;float:right;overflow:hidden;margin:10px;margin-top:30px;">Add Activity</button>
</form>
<div id="name"></div>
</div>
</div>
</div>
</section>
Any feedback is highly appreciated.
You need HTML+CSS+JS
HTML :
<div id="name"></div>
CSS
.row{
background-color: red;
border: 5px solid #333;
display: block;
position: relative;
overflow: hidden;
}
.nameact{
background-color:red;
height: 40px;
display: inline-block;
}
.whereisit{
background-color:green;
height: 40px;
display: inline-block;
}
.when{
background-color:blue;
height: 40px;
display: inline-block;
}
.describtion{
background-color:brown;
height: 40px;
display: inline-block;
}
JS
var obj = {nameact: "", when: "", where: "",desc:""};
document.forms[1].onchange = function(e) {
obj[e.target.name] = e.target.value;
}
document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
function addAct(nameact, when, where,desc) {
var myhtml = '<div class="row"><div class="nameact">'+nameact+'</div><div class="whereisit">'+where+'</div><div class="when">'+when+'</div><div class="describtion">'+describtion+'</div></div>';
document.getElementById('name').innerHTML += myhtml;
}
You will need to update CSS code, based on your needs
If you need any help understanding this, please let me know. I've written a few css styles, and the html markup that they will be applied to. Make your javascript produce this markup, and do some reading about CSS to extrapolate this into a complete module.
<style>
.activity {
width: 645px;
height: 160px;
border: 2px solid #0000ff;
}
.activity > div {
padding: 20px;
}
.activity .top {
display: inline-block;
float: left;
width: 174px;
height: 30;
border-right: 1px solid #0000ff;
}
.activity .top.end {
width: 175px;
border-right: none;
}
.activity .bottom {
display: inline-block;
float: left;
width: 605px;
height: 50;
border-top: 1px solid #0000ff;
}
.activity .title {
display: block;
}
</style>
<div class="activity">
<div class="top">
<span class="title">ACTIVITY NAME</span>
<span>Skydiving</span>
</div>
<div class="top">
<span class="title">WHERE?</span>
<span>Dubai Palm Island</span>
</div>
<div class="top end">
<span class="title">2017-06-22</span>
</div>
<div class="bottom">
<span>CARE TO SHARE MORE?</span>
<span class="title">It will be a fun trip!</span>
</div>
</div>
I hope this gets you headed in the right direction!
I have the following code, and the javascript console in chrome says "Can't read innerHTML property of null. Why does document.getElementById('display') turn up empty handed?
<!DOCTYPE html>
<html>
<head>
<title>Chat 3</title>
<script type="text/javascript">
function showmsg(str){
var display = document.getElementById('display');
display.innerHTML += "<p>" + str + "</p>";
}
if("WebSockets" in window){
pass;
}else{
showmsg("Your browser doesn't support WebSockets. Try Google Chrome.");
}
</script>
<style type="text/css">
#username {
padding: 0px;
margin: 0px;
height: 26px;
width: 400px;
}
/* ADDED container div that wraps onlineusers and display */
#container {
margin: 10px 0;
}
/* use float: left to put them side-by-side */
#display {
padding: 0px;
margin: 0px;
border-style: solid;
border-width: 1px;
overflow: auto;
height: 400px;
width: 400px;
float: left;
}
#onlineusers {
padding: 0px;
margin: 0px;
height: 400px;
width: 200px;
border-style: solid;
border-width: 1px;
float: left;
}
/* Added container2 to wrap inputline and sendbutton */
#container2 {
margin: 10px 0;
}
#inputline {
padding: 0px;
margin: 0px;
height: 26px;
width: 350px;
float: left;
}
#sendbutton {
padding: 0px;
margin: 0px;
height: 30px;
width: 50px;
float: left;
}
/* this is a well used "hack". */
.clearfix {
clear: both;
}
</style>
</head>
<body onload="document.getElementById("username").focus()">
<input type="text" id="username" />
<div id="container">
<div id="display"></div>
<div id="onlineusers"></div>
<div class="clearfix"></div>
</div>
<div id="container2">
<input type="text" id="inputline" length="55" />
<input type="button" id="sendbutton" value="Send" />
</div>
</body>
</html>
Move your script-section down to the bottom of the page. Otherwise it is executed before the page has been loaded.
Btw: Putting scripts at the bottom of your page is even a "best practice" and recommended by Google, Yahoo & Co
You're calling showmsg before the whole page (and hence the display div) is loaded. Hence the error. Call it from onload and it'll work.
Add this function to the <head>
function handleLoad()
{
document.getElementById("username").focus()
if("WebSockets" in window){
pass;
}else{
showmsg("Your browser doesn't support WebSockets. Try Google Chrome.");
}
}
and call it from onload
<body onload="handleLoad()">
Put your script tag at the end of the document:.
In your case the page has not been completely parsed into DOM tree, but your script executes anyway:
<body onload="document.getElementById('username').focus()">
<input type="text" id="username" />
<div id="container">
<div id="display"></div>
<div id="onlineusers"></div>
<div class="clearfix"></div>
</div>
<div id="container2">
<input type="text" id="inputline" length="55" />
<input type="button" id="sendbutton" value="Send" />
</div>
<script type="text/javascript">
function showmsg(str){
var display = document.getElementById('display');
display.innerHTML += "<p>" + str + "</p>";
}
if("WebSockets" in window){
pass;
}else{
showmsg("Your browser doesn't support WebSockets. Try Google Chrome.");
}
</script>
</body>
This is also considered a good practice for performance reasons:
http://developer.yahoo.com/performance/rules.html#js_bottom