Fatal编程技术网
  • javascript/
  • 使用表单Submit-Javascript单击第一次提交后显示第二个提交按钮

使用表单Submit-Javascript单击第一次提交后显示第二个提交按钮

javascript php

使用表单Submit-Javascript单击第一次提交后显示第二个提交按钮,javascript,php,Javascript,Php,我已经在javascript中构建了一个函数来显示第二次提交，但仅在单击第一次提交之后 已编辑-这是ex.php： <form method="post" action = "ex.php"> <input type="submit" id="button" name="search" value="Search" onclick="myFunction();" > <br> <input type="submit"

我已经在javascript中构建了一个函数来显示第二次提交，但仅在单击第一次提交之后

已编辑-这是ex.php：

<form method="post" action = "ex.php">
    <input type="submit" id="button" name="search" value="Search" 
    onclick="myFunction();" >
    <br>
     <input type="submit" name="search_close"  id="submit"  style="display: 
     none;" value="Find close results">
    </form>

    <?php 
    if(isset($_POST['search']))
    {
       echo "first search";
    }
     else if(isset($_POST['search_close']))
    {
       echo "second search";
    }
    else {
       echo "nothing";
    }
    ?>
    <script type="text/javascript">
    inputSubmit = document.getElementById("submit");     
    function myFunction(){
       inputSubmit.style.display = "block";    };
    </script>
这段代码不符合我的要求。为什么?

更新-为什么按钮查找关闭结果在一秒钟后消失

<?php
session_start();
$db=mysqli_connect("localhost","root","","travelersdb");

if(@$_SESSION["username"]){
    ?>
<?php
// function to connect and execute the query
function filterTable($query)
{
    $connect=mysqli_connect("localhost","root","","travelersdb");
    $filter_Result = mysqli_query($connect, $query) or die(mysqli_error($connect));
    return $filter_Result;
}

$submit_value = 0;
if(isset($_POST['search']))
{

    $Destination = $_POST['Destination'];
    $TypeOfTravel = $_POST['TypeOfTravel'];
    $Age= $_POST['Age'];
    $email = $_POST['email'];
    $topic_name =  $_POST['topic_name'];
    $StartingPoint =  $_POST['StartingPoint'];


// search in all table columns
$query = "SELECT * FROM `topics`
              left join `users` on users.username = topics.topic_creator
              WHERE 1=1 "; 
if(!empty($Destination)) {
$query.="AND destination='$Destination'";
}
if(!empty($TypeOfTravel)) {
$query.=" AND typeTravel='$TypeOfTravel'";
}
if(!empty($Age)) {
$query.="AND age='$Age'";
}
if(!empty($email)) {
$query.=" AND email='$email'";
}
if(!empty($topic_name)) {
$query.=" AND topic_name='$topic_name'";
}
if(!empty($StartingPoint)) {
$query.=" AND StartingPoint='$StartingPoint'";
}

$search_result = filterTable($query);
$submit_value = 1; 
}

///Make The search more wider, only for the fields that were in the post
 else if(isset($_POST['search_close']))
{
    $Destination = $_POST['Destination'];
    $TypeOfTravel = $_POST['TypeOfTravel'];
    $topic_name =  $_POST['topic_name'];
    $StartingPoint =  $_POST['StartingPoint'];


// search in all table columns
$query = "SELECT * FROM `topics`
              left join `users` on users.username = topics.topic_creator
              WHERE 1=1 "; 
if(!empty($Destination)) {
$query.="AND destination='$Destination'";
}
if(!empty($TypeOfTravel)) {
$query.=" AND typeTravel='$TypeOfTravel'";
}
if(!empty($topic_name)) {
$query.=" AND topic_name='$topic_name'";
}
if(!empty($StartingPoint)) {
$query.=" AND StartingPoint='$StartingPoint'";
}
$search_result = filterTable($query); 
$submit_value = 2;
}
else {
   $query = "SELECT * FROM `topics`";
   $search_result = filterTable($query);
}
?>

<html>
    <head>

<?php header('Content-Type: text/html; charset=utf-8'); ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Home Page</title>  
         <style>
            .hidden {
                display: none;
            }
        </style>
        <script type="text/javascript">
            function showHide()
            {
               var checkbox = document.getElementById("chk");
               var hiddeninputs = document.getElementsByClassName("hidden");
               for (var i=0; i != hiddeninputs.length; i++) {
                   if(checkbox.checked){
                       hiddeninputs[i].style.display = "block";
                   } else {
                       hiddeninputs[i].style.display = "none";
                   }
               }
           }

<?php 
if($submit_value == 1 || $submit_value == 2){ ?>
    myFunction();
   inputSubmit = document.getElementById("submit");     
   function myFunction(){
    document.getElementById('submit').style.display = "block";   
    };
   <?php } ?>


        </script>
    <body>

    </body>
    </head>
    <?php include("header.php");?>
    <center>
        </br>
        <a href ="post.php"><button>Post</button></a>
        </br>
        <br/>
        <h4>Simple Serach</h4>



        <form action="" method="post">
            <input type="text" name="Destination" placeholder="Destination" value=
"<?php if(isset($_POST['Destination']))
{echo htmlentities($_POST['Destination']);}?>" ></br>
            <input type="text" name="TypeOfTravel" placeholder="Type Of Travel"
              value=
"<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['TypeOfTravel']);}?>"
                   ></br>
            <input type="text" name="Age" placeholder="Age" value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['Age']);}?>">
       </br>
       </br>
    <!-- Advanced Search-->
       <input type="checkbox" name="chkbox" id="chk" onclick="showHide()" />


       <label for="chk"><b>Advanced search</b></label>
       </br>
       <input type ="text" name="email"  placeholder="Email"  class="hidden" value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['email']);}?>">
       <input type ="text" name="topic_name"  placeholder="topic name" class="hidden"value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['topic_name']);}?>">
       <input type="text" name="StartingPoint" placeholder="Starting Point"  class="hidden"value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['StartingPoint']);}?>">
       </br><br/>

  <input type="submit" id="button" name="search" value="Search" 
