Submit a form when a video is ended

Submit a form when a video is ended - javascript

Basically I have a form that needs to be submitted in order that the next section of the site appears, in this case it's when a video plays through and ends, the values are submitted via POST so i can't just have a hardcoded URL as i could if i used GET ie. thecycle.ie/test02.php?click='SCENE 09'. The EventListener works but i just can't get it to submit the form.
function listen(evnt, elem, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent)
{
var r = elem.attachEvent("on" + evnt, func);
return r;
}
else window.alert("I'm sorry, I'm afraid I can't do that.");
}
listen("ended", document.getElementById("bgvid"), changePage);
function changePage() {
document.getElementById('formID').submit(); // SUBMIT FORM
}
Below is the full page
<form name="formID" id="formID" method="post" action="test02.php">
<input type="hidden" id="bgstate" name="bgstate" value="1">
<input type="hidden" id="vostate" name="vostate" value="">
<input type="hidden" id="choice" name="choice" value="0">
<script type="text/javascript">
$(document).ready(function() {
var bgAudio = document.getElementById("background_audio");
if(bgAudio) {
bgAudio.volume = 1.0;
bgAudio.play();
}
});
</script>
<script type="text/javascript">
function PlayBG()
{
document.getElementById("bgstate").value = "0";
var bgAudio = document.getElementById("background_audio");
bgAudio.volume = 1.0;
bgAudio.play();
}
function StopBG()
{
document.getElementById("bgstate").value = "1";
var bgAudio = document.getElementById("background_audio");
bgAudio.volume = 0.0;
bgAudio.pause();
bgAudio.currentTime = 0;
}
</script>
<div id="timeline">
<!-- top point of ogham -->
<img src="img/timeline/timeline_start.png" width="31" height="31" id="timeline_01"><br>
<input name="click" id="timelineButton" type="image" value="SCENE 01" src="img/timeline/timeline_A.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_A_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_A.png'">
<input name="click" id="timelineButton" type="image" value="SCENE 02" src="img/timeline/timeline_C.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_C_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_C.png'">
<input name="click" id="timelineButton" type="image" value="SCENE 03" src="img/timeline/timeline_D_on.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_D_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_D_on.png'">
<!-- bottom point of ogham -->
<img src="img/timeline/timeline_end.png" alt="timeline"><br>
</div>
<div id="banner">
<img src="img/smalllogo.png" alt="the cycle">
<div class="menu">
<ul>
<li>
Home
</li>
<li>
Wiki
</li>
<li>
About
</li>
</ul>
</div>
<div id="music">
<img src="img/music.png" alt="music">
<input type="image" src="img/play.png" alt="play" onclick="PlayBG(); return false;" value="Play" onmouseover="javascript:this.src='img/play_on.png'" onmouseout="javascript:this.src='img/play.png'">
<input type="image" src="img/stop.png" alt="stop" onclick="StopBG(); return false;" value="Stop" onmouseover="javascript:this.src='img/stop_on.png'" onmouseout="javascript:this.src='img/stop.png'">
</div>
</div>
<script type="text/javascript">
function PlayVO18()
{
document.getElementById("vostate").value = "0";
var voAudio = document.getElementById("voiceover_audio18");
var bgAudio = document.getElementById("background_audio");
var oldBGVolume = bgAudio.volume;
voAudio.volume = 1.0;
voAudio.play();
}
function StopVO18()
{
document.getElementById("vostate").value = "1";
var voAudio = document.getElementById("voiceover_audio18");
voAudio.volume = 0.0;
voAudio.pause();
voAudio.currentTime = 0;
}
</script>
<audio id="voiceover_audio18" class="voiceover_audio" src="audio/vo_balor_07.mp3"></audio>
<audio id="background_audio" class="background_audio" src="audio/myth_cycle_01.mp3" loop=""></audio>
<video autoplay="" poster="img/balorlugh_01.jpg" id="bgvid">
<source src="vids/balorlugh_01.webm" type="video/webm">
<source src="vids/balorlugh_01.mp4" type="video/mp4">
</video>
<div id="decision">
<div class="container">
<div class="toggle18">
<h2>Balor<input type="image" src="img/speech.png" alt="play" onclick="PlayVO18(); return false;" value="Play" onmouseover="javascript:this.src='img/speech_on.png'" onmouseout="javascript:this.src='img/speech.png'"></h2>
<p>You have made a grave mistake, my friend. We will have your hand in the end, even if it takes a few lashings to strengthen your resolve... what is that?</p>
<br>
<div class="toggle">
<script type="text/javascript">
function listen(evnt, elem, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent)
{
var r = elem.attachEvent("on" + evnt, func);
return r;
}
else window.alert("I'm sorry, I'm afraid I can't do that.");
}
listen("ended", document.getElementById("bgvid"), changePage);
function changePage()
{
document.getElementById('formID').submit(); // SUBMIT FORM
}
</script>
<button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button>
<input type="hidden" id="submit" name="bgstate" value="SCENE 09">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var menu_elements = document.querySelectorAll('.toggle'),
menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++)
{
menu_elements[i].addEventListener('click', function (e)
{
var target = document.querySelector('.container>.' + e.target.classList[0]); // clicked element
Array.prototype.filter.call(target.parentNode.children, function (siblings)
{
siblings.style.display = 'none'; // hide sibling elements
});
target.style.display = 'block'; // show clicked element
});
}
function MakeChoice08()
{
document.getElementById("choice").value = "08";
}
function MakeChoice04()
{
document.getElementById("choice").value = "04";
}
</script>
</form>

