0

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>

1
  • 1
    Se o botão é do tipo 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.
    – Woss
    Commented 24/04/2019 às 22:41

1 Resposta 1

1

Você precisará fazer um ajax request a um script que salve o content.

O seu php ficaria assim:

save.php:

<?php
   $data = $_POST['content'];
   file_put_content('conteudo_do_site', $data);
   echo 'salvo!';
?>

JS (Fiz com jQuery):

 $.ajax({
        type: "POST",
        url: "save.php",
        data: {'content': $("#content").val()},
        success: function (data) {
            alert(data);
        }
    });

HTML:

 <form action="javascript:sendForm();" method="post" style="border-radius: 10px;">
            <textarea id='content' name="conteudo">
                    <?php  echo file_get_contents("conteudo_do_site.html"); ?><!--Salva o que voce escreveu-->
                </textarea><br>
           <button type='submit' class="oi" >Salvar</button>
          </form>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .