bootstrap form duplicated content

bootstrap form duplicated content - javascript

I have page structure on desktop like this:
<form>
___________________________________________________
| |
| [] checkbox |
| <div>TITLE</div> |
| <div>SUBTITLE</div> |
|_________________________________________________|
</form>
On mobile i want to have like this :
<form>
____________________
| |
| <div></div> |
| <div></div> |
| []checkbox |
|__________________|
</form>
code :
<form>
<div class="row">
<div class="col-sm-12 text-right visible-lg">
<input type="checkbox">
</div>
<div class="col-sm-12 text-center">
TITLE
</div>
<div class="col-sm-12 text-center">
SUBTITLE
</div>
<div class="col-sm-12 text-right hidden-lg">
<input type="checkbox">
</div>
</div>
</form>
tried to play with .visible-lg .hidden-lg and etc. but problem is that checkbox is same (cloned - same name, id, class) and when submitting form they are confusing all the logic. If first I checked but second not, in post I still get that it's checked.
What should i do in this case ?
Checkeboxes are toggles (bootstrapetoggle.com)

Use flexbox. You can set the order of any element inside of it. In this case, the default is order: 1; (and ties are solved by real order), and by setting the checkbox to order: 2; it shifts down under the other two.
#media (max-width: 480px) {
.row {
display: flex;
flex-direction: column;
}
#withcheckbox {
order: 2;
text-align: center;
}
}
JSFiddle

keeping you approach, the easiest way to solve is to enclose the fields in 2 different forms, with the same action. Something like:
<form action="/myaction"> <!-- sm-hidden -->
[] check
<div></div>
<div></div>
<submit />
</form>
<form action="/myaction"> <!-- lg-hidden -->
<div></div>
<div></div>
[] check
<submit />
</form>
the id needs to be different, but all you need on server side is the name attribute, not the id
-- EDIT --
if you don't mind use javascript to compose the page, you can use an html template:
function useTemplate(id) {
var myTemplate = document.getElementById('myTemplate'),
normalContent = document.getElementById(id),
clonedTemplate = myTemplate.content.cloneNode(true);
normalContent.appendChild(clonedTemplate);
}
useTemplate('first-form');useTemplate('second-form');
<!-- Template Content -->
<template id="myTemplate">
<div><input /></div>
<div><input /></div>
<div><input /></div>
<div><input /></div>
</template>
<!-- Normal Content -->
<form>
<fieldset>
<input type='checkbox'/>
<div id="first-form">
</div>
</fieldset>
</form>
<form>
<fieldset>
<div id="second-form">
</div>
<input type='checkbox'/>
</fieldset>
</form>

Do something like this--
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css"></style>
</head>
<body>
<form>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8 col-xs-8">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
---------
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
+++++++++
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
checkbox[]
</div>
</div>
</form>
</body>
</html>

Related

How can i apply ordered list number to each row dynamically to bootstrap rows

I am using bootstrap grid system and wanted to add prefix number to each row which will basically shows the number to each row. list 1, 2, 3, 4. How can I achieve that?
Desired output:
1. content will appear here
2. content will appear here
3. content will appear here
4. content will appear here
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
.container.counter {
counter-reset: section;
}
.container.counter .row {
counter-increment: section;
}
.container.counter .col::before {
content: counter(section) ".";
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container counter">
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
</div>

is it possible to refresh the same content in two different html pages?

i have this code, witch is basically a click counter in javascript.
my question is, is it possible to show the "clicks" in two different pages?
My goal is to make two identical pages, but the second one is just to show the click counting, as the first one is to click and at the same time to show the counting.
i dont have much experience in programing.
all help is much apreciated :)
html page code:
<!DOCTYPE html>
<html>
<head>
<title>FCT</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/scripts.js"></script>
<script src="chama.js"></script>
</head>
<body>
<button type="button" onclick="hello()">Anterior</button>
<button type="button" onclick="bye()">Próximo</button>
<div class="barraTop"> </div>
<div class="container page">
<div class="row barraSuperior">
<div class="col-xs-1">
<img src="imagens/espamol.png" height="150" width="250">
</div>
<div class="col-xs-11" style="text-align: right;">
<p></p>
<span class="uespiTexto">Escola Secundária Padre António Martins de Oliveira</span><br>
<span class="subtitulo">Matrícula Institucional <strong>SiSU 2019</strong></span>
<!-- <img src="imagens/sisu.png" class="sisuLogo"> -->
</div>
</div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="barraTop"> </div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 ultimaSenha">
<br>
<span id="ultimaSenhaTexto">ÚLTIMA CHAMADA</span><br>
<span>Senha </span>
<span id="ultimaSenhaNumero">0000</span>
</div>
</div>
</div>
<audio id="audioChamada" src="audio/chamada.wav"></audio>
</body>
</html>
and javascript code:
var clicks = 0;
function hello() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function bye() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
};