You can`t use "submit" in NAME or ID attribute along with the submit() method, as it will be confused between what it considers an object referenced by the name or id and the method.
Just change <button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button> to
<button type="submit" name="click" id="somethingelse" class="buttons" value="SCENE 09">Skip</button>
and <input type="hidden" id="submit" name="bgstate" value="SCENE 09"> to
<input type="hidden" id="somethingelse2" name="bgstate" value="SCENE 09">

Related

Automatically updating images every 0.5 seconds is not happening

The images that appear when HTML opens is this:
The images that appear when script refreshIt() every 0.5 seconds activated is this:
But unfortunately the HTML keeps showing the first image, demonstrating that the script is not being activated.
What do I need to do to resolve this issue?
Full Script to test:
<html>
<head>
<style>
{
box-sizing: border-box;
}
.column {
float: left;
}
.left {
width: 360;
}
.middle {
width: 360;
}
.right {
width: 360;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<script language="JavaScript">
function refreshIt() {
if (!document.images) return;
document.images['Chart 1'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185109994&selectionId=1485567";
document.images['Chart 2'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185191931&selectionId=1222344";
document.images['Chart 3'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185192198&selectionId=47972";
setTimeout(refreshIt,500); // refresh every 0.5 secs
}
</script>
</head>
<body>
<div class="row">
<div class="column left">
<form action="" method="post" id="url-setter">
<input type="text" name="url" id="url" />
<button type="submit" name="submit">Radar 1</button>
</form>
<iframe id="the-frame" width="347" height="282" src=""></iframe>
<script type="text/javascript">
(function () {
"use strict";
var url_setter = document.getElementById('url-setter'), url = document.getElementById('url'), the_iframe = document.getElementById('the-frame');
url_setter.onsubmit = function (event) {
event.preventDefault();
the_iframe.src = url.value;
};
}());
</script>
<form method="post" target="imgChart1">
<input type="submit" value="Chart 1" />
<input type="text" id="ChartBar1" name="ChartBar1" style="width: 286px;"><br>
</form>
<img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 1">
</div>
<div class="column middle">
<form action="" method="post" id="url-setter2">
<input type="text" name="url2" id="url2" />
<button type="submit" name="submit">Radar 2</button>
</form>
<iframe id="the-frame2" width="347" height="282" src=""></iframe>
<script type="text/javascript">
(function () {
"use strict";
var url_setter = document.getElementById('url-setter2'), url = document.getElementById('url2'), the_iframe = document.getElementById('the-frame2');
url_setter.onsubmit = function (event) {
event.preventDefault();
the_iframe.src = url2.value;
};
}());
</script>
<form method="post" target="imgChart2">
<input type="submit" value="Chart 2" />
<input type="text" id="ChartBar2" name="ChartBar2" style="width: 286px;"><br>
</form>
<img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 2">
</div>
<div class="column right">
<form action="" method="post" id="url-setter3">
<input type="text" name="url3" id="url3" />
<button type="submit" name="submit">Radar 3</button>
</form>
<iframe id="the-frame3" width="347" height="282" src=""></iframe>
<script type="text/javascript">
(function () {
"use strict";
var url_setter = document.getElementById('url-setter3'), url = document.getElementById('url3'), the_iframe = document.getElementById('the-frame3');
url_setter.onsubmit = function (event) {
event.preventDefault();
the_iframe.src = url3.value;
};
}());
</script>
<form method="post" target="imgChart3">
<input type="submit" value="Chart 3" />
<input type="text" id="ChartBar3" name="ChartBar3" style="width: 286px;"><br>
</form>
<img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 3">
</div>
</div>
</body>
</html>

What you're looking for is setInterval() which will run continuously until it is canceled with clearInterval(). Rather than body onload, use the window.addEventListener method. It helps separate logic from presentation and is best practices.
let intervalID
window.addEventListener('DOMContentLoaded', () => {
intervalID = setInterval(refreshIt, 500); // refresh every 0.5 secs
})
function refreshIt() {
if (!document.images) return;
// if want to stop the interval from repeating
// if (!document.images) clearInterval(intervalID)
document.images['Chart 1'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185109994&selectionId=1485567";
document.images['Chart 2'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185191931&selectionId=1222344";
document.images['Chart 3'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185192198&selectionId=47972";
}

Button when clicked, the expected result is not achieved

When I click the button:
<button class="button" style="width: 352px;" onclick="limpartexto1()">Limpar Texto 1</button>
Circled in red, in theory it should clear the texts written in the text bars and press the Radar 1 button. However, when I click on the button, nothing happens.
Error indicated in dev tools by Google Chrome:
I'd like some help figuring out why this is happening, I can't find the error.
<div class="column left">
<form action="" method="post" id="url-setter1">
<button class="button" id="botaoradar1" onclick="radarzinho1()">Radar 1</button>
<input type="text" name="url1" id="url1" style="width: 283px;" />
<iframe id="the-frame1" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho1() {
"use strict";
var url_setter = document.getElementById('url-setter1'), url = document.getElementById('url1'), the_iframe = document.getElementById('the-frame1');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url1").value;
let value1 = link.split("OB_EV")[1];
value1 = value1.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value1;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart1">
<input class="button" type="submit" value="Chart 1" />
<input type="text" id="ChartBar1" name="ChartBar1" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 1"/>
<p></p>
<form action="" method="post" id="ClearText1">
<button class="button" style="width: 352px;" onclick="limpartexto1()">Limpar Texto 1</button>
</form>
<script type="text/javascript">
function limpartexto1() {
var btn = document.getElementById('ClearText1');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar1').value="";
document.getElementById('url1').value="";
document.getElementById('botaoradar1').click();};
}
</script>
</div>
Note: I'll leave the complete project script to make it easier for anyone who can help me:
<html>
<head>
<style>
{
box-sizing: border-box;
}
.column {
float: left;
width: 355;
}
.left {
}
.middle {
}
.middle2 {
}
.right {
}
.row:after {
content: "";
display: table;
clear: both;
}
.button {
background-color: #33ccff;
color: black;
font-weight: bold;
}
body {
overflow: hidden;
}
</style>
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
<script language="JavaScript">
let intervalID
window.addEventListener('DOMContentLoaded', () => {
intervalID = setInterval(refreshIt, 500); // refresh every 0.5 secs
})
function refreshIt() {
if (!document.images) return;
// if want to stop the interval from repeating
// if (!document.images) clearInterval(intervalID)
document.images['Chart 1'].src = ChartBar1.value;
document.images['Chart 2'].src = ChartBar2.value;
document.images['Chart 3'].src = ChartBar3.value;
document.images['Chart 4'].src = ChartBar4.value;
}
</script>
</head>
<body style="background-color:black;">
<div class="row">
<div class="column left">
<form action="" method="post" id="url-setter1">
<button class="button" id="botaoradar1" onclick="radarzinho1()">Radar 1</button>
<input type="text" name="url1" id="url1" style="width: 283px;" />
<iframe id="the-frame1" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho1() {
"use strict";
var url_setter = document.getElementById('url-setter1'), url = document.getElementById('url1'), the_iframe = document.getElementById('the-frame1');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url1").value;
let value1 = link.split("OB_EV")[1];
value1 = value1.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value1;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart1">
<input class="button" type="submit" value="Chart 1" />
<input type="text" id="ChartBar1" name="ChartBar1" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 1"/>
<p></p>
<form action="" method="post" id="ClearText1">
<button class="button" style="width: 352px;" onclick="limpartexto1()">Limpar Texto 1</button>
</form>
<script type="text/javascript">
function limpartexto1() {
var btn = document.getElementById('ClearText1');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar1').value="";
document.getElementById('url1').value="";
document.getElementById('botaoradar1').click();};
}
</script>
</div>
<div class="column middle">
<form action="" method="post" id="url-setter2">
<button class="button" id="botaoradar2" onclick="radarzinho2()">Radar 2</button>
<input type="text" name="url2" id="url2" style="width: 283px;" />
<iframe id="the-frame2" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho2() {
"use strict";
var url_setter = document.getElementById('url-setter2'), url = document.getElementById('url2'), the_iframe = document.getElementById('the-frame2');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url2").value;
let value2 = link.split("OB_EV")[1];
value2 = value2.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value2;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart2">
<input class="button" type="submit" value="Chart 2" />
<input type="text" id="ChartBar2" name="ChartBar2" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 2"/>
<p></p>
<form action="" method="post" id="ClearText2">
<button class="button" style="width: 352px;" onclick="limpartexto2()">Limpar Texto 2</button>
</form>
<script type="text/javascript">
function limpartexto2() {
var btn = document.getElementById('ClearText2');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar2').value="";
document.getElementById('url2').value="";
document.getElementById('botaoradar2').click();};
}
</script>
</div>
<div class="column middle2">
<form action="" method="post" id="url-setter3">
<button class="button" id="botaoradar3" onclick="radarzinho3()">Radar 3</button>
<input type="text" name="url3" id="url3" style="width: 283px;" />
<iframe id="the-frame3" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho3() {
"use strict";
var url_setter = document.getElementById('url-setter3'), url = document.getElementById('url3'), the_iframe = document.getElementById('the-frame3');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url3").value;
let value3 = link.split("OB_EV")[1];
value3 = value3.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value3;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart3">
<input class="button" type="submit" value="Chart 3" />
<input type="text" id="ChartBar3" name="ChartBar3" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 3"/>
<p></p>
<form action="" method="post" id="ClearText3">
<button class="button" style="width: 352px;" onclick="limpartexto3()">Limpar Texto 3</button>
</form>
<script type="text/javascript">
function limpartexto3() {
var btn = document.getElementById('ClearText3');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar3').value="";
document.getElementById('url3').value="";
document.getElementById('botaoradar3').click();};
}
</script>
</div>
<div class="column right">
<form action="" method="post" id="url-setter4">
<button class="button" id="botaoradar4" onclick="radarzinho4()">Radar 4</button>
<input type="text" name="url4" id="url4" style="width: 283px;" />
<iframe id="the-frame4" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho4() {
"use strict";
var url_setter = document.getElementById('url-setter4'), url = document.getElementById('url4'), the_iframe = document.getElementById('the-frame4');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url4").value;
let value4 = link.split("OB_EV")[1];
value4 = value4.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value4;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart4">
<input class="button" type="submit" value="Chart 4" />
<input type="text" id="ChartBar4" name="ChartBar4" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 4"/>
<p></p>
<form action="" method="post" id="ClearText4">
<button class="button" style="width: 352px;" onclick="limpartexto4()">Limpar Texto 4</button>
</form>
<script type="text/javascript">
function limpartexto4() {
var btn = document.getElementById('ClearText4');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar4').value="";
document.getElementById('url4').value="";
document.getElementById('botaoradar4').click();};
}
</script>
</div>
</div>
</body>
</html>

Try changing this function code:
function limpartexto3() {
document.getElementById('ChartBar3').value="";
document.getElementById('url3').value="";
document.getElementById('botaoradar3').click();};
}
Instead of attaching one more event handler you should simply call your actions on click of this button.
One more observation is the use of IIFE. These functions are created in a separate scope and you cannot use them as your event handlers.
Use this:
function radarzinho1() {
"use strict";
var url_setter = document.getElementById('url-setter1'), url = document.getElementById('url1'), the_iframe = document.getElementById('the-frame1');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url1").value;
let value1 = link.split("OB_EV")[1];
value1 = value1.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value1;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}
Suggest you to start small and then add these complex functionalities.
Codepen

Javascript show div does not work when I press button

I have this simple code, and i can't understand why it is not working.
<div>
<input type="button" class="button" value="Add A Site" onclick="Div();" />
</div>
<script type="text/javascript">
function Div() {
var E = document.getElementsByClassName('Form');
if (E.style.display == 'none') {
E.style.display = 'block';
this.value = "Close";
} else {
S.style.display = 'none';
this.value = "Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>

user Form which you are trying to access is inside div.form so you have to access that like below....I tested this, its working. the content in Form is displaying
<input type="button" class="button" value="Add A Site" onclick="Div();" />
<script type="text/javascript">
function Div() {
var E= document.getElementsByClassName('Form')[0];
if (E.style.display=='none'){
E.style.display='block';
this.value="Close";
}else {
S.style.display='none';
this.value="Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1></div>

<script>
function Div() {
var E = document.getElementsByClassName('Form')[0];
if (E.style.display==='none') {
E.style.display='block';
this.value=Close;
} else {
E.style.display = 'none';
this.value = 'Add A Site';
}
}
</script>
<input type="button" class="button" value="Add A Site" onclick="Div()" />
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
This should work for you.

Submitting form depend of color clicked

i have form that's announcing user for error, warning or new content on my site. I have three buttons on class ann-right and each button have its color. When i click the button, the button input on class ann-left changed to color were clicked. What i want to ask is, how do i submit the form depend of color selected. Red is for "Error announcement", Green is for "Warning announcement" and Blue is for "New announcement". Red = #D91E18
Green = #3FC380
Blue = #5BBBFF
<div class="ann-left">
<form method="post" id="ann">
<input id="announce-text" type="text" name="" placeholder="What's new?"></input>
<input id="submit-post" type="button" name="" onsubmit="submitform();" value="Post"></input>
</form>
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"></button>
<button id="green" onclick="color2()" class="tooltip color"title="Warning!" ></button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"></button>
</div>
<script>
function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
sessionStorage.setItem('col1', "#D91E18");
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
sessionStorage.setItem('col2', "#3FC380");
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
sessionStorage.setItem('col3', "#5BBBFF");
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
function submitform() {
}
</script>

You can use one input hidden to pass the type of annoncement to your form.
Then you submit it normally.
<div class="ann-left">
<form method="post" action="announcement_post.php" id="ann">
<input type="text" name="announcement_description" id="announce-text" placeholder="What's new?">
<input type="hidden" name="announcement_type" id="announcement_type">
<input id="submit-post" type="submit" name="" value="Post">
</form>
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"> </button>
<button id="green" onclick="color2()" class="tooltip color"title="Warning!" > </button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"> </button>
</div>
<script>
function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
document.getElementById("announcement_type").value="Error announcement";
sessionStorage.setItem('col1', "#D91E18");
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
document.getElementById("announcement_type").value="Warning announcement";
sessionStorage.setItem('col2', "#3FC380");
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
document.getElementById("announcement_type").value="New announcement";
sessionStorage.setItem('col3', "#5BBBFF");
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
</script>
announcement_post.php:
<?php
if(!isset($_POST["announcement_type"])) die("Post was not sent.");
echo $_POST["announcement_type"];
echo '<br>';
echo $_POST["announcement_description"];

There are a couple of issues here. First you are not practicing DRY (Dont Repeat Yourself), which is very important when creating functions. Create one function that handles your setColor function and send the selected colors on the actual buttons clicked. Once thats done, you can focus on "submitting your form". When you submit a form it normally expects you to have a buttom with type submit. Since you dont have that, it will not submit the form. What I would do is place your onsubmit() on the form element as such:
<div class="ann-left">
<form method="post" id="ann" onsubmit="return submitform(this);">
<input id="hidden-input" type="hidden" name="color_selected" value="">
<input id="announce-text" type="text" name="" placeholder="What's new?">
<input id="submit-post" type="submit" name="" value="Post">
</form>
</div>
<div class="ann-right">
<button id="red" onclick="setColor('#D91E18')" class="tooltip color" title="Error!"></button>
<button id="green" onclick="setColor('#3FC380')" class="tooltip color"title="Warning!" ></button>
<button id="blue" onclick="setColor('#5BBBFF')" class="tooltip color" title="New!"></button>
</div>
<script>
var $btn = document.getElementById("submit-post");
var $hidden = document.getElementById("hidden-input");
function setColor(color) {
$btn.style.backgroundColor = color;
$hidden.value = color;
}
function submitform(form) {
alert(form.color_selected.value);
return false;
}
</script>

function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
sessionStorage.setItem('col1', "#D91E18");
document.getElementById("hidden_field").value = 'error';
submitform();
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
sessionStorage.setItem('col2', "#3FC380");
document.getElementById("hidden_field").value = 'warning';
submitform();
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
sessionStorage.setItem('col3', "#5BBBFF");
document.getElementById("hidden_field").value = 'new';
submitform();
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
function submitform() {
var form = document.getElementById("ann");
var data = new FormData(form);
console.log(data);
//var req = new XMLHttpRequest();
//eq.send(data);
form.submit();
}
#red {
background: #D91E18;
}
#green {
background: #3fc380;
}
#blue {
background: #5bbbff;
}
<form method="post" id="ann">
<div class="ann-left">
<input id="announce-text" type="text" name="" placeholder="What's new?" />
<input id="submit-post" type="button" name="" onsubmit="submitform();" value="Post" />
<input type="hidden" id="hidden_field" />
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"></button>
<button id="green" onclick="color2()" class="tooltip color" title="Warning!"></button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"></button>
</div>
</form>

How can i achieve the these with Javascript / Jquery?

I want when i clicked on the Question button on the first pic, the form in the second pic to appear and the button to be hidden and when i click on the (X) on the top left of the form on the second pic to close the form and the Question button to appear again. How can i achieve that using Javascript or Jquery or any possible method.
<script type="text/javascript">
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
});
</script>
<div class="container">
<div id="myDiv">
<button type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br>
<span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br>
<span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer"><br>
</form>
</div>
<input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton">
</div>

You almost got it, just need to make a few changes:
Add an Id for the xButton
<button type="button" class="close" data-dismiss="myDiv" aria-label="Close" id="xButton"><span aria-hidden="true">×</span>
</button>
Remove onclick in the html Question button
<input id="info" type="button" value="QUESTION?" class="switchbuton">
Amd add a hanlder for the X button
$(function(){
var button = document.getElementById("info");
var xButton = document.getElementById("xButton");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
//hidding Question button
button.style.visibility = "hidden";
}
function hide() {
myDiv.style.visibility = "hidden";
//showing Question button
button.style.visibility = "visible";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
//handler for the X button
xButton.addEventListener("click", hide, false);
});

Like Carorus said, you're almost there! Their example uses your code and it's probably best that you check that out and understand it.
If you are looking for a jquery solution I threw this together very quickly, I hope it's what you are looking for.
http://codepen.io/anon/pen/pJJKjZ?editors=101
$("#info").click(function(){
show()
});
$(".close").click(function(){
hide();
});
var show = function(){
$("#myDiv").css('visibility', 'visible');
$("#info").css('visibility','hidden');
}
var hide = function(){
$("#myDiv").css('visibility', 'hidden');
$("#info").css('visibility','visible');
}

Your already using JQuery, so you can handle both buttons with 1 line of code...
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
button.style.visibility = "hidden";
}
function hide() {
myDiv.style.visibility = "hidden";
button.style.visibility = "visible";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
$('.button').click(function() { toggle(); });
});
And update your HTML to include a secondary class on your buttons, and remove the onClick attribute...
<div class="container">
<div id="myDiv">
<button type="button" class="close button" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br>
<span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br>
<span class="box3">Telephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer"><br>
</form>
</div>
<input id="info" type="button" value="QUESTION?" class="switchbuton button">
</div>

In jQuery you can do it like below. You could even shorten down the code, using classes to show/hide a bigger scope, but this is fine.
function showForm() {
$('#myform').show();
$('#myClose').show();
$("#info").hide();
}
function hideForm() {
$('#myform').hide();
$('#myClose').hide();
$("#info").show();
}
$(function() {
$('#info').click(function() {
showForm();
});
$('#myClose').click(function() {
hideForm();
});
hideForm();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div id="myDiv">
<button id="myClose" type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p id="q">QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" id="myform" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span>
<input type="text" name="extensionField_Title" id="box1">
<br>
<span class="box2">Name</span>
<input type="text" name="extensionField_Name" id="box2">
<br>
<span class="box3">Теlephone</span>
<input type="text" name="extensionField_PhoneNumber" id="box3">
<br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo">
<br>
<option value="Chat_Csq23"></option>
</select>
<br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer">
<br>
</form>
</div>
<input id="info" type="button" value="QUESTION?" class="switchbuton">
</div>

Html Code:
<div class="container">
<div id="myDiv">
<button type="button" id="hide" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span> <input type="text" name="extensionField_Title" id="box1"><br/><br/>
<span class="box2">Name</span> <input type="text" name="extensionField_Name" id="box2"><br/><br/>
<span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br/><br/>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br/><br/>
<input type="submit" value="SUBMIT" id="boxbuton"><br/>
<input type="hidden" name="author" value="Customer"><br/>
</form>
</div>
<input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton">
</div>
js Code
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
$("#hide").click(function(){
myDiv.style.visibility = "hidden";
button.style.visibility = "visible";
});
hide();
button.addEventListener("click", toggle, false);
});

We Keep Coding

JavaScript is the programming language of the Web.

Submit a form when a video is ended - javascript

Related

Automatically updating images every 0.5 seconds is not happening

Button when clicked, the expected result is not achieved

Javascript show div does not work when I press button

Submitting form depend of color clicked

How can i achieve the these with Javascript / Jquery?

Categories

Resources