duanjupiao4730
duanjupiao4730
2017-04-18 19:24

首先单击提交表单提交后显示第二个提交按钮 - Javascript

已采纳

I've build a function in javascript to show me a second submit but only after the first submit was clicked.

Edited - this is 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>

Updated: I've edited in order to conclude the main problem.

So what I want is this:

a) The user has pressed the first submit button "search" then it will echo on the page "first search" and then show the second submit button "search_close" .

b)Then, if the user has pressed the second submit button it will show "second search".

When first Refreshing:
======
search (button)
======

if clicking the "search" button:
======
search (button)
======
first search  (text)
==================
Find close results (button)
==================

if clicking the "find close results:
======
search (button)
======
first search  (text)
==================
Find close results (button)
==================
second search  (text)

This code doesn't do what I want. Why?

Updated - why the button find close results disappers after one second?

<?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> 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • duandianwen1723 duandianwen1723 4年前

    you need to set type button cause when you set type submit then form automatically submit so show second not show but it work.

    <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>
    

    check this code

    点赞 评论 复制链接分享
  • dragon321723 dragon321723 4年前

    I have cleaned up your code, but the issue of having two submit buttons still persists. Even if the clicking of the first button causes the second to show, the first button will cause the page to reload with the results from the form's action resource. In this example, I have cancelled the form's submit event to show that the display of the second button works.

    In the end, I think you are going about this all wrong. I think you should be making AJAX calls to your server-side resource and injecting the results of that call into your page - - no forms and no submits.

    // Don't forget to add "var" to your variable declarations, otherwise the variables
    // become global!
    var sub1 = document.getElementById("btnSub1"); 
    var sub2 = document.getElementById("btnSub2"); 
    
    // Set up the event handler for the first button
    sub1.addEventListener("click", myFunction);
    
    function myFunction(e){
      // Adjust classes, not individual styles
      sub2.classList.remove("hidden");
      
      // Cancel the native event and stop bubbling
      e.preventDefault();
      e.stopPropagation();
    };
    .hidden { display:none; }
    <form>
      <!-- Submit buttons don't get a name attriute unless you expect their value to be submitted
           along with all the other form data. Inline styles should be avoided and internal style
           sheets used instead. And, inline JavaScript event attributes (onclick, etc.) should not
           be used. -->
      <input type="submit" id="btnSub1" name="search" value="Search" >
      <br>
      <input type="submit" id="btnSub2" class="hidden" 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";
        }
        ?>

    </div>
    
    点赞 评论 复制链接分享

相关推荐