How to link a button, located on a modal to another page?


#1


This is a Personal Project

Good Morning,
Today I have a very simple problem to solve (I am confused). I need to link a button to another page so that when I click it, it will change the page I am on currently. If I were to click on currently, It will just take me back to the top of the home page (the same page the button it present on. This button is located on a modal window.


This the line(s) of code where I believe I need to change something....If I am wrong please notify me and I will post other sections as well...

<!-- Container (TOUR Section) -->
<div class="bg-1">
  <div class="container">
    <h3 class="text-center">SO WHY NOT START TODAY?</h3>
    <p class="text-center">The best thing about it is that its all free!</p>
    <ul class="list-group">
  <li class="list-group-item">Lesson 1: <span class="label label-danger">Why learn HTML, CSS and JavaScript?</span></li>
  <li class="list-group-item">Lesson 2: <span class="label label-danger">Applications to Use</span></li> 
  <li class="list-group-item">Lesson 3: <span class="label label-danger">HTML5</span></li> 
</ul>
      <button class="btn" data-toggle="modal" data-target="#myModal">Click here to Proceed!</button>
      <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Before we begin...</h4>
        </div>
        <div class="modal-body">
          <form role="form">
            <p>Please Enter you Name here.</p>
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Name</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter Name">
            </div>
              <button type="submit" class="btn btn-block" >Submit 
                <span class="glyphicon glyphicon-ok"></span>
              </button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
            <span class="glyphicon glyphicon-remove"></span> Cancel
          </button>
          <p>Need <a href="#">help?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

I hope I have been clear, thank you for your time,
Regards
Satanshu


#2

Replace the # with the URL..

For a button, you will but your link tag between the button tags
eg:

<button>
    <a href="http://www.google.com">Google</a>
</button>

#3

But where would you Insert the a herf="#button"> Submit <a?

The above quote is the button I want to link to another website.


#4

you want this linked ?

<button type="submit" class="btn btn-block" >
Submit <!--- link it here -->
<span class="glyphicon glyphicon-ok"></span> </button>
<!--

-->

<button type="submit" class="btn btn-block">
   <a href="http://www.google.com/">Submit </a>
    <span class="glyphicon glyphicon-ok"></span> 
</button>

#5

That where I was confused, I thought I needed to place the herf inside the <button. Thank - In the future, I will not make a similar error again. I will try it out and let you know...
Regards
Satanshu


#6

It Works...Thank for your time
Regards
Satanshu


#7

Sure you're welcome,

When coding try and keep your code neat and organised so its easier for you to see and understand what's going on.


#8