Only if one page opens the other one*.
If you use var w=window.open() you can access the other page's document in w.document. And, from the second page, you can access the first one's in window.parent.document.
*That is with js only. If you can use a server language you could make something more complex using ajax or even sockets.

Why isn't my onclick function activating when I press the button?

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>

Jquery - Get the closest div and show

I searched here in stackoverflow but didnt find a solution for my case..
i want to do a group div who will appear or will hide if the down button is clicked...have this HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Relatorio</title>
<script src="/Scripts/jquery-1.8.2.js"></script>
</head>
<body style="border-top: solid 10px #ffffff" class="container">
<div>
<div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<input type="text" id="" name="" />
</div>
<div class="col-lg-4">
<div>
<div>
<div style="border:1px solid black;font-size:20px;overflow:auto;">
<div class="container" style="background-color:orangered;padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-12">
Relatorio 01
</div>
</div>
</div>
<div class="container" style="background-color:orangered;padding-top:5px;padding-bottom:5px;color: white">
<div class="row" style="text-align:right;">
<div class="col-sm-8">
field1
</div>
<div class="col-sm-4" style="text-align:right;">
<div id='botabrefecha'>
<i class='fa fa-angle-down'></i>
</div>
</div>
</div>
</div>
<div class="abrefecha" style="border:0px solid black;display:none">
<div class="container" style="padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-4">
field2 Group
</div>
<div class="col-sm-8" style="text-align:right;">
<input type="text" style="width:100%;" />
</div>
</div>
</div>
<div class="container" style="padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-4">
field3 Group
</div>
<div class="col-sm-8" style="text-align:right;">
<input type="text" style="width:100%;" />
</div>
</div>
</div>
</div>
<div class="container" style="padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-4">
txtCampo3
</div>
<div class="col-sm-8" style="text-align:right;">
<input type="text" style="width:100%;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and this jquery:
$(document).ready(function () {
$('#botabrefecha').on('click', function () {
var visivel = $(this).closest('div').find(".abrefecha").is(":visible");
if (visivel)
{
$(this).closest('div').find(".abrefecha").hide();
}
else
{
$(this).closest('div').find(".abrefecha").show();
}
});
});
but i dont know why he cant show or hide my div. i have tested and he returns if is visible or not...but when i try to show or hide, nothing happens...
any ideas?
Thanks!
Rafael

in your code there is only one div containing the class abrefecha so you can access that element directly. For show/hide of elements you can use jQuery's toggle function.
toggle
You can access that div directly in your click handler.
$(document).ready(function () {
$('#botabrefecha').on('click', function () {
$('.abrefecha').toggle();
});
});

show and hide span from parent div

On click of View All Descriptions, I should be able to show the following div's and change the View All Descriptions content to hide all descriptions and when clicked it again it should be able to hide the following div's and change the clickable content to "View all descriptions"
.hiddenComments {
display: none;
padding: 5px;
}
.showComments {
display: inline-block;
padding: 5px;
}
<div class="row outer-part col-md-offset-1">
<div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
<a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="hiddenComments">Sample text;</span>
</div>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="hiddenComments">sample text</span>
</div>
</div>

If you will be more specific i will be able to help you better..Meanwhile take a look at this:
$('a').click(function () {
$('a').text('Hide');
$(".hiddenComments").addClass('showComments');
$('.hiddeComments').removeClass('hideComments');
});

No css needed, no extra classes, just jquery events. Next time read about jquery documentation before ask here, it will be better for your learning. https://api.jquery.com/
$('#lnkViewAll_DRILLING').click(function() {
var $this = $(this);
var text = ($this.text() != 'Hide All Descriptions') ? 'Hide All Descriptions' : 'Show All Descriptions';
$this.text(text);
$(".comments").toggle();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="row outer-part col-md-offset-1">
<div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
<a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="comments">Sample text;</span>
</div>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="comments">sample text</span>
</div>
</div>
</div>
</body>
</html>

You can try using:
divElement.childNodes[0].style.display = "inline";//show element
divElement.childNodes[0].style.display = "none";//hide element
The first one shows the first element inside a parent element, and the second one hides it. Hope I helped!

Since you haven't really given any specific on your code, or what you've tried.. look into jQuery hide() method. Jquery Hide Documentation This will get you moving in the right direction

Develop Reference

JavaScript is the programming language of the Web.

bootstrap form duplicated content - javascript

Related

How can i apply ordered list number to each row dynamically to bootstrap rows

is it possible to refresh the same content in two different html pages?

Why isn't my onclick function activating when I press the button?

Jquery - Get the closest div and show

show and hide span from parent div

Categories

Resources