Estou tendo um problema com esse trabalho e gostaria de uma ajuda, gostaria de salvar o que foi escrito sem recarregar a pagina após clicar no botão "salvar".
desculpa se isso ficou um pouco bagunçado, primeira vez usando isso.
conteudo_do_site.html(é só uma pagina vazia mas é importante ter ela!)
script.js
/********************************Mudança de pagina*****************************************/
function tableshowhide(a, b, c, d) { /**/
len = menu.childElementCount; /**/
closeall(); /**/
for (i = 0; 1 < len; i++) { /**/
menu.children[i].onclick = function() { /**/
closeall(); /**/
all.children[this.id].style.display = "block"; /**/
} /**/
} /**/
function closeall() { /**/
for (i = 0; i < all.childElementCount; i++) { /**/
all.children[i].style.display = "none" /**/
} /**/
} /**/
menu.children[c].click(); /**/
} /**/
tableshowhide("menu", "all", "pag1", "pag2") /**/
/***************************fim da Mudança de pagina***************************************/
style.css
* {
top: 0px;
padding: 0px;
}
body {
margin-top: 0px;
margin-left: 0px;
float: left;
background-color: #696969;
animation: anim 6s infinite;
}
@keyframes anim {
0% {
background: #696969
}
30% {
background: #808080
}
60% {
background: #A9A9A9
}
80% {
background: #808080
}
88% {
background: #BDBDBD
}
100% {
background: #696969
}
}
.Pesquisa {
position: absolute;
margin-top: 160px;
margin-left: 5px;
width: 49px;
height: 95px;
background-color: #808080;
border-radius: 7px;
/*----inicio do movendo os botões de paginas----*/
bottom: 0;
transition: bottom 0.6s ease;
/*----final do movendo os botões de paginas----*/
}
.mini-bloco {
margin-top: 4px;
margin-left: 2.5px;
width: 43px;
height: 42px;
background-color: #BDBDBD;
border-radius: 7px;
border: none;
color: white;
font-size: 16px;
}
/*********************************conteudo1************************************/
.conteudo1 {
/**/
position: fixed;
/**/
margin-top: 5px;
/**/
margin-left: 100px;
/**/
background-color: #BDBDBD;
/**/
overflow: auto;
/**/
width: 1200px;
/**/
height: 618px;
/**/
border-radius: 7px;
/**/
border: 2px;
/**/
}
/**/
/*********************************conteudo1************************************/
/*********************************conteudo2************************************/
.conteudo2 {
/**/
position: fixed;
/**/
margin-top: 5px;
/**/
margin-left: 100px;
/**/
background-color: #BDBDBD;
/**/
overflow: auto;
/**/
width: 1200px;
/**/
height: 618px;
/**/
border-radius: 7px;
/**/
border: 2px;
/**/
}
/**/
/*********************************conteudo2************************************/
.oi {
width: 100px;
height: 20px;
border-radius: 5px;
border: 0px;
}
index.php
<?php
ini_set('default_charset','UTF-8');
?>
<?php
if(!empty ( $_POST ['conteudo'])){
file_put_contents("conteudo_do_site.html", $_POST ['conteudo']);
}
if ( !empty( $_FILES['arquivo'] ) ){
move_uploaded_file( $_FILES["arquivo"]["tmp_name"], basename($_FILES["arquivo"]["name"]) );
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Olaaaaaaas</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script src="https://cdn.ckeditor.com/4.11.4/standard/ckeditor.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="Pesquisa">
<nav id="menu">
<button id="pag1" class="mini-bloco">P1</button>
<button id="pag2" class="mini-bloco">P2</button>
</nav>
</div>
<!--*****************************Conteudo_das_paginas***********************************-->
<div id="all">
<!-------------------------------------------------------------------------------->
<div id="pag1" class="conteudo1"><br><br><br><br>
<form action="" method="post" style="border-radius: 10px;">
<textarea name="conteudo">
<?php echo file_get_contents("conteudo_do_site.html"); ?><!--Salva o que voce escreveu-->
</textarea><br>
<a href="conteudo_do_site.html"><button class="oi" >Salvar</button></a>
</form>
<script>
CKEDITOR.replace('conteudo');
</script>
<br>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="arquivo" id="arquivo">
<input class="oi" value="Upload Image">
</form>
</div>
<!-------------------------------------------------------------------------------->
<div id="pag2" class="conteudo2">
<div class="imagem">
<?php echo file_get_contents("conteudo_do_site.html"); ?>
</div>
</div>
</div>
<!--*************************fim da Conteudo_das_paginas********************************-->
<script src="script.js"></script>
</body>
</html>
submit
, é esperado que ele submeta o formulário quando pressionado e isso faz com que a página seja "recarregada", visto que está submetendo o formulário para a própria página. O comportamento que descreveu condiz com o código que está utilizando, então sua pergunta não está suficientemente clara. Busque editar e esclarecer com mais detalhes o que está fazendo e elabore um Exemplo Mínimo, Completo e Verificável demonstrando o problema. Aproveite também para fazer o tour, ler o guia de Como perguntar e acessar a central de ajuda.