为什么我需要在javascript函数工作之前按2次提交按钮?

时间:2015-01-09 23:16:41

标签: javascript php codeigniter

这是我的代码(我使用codeigniter作为我的框架,这是视图)。 在单击提交按钮后,此代码应将名为contains的内容写入名为newfile.php的文件中。但是我需要在将数据写入newfile.php之前单击该按钮2次。请帮忙。我不知道我的代码有什么问题。

      <!DOCTYPE html>

         <html lang="en">
           <head>
             <meta charset="utf-8">
             <title>Online Lodging Locator</title>
          </head>

        <script>

             function test(){

           var x = document.getElementById('contain').innerHTML;

            alert(document.my_form.my_var.value=x);

        <?php
          $content = $_POST["my_var"];
          $myfile = fopen("newfile.php", "w") or die("Unable to open file!");

          fwrite($myfile, $content);

          fclose($myfile);
           ?> 

           }
            </script>   

         <body>

           <form name="my_form" method="post">
            <input type="hidden" name="my_var">
            <div id="contain">

            <h1>Online Lodging Locator</h1>


            <table cellspacing="0" cellpadding="1" border="1">
         <tr>
            <td>COL 1 - ROW 1222<br />COLSPAN 3</td>
            <td>COL 2 - ROW 1</td>
            <td>COL 3 - ROW 1</td>
         </tr>
         <tr>
          <td rowspan="2">COL 2 - ROW 2 - COLSPAN 2<br /></td>
          <td>COL 3 - ROW 2</td>
         </tr>
         <tr>
          <td>COL 3 - ROW 3</td>
         </tr>

         </table>

          </div>
         <button type="submit" class="btn btn-default" name="SEARCH" id="SEARCH" onclick="test()">WRITE</button>
           </form>

         </body>
         </html>

3 个答案:

答案 0 :(得分:1)

解释为什么需要点击按钮两次:

@Royalty是正确的。 php首先运行。 php在你的脚本块中。它返回错误,因为$_POST['my_var']undefined。这是脚本块中的echoed,因为error导致您的页面暂停脚本。点击submit时。表单已提交(实际上页面已重新加载),此时post var将被填充。因此,PHP中的错误意味着没有任何内容回显到脚本块中,这意味着浏览器不会引发任何错误。现在点击提交执行函数test

但要跟进评论。您的脚本实际上是按事件运行的如果您要写入文件,请使用表单上的action属性或执行ajax来电。

表单操作

<form name="my_form" action="file.php" method="post">
   <input type="hidden" name="my_var">
   <button type="submit" class="btn btn-default" name="SEARCH" id="SEARCH" onclick="test()">WRITE</button>
</form>

<script>
   function test(e)
   {
       e.preventDefault();
       document.my_form.my_var.value = document.getElementById('contain').innerHTML;
       document.getElementsByName("my_form")[0].submit(); //submit the form.
   }

</script>

<强> AJAX

function sendAjax(e) {
    e.preventDefault(); //prevent the default action of the form.
    var xmlhttp;
    xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
           if(xmlhttp.status == 200){
               //request is complete and loaded
               //do something with the response.
           }
           else if(xmlhttp.status == 400) {
              alert('There was an error 400')
           }
           else {
               alert('something else other than 200 was returned')
           }
        }
    }

    xmlhttp.open("POST", "file.php", true); //true means asynchronously.
    xmlhttp.send("content="+document.getElementById('contain').innerHTML);
}

HTML

    <button type="submit" class="btn btn-default" name="SEARCH" id="SEARCH" onclick="sendAjax()">WRITE</button>

file.php应该替换为运行的服务器上的php文件:

 <?php
      $content = $_POST["my_var"];
      $myfile = fopen("newfile.php", "w") or die("Unable to open file!");

      fwrite($myfile, $content);

      fclose($myfile);
 ?> 

答案 1 :(得分:0)

您需要将数据发送到控制器。 你也可以发送到任何php文件,但你已经有了CodeIgniter。

JS

var base_url = '<?=base_url()?>';
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)  {
        document.getElementById('contain').innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("POST", base_url+"path/to/controller",true);
    xmlhttp.send();

使用jQuery,您可以更轻松地控制数据类型:

var content = $('#contain').html();
var base_url = '<?=base_url()?>';
$.ajax({
  type: "POST",
  contentType: 'html',
  url: base_url+"path/to/controller", //"path/to/file.php"
  data: content
});

PHP

$myfile = fopen("newfile.php", "w") or die("Unable to open file!");

if(isset($_POST['data'] {
    $content = $_POST['data'];
} else {
    $content = 'No data';
}
echo $content;
fwrite($myfile, $content);
fclose($myfile);

答案 2 :(得分:0)

我解决了。我只需要在我的php代码中添加if(isset($ _ POST ['my_var'] {)){}。我不需要两次点击提交按钮。