onclick="myFunction();" >
  <br><br>
 <input type="submit" name="search_close"  id="submit"  style="display: 
 none;" value="Find close results">
        </form>    
        <br/>
        <?php echo '<table border="1px">';?>
                <td width="400px;" style="text-align:center;">
                 Name
                </td>
                  <td width="400px;" style="text-align:center;">
                Destination
                </td>
                 <td width="400px;" style="text-align:center;">
               Type Of Travel:
                </td>
                <td width="80px;" style="text-align: center;">
                  First Name
                </td>
                <td width="80px;" style="text-align: center;">
                  Age
                </td>
                 <td width="400px;" style="text-align:center;">
                 profile picture
                </td>
                <td width="80px;" style="text-align: center;">
                  Creator
                </td>
                <td width="80px;" style="text-align: center;">
                  Date
                </td>
      </tr>   
    </center>
<?php
$sql = "Select * from `topics`";
$check =  mysqli_query($db,$sql); 
$rows = mysqli_num_rows($search_result);
if($rows != 0){
     while ($row = mysqli_fetch_assoc($search_result)){
         $id = $row['topic_id'];
         echo "<tr>";
         //echo "<td>".$row['topic_id']."</td>";
         echo "<td style='text-align:center;'><a href='topic.php?id=$id'>".$row['topic_name']."</a></td>";
         echo "<td>".$row['Destination']."</td>";
         echo "<td>".$row['typeTravel']."</td>";

         $sql_u = "Select * from users where username='".$row['topic_creator']."'";
         $check_u =  mysqli_query($db,$sql_u);
          while ($row_u = mysqli_fetch_assoc($check_u))
                          {
                           $user_id = $row_u['id'];
                           $profile_pic = $row_u['profile_pic'];
                           $firstname = $row_u['firstname'];
                           $age = $row_u['age'];
                            echo "<td>".$firstname."</td>";
                            echo "<td>".$age."</td>";
                            echo "<td><img src='".$profile_pic."' width='10%' height='10%' alt='me'></td>"; 
                            echo "<td><a href='profile.php?id=$user_id'>".$row['topic_creator']."</a></td>";
                          }
          $get_date = $row['date'];
         echo "<td>".$row['date']."</td>";             
         echo "</tr>";
     }
}else {
        echo "No topics found";
      }
echo "</table>";


