0

I'm trying to build a page where the data entered in a form get's echo'd elsewhere on the web page. Here's the code, any help would be great I just can't see what the problem is.

<div class="container-fluid">
    <div class = "row">

        <div id="form" class="col-md-6 col-md-offset-3">
            <h1>Enter your band details to create an instant portfolio!</h1>

            <form class="form-horizontal" role="form" method="post" action="">
            <div class="form-group">
                <br  />
                <label for="bandName" class="control-label">Band Name</label>
                <input type="text" class="form-control" name="bandName"><br  /><br  />
                <label for="genre">Genre</label>
                <select name="genre">
                  <option value="Pop">Pop</option>
                  <option value="Rock">Rock</option>
                  <option value="Folk">Folk</option>
                  <option value="Metal">Heavy Metal</option>
                </select><br  /><br  />
                <label for="video">Enter the URL for one of your youTube videos</label>
                <input type="text" class="form-control" name="video"><br  />
                <label for="bio">Biography</label>
                <textarea rows="5" columns="4" class="form-control" name="bio"></textarea>
                </fieldset><br  />

                <button type="button" id="submit" class="btn btn-primary">Submit</button>
                <p><p>
            </div>
            </form>

        </div>
    </div>
    <div id="container">
        <div class="row">
            <div id="banner">
                <?php   

                   echo $_POST["bandName"];

                 ?>
            </div>
        </div>
MikeHiggins
  • 43
  • 5
  • How about add a condition? – Chay22 May 11 '16 at 20:06
  • 1
    `` need to be `` ` – Alive to die - Anant May 11 '16 at 20:07
  • with input type button form value cannot post normally.(javascript+jquery needed to do so) – Alive to die - Anant May 11 '16 at 20:08
  • What I want to do is on submission of the form, the form itself gets hidden and the banner div is then shown. I've got the Jquery written so that this works already. One issue I have with that is that when the input type is "submit" it refreshes the page back to the form. – MikeHiggins May 11 '16 at 20:23
  • If there's more code related to this (the jquery you just mentioned), then you should add it to your question. You probably just need to prevent the default behavior of your button in your click handler. – Patrick Q May 11 '16 at 20:25
  • $(document).ready(function(){ $("#submit").click(function(slow){ $("#container").fadeToggle(); $("#form").css("display","none"); }); }); – MikeHiggins May 11 '16 at 20:28
  • If you don't want to do it with the refresh, then you're going to have to add some ajax to submit the form. – Patrick Q May 11 '16 at 20:52
  • Right, it's sorted, thanks for all your help. Changing the button to submit and putting the results on a different page achieved the result I was looking for. – MikeHiggins May 11 '16 at 21:17

0 Answers0