单击提交按钮后,PHP 文件和 Javascript 函数未捕获 Html div id 以显示隐藏的 div

Posted

技术标签:

【中文标题】单击提交按钮后,PHP 文件和 Javascript 函数未捕获 Html div id 以显示隐藏的 div【英文标题】:PHP file and Javascript function doesn't capture Html div id to show hidden div after clicking submit button 【发布时间】:2022-01-11 19:12:00 【问题描述】:

我在index.php 中有这个 div

 <div class="class" id="ScoreResult" style="display:none;">

我在seosystem/controller/youtubedata.php 中有这个功能,我尝试使用 Js 它不起作用所以我希望当用户提交按钮时它显示 div 以显示数据

if($_SERVER['REQUEST_METHOD'] == "GET" && isset($_GET['url'])  && isset($_GET['submit']))

        /*  echo  "</br >" ; 
        echo   $input_Url_data   .  "Button clicked" ;  */    
        $id_position = strstr($input_Url_data,"=");
        $id_position = trim($id_position, "=" );
         // the alert works normally
        echo '<script> alert("heelo"); </script>';

        // this part that trying to show the div doesn't work
        echo '<script type="text/javascript">
        function showtable1()
        
         
         document.getElementById( "ScoreResult").style.display = "block";
     
            
         
                showtable1(); 
            </script>'
        ;
            
        echo "<style type=\"text/css\"> #ScoreResult display:block;</style>";
      
            
        

  

这是输入的形式和按钮,我不确定我应该进行操作index.php 还是seosystem/controller/youtubedata.php

<form class="d-flex justify-content-center " method="GET" action="index.php">
  <div class="input-group ">
    <input type="text" class="form-control" name="url" placeholder="Enter Youtube Video URL" aria-label="Example text with button addon" aria-describedby="button-addon1">
    <input class="btn" value="Analyze" name="submit" type="submit" id="button-addon1"></input>
  </div>
</form>

【问题讨论】:

表单元素是一个链接,提交表单会导航到表单的action 属性指向的 URL(或该 URL 返回的任何内容)。如果未定义action,则使用页面的当前位置。 @Teemu 表单正在运行,功能也在运行,但是这段用于显示 div 的特定代码根本不起作用 我什至尝试过 index.php 本身现在也能正常工作 表单中的action属性指向index.phpyoutubedata.php与问题有什么关系? 【参考方案1】:

将此代码添加到您的 index.php 文件中。这就是您有选择地显示和隐藏 ScoreResult div 的方式。希望它对你有用。

<?php
// This part should be added to the php section at the top of the page

// Start by setting the $url_set status to 0
$url_set = 0;
if (isset($_GET['url'])) 
    // Now we set the $url_set status to 1
    $url_set = 1;


?>

<div class="class" id="ScoreResult"></div>
<!--This section links the $url_set status to the code-->
<input type="hidden" value="<?php echo $url_set ?>" id="url-status">

<!--Replace your JS section with this-->
<script>
function showtable1() 
    const
        url_status = document.querySelector('#url-status').value,
        dsp_status = url_status == 1 ? 'block' : 'none'

    document.getElementById("ScoreResult").style.display = dsp_status;


showtable1();
</script>

【讨论】:

我特别喜欢这个想法,我是类中另一个文件中的 php 代码,但是问题是代码排列,当我在上面的 php 脚本中显示它时它会下降并再次隐藏它跨度> 现在可以用了吗? 是的,它正在工作

以上是关于单击提交按钮后,PHP 文件和 Javascript 函数未捕获 Html div id 以显示隐藏的 div的主要内容,如果未能解决你的问题,请参考以下文章

使用取消按钮单击提交按钮后阻止表单提交[重复]

求急:我想做一个AJAX的按钮提交,单击按钮后弹出对话框:正在提交,按钮变成灰色,

在 jquery 验证后提交表单 - 需要通过单击按钮来发布数据

单击html中的提交并运行php代码[关闭]

单击提交按钮时如何传递单击按钮的值?

从javascript函数创建的表单提交FormData到php