if (@$_GET['action']=="logout")
{
    session_destroy();
    header('location:login.php');
}
}else 
    {
    echo "You must be logged in.";
    echo "<a href ='login.php'>Click here to login</a>";
    }
    ?>
</br>
</br>
    <body>
    </body>
</html> 



您需要设置类型按钮，因为当您设置类型提交时，表单会自动提交，所以第二次显示不会显示，但它会工作


<form method="post" action = "">
<input type="submit" id="button" name="search" value="Search" >
<br>
 <input type="submit" name="search_close"  id="submit"  style="display: 
 none;" value="Find close results">
</form>

<?php 
$submit_value = 0;
if(isset($_POST['search']))
{
   echo "first search";
   $submit_value = 1;

}
 else if(isset($_POST['search_close']))
{
   echo "first search";
   echo '<br>';
   echo "second search";
   $submit_value = 2;
}
else {
   echo "nothing";
}


?>

<script type="text/javascript">
<?php 
if($submit_value == 1 || $submit_value == 2){ ?>
    document.getElementById('submit').style.display = "block";   
   <?php } ?>
</script>






document.getElementById（'submit'）.style.display=“block”；



检查此代码
我已清理了您的代码，但有两个提交按钮的问题仍然存在。即使单击第一个按钮导致显示第二个按钮，第一个按钮也会导致页面重新加载来自表单的
操作
资源的结果。在本例中，我取消了表单的提交事件，以显示第二个按钮的显示有效

最后，我认为你在这件事上完全错了。我认为您应该对服务器端资源进行AJAX调用，并将调用的结果注入到页面中——没有表单，也没有提交



//不要忘记在变量声明中添加“var”，否则变量
//全球化！
var sub1=document.getElementById（“btnSub1”）；
var sub2=document.getElementById（“btnSub2”）；
//为第一个按钮设置事件处理程序
sub1.addEventListener（“单击”，myFunction）；
函数myFunction（e）{
//调整类，而不是单个样式
子2.类列表。删除（“隐藏”）；
//取消本机事件并停止冒泡
e、 预防默认值（）；
e、 停止传播（）；
};

.hidden{display:none；}






什么是“似乎不起作用”？你有错误吗？发生了什么？顺便说一下，您有一些HTML错误（
多年来一直是一个不推荐使用的标记-使用CSS进行格式化，

是一个无效的标记，因为

元素不会关闭。此外，除非您提交到两个不同的位置，否则不应该有两个提交按钮。在您的情况下，第一个按钮应该是一个
，而不是一个提交按钮不显示第二个submit按钮，其值为=“查找关闭结果”：@ScottMarcus，这能解决问题吗？因为在本例中，它与两个提交按钮一起工作。单击一个
input type=submit
会自动提交表单数据。如果您的第一个按钮不应该这样做，而只应该显示实际的提交按钮，那么第一个按钮不应该是提交按钮当你说“它能工作”时，我想你只是指出现的第二个按钮。表单本身不能正常工作。你的代码更好，但我会在我的帖子中进一步说明需要什么样的输出。检查我的更新答案，如果可以，那么下一步我会多克现在，我想它会对你很好。谢谢“找到接近的结果"应该显示，直到单击搜索按钮。你说应该显示是什么意思？当页面加载时，然后查找接近的结果不显示？你运行代码查看了吗？它没有显示我在编辑帖子上草拟的内容。它在第一次将按钮一起显示。@Toto88我知道。我试图向你展示的是编写HTML、CSS的正确方法我解释了为什么我让我的代码做它在注释中所做的事情，我还解释了我认为你在整个过程中做得不对。

<form method="post" action = "">
<input type="submit" id="button" name="search" value="Search" >
<br>
 <input type="submit" name="search_close"  id="submit"  style="display: 
 none;" value="Find close results">
</form>

<?php 
$submit_value = 0;
if(isset($_POST['search']))
{
   echo "first search";
   $submit_value = 1;

}
 else if(isset($_POST['search_close']))
{
   echo "first search";
   echo '<br>';
   echo "second search";
   $submit_value = 2;
}
else {
   echo "nothing";
}


?>

<script type="text/javascript">
<?php 
if($submit_value == 1 || $submit_value == 2){ ?>
    document.getElementById('submit').style.display = "block";   
   <?php } ?>
</script>