I need to hide fields in Php and have them display after I click a button for each of them

Question

I have a query from mysql, I am getting one row at the time randomly, I am teaching and I want the row to just show one field at the time. for example, I want my students to see the title of the book, I will ask them Who is the author and after they finish guessing I will click the button that says author or Theme and they will see the author name or the theme of the title. As of right now I am able to see all the fields with the information that they contain, but I haven't been able to hide the author and theme to just display them with the click of each of the button.

<form action="index3.php" method="get">
    <?php while($row = mysqli_fetch_array($result2)): ;?>
    Title of book :  <?php echo $row[3];?>

    <br/><br/>

    <input type="button" value="Author" name="publish"> 

    <?php echo $row[0];?>
    <br/><br/>

    <input type="button" value="Group"><?php echo $row[1];?>
    <br/><br/>

    <input type="button" value="Theme"> <?php echo $row[2];?>
    <br/><br/>

    <input type="submit" value="Next">

</form>

From your question, it's quite hard to understand what you're trying to do. However, there are issues with the posted code. One thing is that you open the form before the loop but you're then closing it inside the loop. That means that after the first iteration, any outputted fields would be outside the form. If you just want one form, then the `` should be after the loop. Then you can't have multiple inputs with the same name. But as I said, the question is pretty unclear so I can't suggest you to do one way or the other. — M. Eriksson, Nov 03 '18 at 23:09
You can solve your problem with a use of css `style = "display: none;"` and `style = " display: block;"` use JavaScript to switch the styles as when needed. you can put a `` round the outputs — Bobby Axe, Nov 03 '18 at 23:12
I am trying to get the information like if it was a presentation. The title will come every time I click next with a new title, but the other information I want to display when I click the button of each of them that way I give them time to guess and then I show them the answer. — Elvis Cruz, Nov 03 '18 at 23:14
Yes use `onclick='showdiv();'` the function showdiv() will switch the styles or toggle them to make the div appear or disappear — Bobby Axe, Nov 03 '18 at 23:18
Thanks Bobby Axe, is that Css that I will put after or before every one of the buttons? — Elvis Cruz, Nov 03 '18 at 23:19
Would have written an answer for you but your code is a bit confusing also onclick is html — Bobby Axe, Nov 03 '18 at 23:19
would you mind to write an example using at least one my buttons for me to follow it. thanks Bobby — Elvis Cruz, Nov 03 '18 at 23:21
Here is what your looking for its well explained https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript — Bobby Axe, Nov 03 '18 at 23:23
right now the way is working is, the next button is doing what is suppose, getting a new title. But the other 3 buttons are not doing anything and the — Elvis Cruz, Nov 03 '18 at 23:26

Rasclatt · Accepted Answer · 2018-11-04T04:59:12.043

0

Some JavaScript is required to show hidden fields. A helpful tip here, use associative arrays on this, it's not readable when you use numeric arrays (I am guessing the names below):

jsFiddle of below: https://jsfiddle.net/4sg5wjm3/

<form action="index3.php" method="get">
    <!-- use mysqli_fetch_assoc here instead of mysqli_fetch_array -->
    <?php while($row = mysqli_fetch_assoc($result2)): ?>

    <div class="book-group">

        <h3>Title of book :  <?php echo $row['book_title'] ?></h3>

        <div class="hide pad-bottom author">
            <?php echo $row['author'] ?>
        </div>
        <div class="hide pad-bottom group">
            <?php echo $row['book_group'] ?>
        </div>
        <div class="hide pad-bottom theme">
            <?php echo $row['book_theme'];?>
        </div>

        <a href="#" class="reveal" data-reveal="author">Reveal Author</a>
        <a href="#" class="reveal" data-reveal="theme">Reveal Theme</a>
        <a href="#" class="reveal" data-reveal="group">Reveal Group</a>
        <a href="#" class="reveal-next">NEXT</a>

    </div>

    <?php endwhile;?>
</form>

