So basically what I'm trying to do is when I fill out a form. All the information gets displayed in a newly created div after I hit a submit button. The problem I'm having is that when I press the submit button. A div doesn't show up at all. Does anyone know how I can accomplish this?
Javascript
$(document).ready(function() {
$('#submit').click(function() {
//Form Disappears after Submission
var form = document.getElementById("form");
var formBackground = document.getElementById("form-background");
if (form.style.display == "block" || form.style.display == "") {
form.style.display = "none";
formBackground.style.display = "none";
}
//Creates New Div After Submission
var titleInput = document.getElementById("titleInput").value;
var descInput = document.getElementById("descInput").value;
var structure = $('<div class="note"><div class="note-content"><div class="imagecontainer"><img src="./images/jose.jpg"/></div><div class="description"><h3>Title:</h3>' + titleInput + '<p>Description:</p>' + descInput + '</div></div></div>');
$('#container').append(structure);
return false;
});
});
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Personal Note Taker</title>
<!--Button Icons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Index Styling-->
<link rel ="stylesheet" href="./css/styling.css"/>
</head>
<body>
<div id="header">
<h1>Personal Note Taker</h1>
</div>
<div id="containter"></div>
<!--How the Note should look like
<div class="note">
<div class="note-content">
<a href="./quote1.html">
<div class="imagecontainer">
<img src="./images/jose.jpg"/>
</div>
<div class="description">
<h3>Quote 1</h3>
<p>Every action that you commit, will develop who you are. </p>
</div>
</a>
</div>
</div>
-->
<!--Add Note Button-->
<div id="addNoteButton">
<i class="fa fa-plus" aria-hidden="true"></i>
<div>
<!--Form Background-->
<div id="form-background">
</div>
<!--Form Field-->
<div id="form">
<div id="cancel-button-div">
<button id="cancel-button">X</button>
</div>
<h2 id="form-title">Add a Note</h2>
<!--Title and Description Questions-->
<form>
<br>
<input placeholder="Title" type="text" id="titleInput">
<br><br>
<textarea placeholder="Description" type="text" id="descInput" rows="5" cols="30">
</textarea>
<br><br><br><br>
<button id="submit">Submit</button>
</form>
</div>
<!--Index Javascript-->
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="./js/index_script.js"></script>
</body>
</html>
change
id="containter"
to
id="container" :D
Related
```
<html>
<head>
<link rel="stylesheet" href="http://serversamuel.altervista.org/prototipi/css/1.css">
<link rel="stylesheet" href="http://serversamuel.altervista.org/prototipi/css/2.css">
<link rel="stylesheet" href="http://serversamuel.altervista.org/prototipi/css/3.css">
</head>
<body>
<div id="none" style="display:none;">
<div class="chat">
<div class="chat-title">
<h1>Fabio Ottaviani</h1> ×
<h2>Supah</h2>
<figure class="avatar">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156381/profile/profile-80.jpg"></figure>
</div>
<div class="messages" style="overflow-y:scroll;scrollbar-width: none;">
<?php include 'commentinuovo.php';?>
<div class="messages-content"></div>
</div>
<form method="POST" action="config.php">
<div class="messages-content"></div>
<div class="message-box">
<textarea type="text" class="message-input" placeholder="Type message..." name="text"></textarea>
<input type="submit" name="submit" onsubmit="setTimeout(function () { window.location.reload(); }, 10)" id="button" >
</div>
</form>
</div>
<div class="bg"></div>
</div>
</body>
</html>
```
when I click the submit button it does its job, but there is a way to make the page reload when clicked and the form display remains empty??
so when I click both I reload the page and leave #none opened
The picture appears and disappears instantly
I need to change the picture at the click of a button, but it appears and disappears instantly. What to do in this case, please help. By pressing I call the function php and in it the js code for changing the picture. Already everything I knew was retried. How to deal with this?
Game.php :
<?php
require "php/set_locations.php";
?>
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="styles/GameStyle.css">
</head>
<body>
<div class="main_container">
<div class="header"></div>
<div class="body_container">
<div class="left_menu_container">
<div class="left_menu_main_div">
<a class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/Left_menu.js"></script>
</div>
</div>
<div class="main_image_container">
<div class="image_container">
<div class="img_container">
<img class="image_location" id="image_location" name="image_location" src="">
</div>
</div>
</div>
<div class="location_buttons_container">
<div class="buttons_container">
<form method="post">
<ul class="buttons_menu">
<li>Локации</li>
<li ><span ><button id="location_button_1" name="location_button_1">Главные ворота</button></span><em>3 сек.</em></li>
<li><span>Торговый квартал</span><em>2 сек</em></li>
<li><span>Замок</span><em>5 сек</em></li>
<li><span>Гильдия</span><em>4 сек</em></li>
</ul>
</form>
</div>
</div>
</div>
<div class="footer_container">
<div class="left_footer_block"></div>
<div class="textarea_container">
<textarea class="main_textArea" readonly></textarea>
<div class="input_and_button_container">
<input class="input_for_main_textArea">
<div class="button_container">
<button class="set_text_button" ></button>
</div>
</div>
</div>
<div class="onlinelist_container">
<div class="online_list">
<ul class="online_list_ul">
<li><span>Герои в локации</span><em></em></li>
<li><span>IIITUKATUPKA</span><em>8</em></li>
<li><span>Tataliec</span><em>7</em></li>
<li><span>Nekita2012</span><em>6</em></li>
<li><span>Brion</span><em>5</em></li>
<li><span>Joken</span><em>4</em></li>
<li><span>Golden</span><em>5</em></li>
</ul>
</div>
</div>
</div>
</div>
<?php
if(isset($_POST["location_button_1"])){
setLocation(4);
}
?>
</body>
</html>
setLocation.php:
<?php
require "include_db.php";
function setLocation($url_image){
$locationName = R::load('locationsdb', $url_image);
echo '<script type="text/javascript">
var img = "'.$locationName->location_image.'";
var button1 = document.getElementById("location_button_1");
button1.addEventListener("click", function(){
});
//document.getElementById("location_button_1").onclick = () => asd();
</script>';
}
?>
<script>
function cccc(){
document.getElementById("image_location").src =img;
}
</script>
I'm changing over from Java to Javascript as I'd like to expand my programming capabilities, and I'm not sure why but I'm having a really hard time adjusting. For example, I'm not even sure why I can't get the Javascript function to run, nevermind actually work the way I want it to.
I feel like I might not have the JS wired up to my HTML document properly, but I have included the correct filename within a script tag, and the two files are within the same folder, so why isn't the JS function even being called?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>To-do Webapp</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!--<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">-->
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/styling.css">
</head>
<!-- scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="script.js"></script>
<body>
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task"/>
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button onclick="addTask()">Button element</button>
</div>
</div>
</form>
</body>
JS
function addTask() {
"use strict";
/*global document: false */
document.alert("hello");
}
It is window.alert("hello");, not document.alert("hello");
And inline script is not recommended, use addEventListener instead
Stack snippet
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('button').addEventListener('click', addTask);
});
function addTask() {
"use strict";
/*global document: false */
window.alert("hello");
}
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task" />
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button>Button element</button>
</div>
</div>
</form>
</div>
Note, the line adding the event listener needs to be called after DOM loaded, as seen in above code sample, or in a script at the end of the body, as shown in below sample.
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task" />
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button>Button element</button>
</div>
</div>
</form>
</div>
<script>
document.querySelector('button').addEventListener('click', addTask);
function addTask() {
"use strict";
/*global document: false */
window.alert("hello");
}
</script>
What I am trying to do
I am trying to make some text bold when I click the bold button. This triggers a function which calls the execCommand function... unfortunately when I click the button the whole page refreshed and I lose all my text inside the iframe.
I can see the text go bold for a split second and then the page reloads.
My Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body onLoad="enableEditMode();">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>My Text Editor</h2>
<form class="" action="index.html" method="post">
<div class="form-group">
<label for="title">Title</label>
<input class="form-control" type="title" name="title" value="">
</div>
<div class="form-group">
<div class="" id="toolbar">
<button onClick="execCmd('bold')"><i class="fa fa-bold"></i></button>
</div>
<iframe class="form-control" src="" width="" height="" name="richTextField" style="width:100%;height:100%"></iframe>
</div>
<button class="btn btn-default btn-block" type="submit" name="button">Go!</button>
</form>
</div>
</div>
</div>
<script>
/**
*
*/
function enableEditMode(){
richTextField.document.designMode = 'On';
}
/**
*
*/
function execCmd(command){
richTextField.document.execCommand(command, false, null);
}
</script>
</body>
</html>
My Question
How do I make my text bold here and preserve my text?
Found my answer: just have to add a type to the buttons to prevent them from automatically submitting the form.
<button onClick="execCmd('bold')" type="button"><i class="fa fa-bold"></i></button>
I think the use is wrong you could firstly set a variable
var rtField = document.getElemetByID('richTextField')
please not in the function ! than add an eventlistener to the button which changes the text
var btn = document.getElementByID('button')
btn.addEventListener('click', function (event) {
rtField.style.fontWeight = 'bold';
}
should work.
I am using jquery mobile and have a collapsible set.
When using a function to change its innerHTML it works just fine. Displaying the content inside as collapsibles.
<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right">
</div>
works when using:
document.getElementById("doro").innerHTML ='<div data-role="collapsible">
<h3>Click me - Im collapsible!</h3>
<p>I'm the expanded content.</p>
</div>'
but when i try:
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
while:
function refreshPage(){
var text = "<div data-role='collapsible'><h1>Click me - I'm collapsible!</h1><p>I'm the expanded content.</p></div>";
document.getElementById("doro").innerHTML = text;
}
It changes the collapsible set I have into just text without the jqueryMobile css and javascript attached.
That's sort of what it looks like
function refreshPage()
{
var text = "<div data-role='collapsible'><h1>Click me</h1><p>I'm the new expanded content.</p></div>";
document.getElementById("doro").innerHTML =text;
}
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!doctype html>
<html><head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="panel" id="left-panel" data-display="overlay">
<h2></h2>
<form id="checkuser" name="checkuser" method="post" class="ui-body ui-body-a ui-corner-all">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
</fieldset>
</form>
</div>
<div data-role="header">
<h1></h1>
Add
</div><!-- /header -->
<div data-role="content">
Star button
<p id="demo">
<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right">
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div></p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
this is a simplified example that won't work aswell, and I don't get why
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
<div data-role="main" class="ui-content" id="name"> </div>
<script>
document.getElementById("name").innerHTML ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>';
function refreshPage(){ document.getElementById("name").innerHTML ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>';}
</script>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
When you are dynamically creating jQuery mobile widgets after the page has already been enhanced, you have to initialize the widgets yourself in one of the following ways:
Call .enhanceWithin() on the container element.
Call the individual widget intializer, e.g. .colapsibleset(), .collapsible(), etc.
For your example, you could do the following. Given a button and a container DIV with id="name":
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
<div data-role="main" class="ui-content" >
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" />
<div id="name"></div>
</div>
</div>
On pagecreate, dynamically add the collapsibleset to the container and call enhanceWithin(). Also add a click handler to the button which calls refreshPage(). refreshPage() replaces the html in the container and again calls enhanceWithin().
$(document).on("pagecreate", "#pageone", function(){
$("#name").html('<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>').enhanceWithin();
$("#submit").on("click", function(){
refreshPage();
});
});
function refreshPage(){
var text = '<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible 2!</h3><p>Im the expanded content from button.</p></div>';
$("#name").html(text).enhanceWithin();
}
Working DEMO
Also, in your second code snippet, you are loading 2 different versions of jQuery. Use either 2.1 or 1.11 but not both.