everything I’m using on this site HTML + CSS + JS + PHP

Asked

Viewed 66 times

0

I am having a problem with this work and would like a help, I would like to save what was written without reloading the page after clicking on "save".

sorry if it got a little messy, first time using it.

conteudo_do_site.html(is only an empty page but it is important to have it!)

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>

php javascript html css
  • 1

    If the button is of the type submit, It is expected to submit the form when pressed and this causes the page to be "reloaded" since it is submitting the form to the page itself. The behavior you described matches the code you’re using, so your question isn’t clear enough. Search [Dit] and clarify in more detail what you are doing and elaborate a [mcve] demonstrating the problem. Also take the opportunity to do the [tour], read the guide of [Ask] and access [help].

1 answer

1


You will need to make an ajax request to a script that saves the content.

Your php would look like this:

save php.:

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

JS (I made with 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>

Browser other questions tagged php javascript html css

You are not signed in. Login or sign up in order to post.