<!-- Need jQuery library -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
<script>
// Document ready
$(function(){
    // When user clicks reveal button
    $(".reveal").on('click', function(e) {
        // Stop normal action of <a> tag
        e.preventDefault();
        // Find the parent div, then find the appropriate child div based on
        // what the data- attribute is of the clicked button
        $(this).parents('.book-group').find('.'+$(this).data('reveal')).fadeIn('fast');
    });
});
</script>
<!-- Some styles to make the show/hide work -->
<style>
* {
    font-family: Arial;
}
.hide {
    display: none;
}
.pad-bottom {
    padding-bottom: 1em;
}
a:link,
a:visited {
  background-color: green;
  float: left;
  clear: both;
  padding: 0.5em;
  font-size: 1.2em;
  border-radius: 3px;
  text-decoration: none;
  color: #FFF;
  transition: background-color 0.5s;
  margin: 0.2em;
}
.book-group {
  display: flex;
  flex-direction: row;
  margin: 0.5em;
  padding: 0.5em;
  border-top: 1px solid #ccc;
}
</style>

Note, I have not done anything with the next button, it can have JS applied to it as well in the same manor as to show and hide the book-group classes so only one book shows at a time.

edited Nov 04 '18 at 04:59

answered Nov 04 '18 at 04:49

Rasclatt

12,498
3
25
33

Thank you very much Rasclatt, It work like a champ. God bless you! – Elvis Cruz Nov 04 '18 at 20:42
@ElvisCruz If I answered your question, please mark the answer as correct so others are not visiting thinking the question isn't answered yet. – Rasclatt Nov 04 '18 at 21:50
How do i do that ? – Elvis Cruz Nov 04 '18 at 22:00
how do I make the next button to give me the next record, because right now I am using a button that refresh the whole page. – Elvis Cruz Nov 04 '18 at 23:30
You have to hide all the `.book-group` using `display: none;` in your styles. Then in javascript, the next button will hide the current `.book-group` and show the next one. – Rasclatt Nov 04 '18 at 23:32
how do I make the next button to give me the next record, because right now I am using a button that refresh the whole page. – Elvis Cruz Nov 04 '18 at 23:38
But you have all the books showing on one page, right? – Rasclatt Nov 04 '18 at 23:39
I am getting one at the time with my query, but I cannot get the next one unless I refresh the page. And the only reason why is giving me a different one is because I have the query to give me them ramdonly because if I make it to give me the records in order it will always give me the first one. – Elvis Cruz Nov 04 '18 at 23:41
Oh, then I would do a pagination sql query and get them in order. It would use `LIMIT`. I would look that up and see how to do that. – Rasclatt Nov 04 '18 at 23:51
Also, if you don't have tons of books, you could output them all on the same page and do what I said previously. Here is an example of that script:https://jsfiddle.net/79de4yf8/ – Rasclatt Nov 04 '18 at 23:52
I have many books and I am planning on adding many more. I change it to have them in order and unless I get the next button giving the next record I will always get the first book. – Elvis Cruz Nov 05 '18 at 00:32
The buttons that I was needing are working perfectly as you wrote them. But the next button is the one that is not doing what is suppose to. – Elvis Cruz Nov 05 '18 at 00:39
Yeah then you need to do a pagination type sql/script – Rasclatt Nov 05 '18 at 01:25
Hey @Rasclatt, is there anyway that I can make the button to hide the fields quicker, my students noticed that in every transition they could see the answer before the buttons came up. These kids are amazing! – Elvis Cruz Nov 05 '18 at 19:51
Is the ` – Rasclatt Nov 05 '18 at 19:54
Yes, i wrote it the way you had it. I will change it when I get home. Thanks – Elvis Cruz Nov 05 '18 at 20:50
Thanks again it did the job. I make them to be random again so I can refresh the page and it will change the books. at least for now while I figure out how to make the next button to show the next record. – Elvis Cruz Nov 05 '18 at 23:15
Great job, glad you got it all going! – Rasclatt Nov 07 '18 at 16:19
do you know how I can make the buttons to be triggered by the selection of dropdown list one for each of them. I know how to create the dropdown list but I don't know how to make trigger the Href buttons after I select each of them. for example I want that when I select the name of the author, the content under the hide button for the author will reveal automatically and I will be able to see if I got it right. I need them to reveal the content by the selection of the dropdown list instead of by 'click'. thanks for the help. – Elvis Cruz Nov 12 '18 at 16:50
I don't know if it will be possible – Elvis Cruz Nov 12 '18 at 16:59
Yeah that is possible, there are not too many things that are impossible when it comes to programming. – Rasclatt Nov 12 '18 at 17:16

I need to hide fields in Php and have them display after I click a button for each of them

1 Answers1