I'm wondering how I can make this work, unfortunately my code doesn't work. I want my form to have two buttons; one goes to the other PHP file, and the other goes to another PHP file.

The first button, SUBMIT, is working fine. But the second button, SEE RANK, is not working, nothing happens after clicking it

 <section class="small-section bg-gray-lighter" id="start">
                    <div class="container relative">

                        <!-- FORMS -->
                        <form id="format" class="form align-center" action="Algorithms/article.php" method = "GET">  
                           <form id="rank" class="form align-center" action="Algorithms/Main2.php"  method = "GET">
                            <div class="row">
                                <div class="col-md-8 align-center col-md-offset-2">

                                    <div class="newsletter-label font-alt">
                                        Type the description of your case below
                                    </div>

                                    <div class="mb-20">

                                        <!-- INPUT TEXT FIELD -->
                                        <input placeholder="Start typing here" name = "caseInput" class="newsletter-field form-control input-md round mb-xs-12"  type="text"  required/>

                              </form>
                           </form>
                                       <!-- BUTTONS -->
                                        <button form="format" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
                                            Submit
                                        </button> 
                                        <button form="rank" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
                                            See rank
                                        </button> 

                                        <!-- END OF BUTTONS -->
                                    </div>
                                    <div class="form-tip">
                                        <i class="fa fa-info-circle"></i> Ex. "The father killed her daughter."
                                    </div>

                                    <div id="subscribe-result"></div>

                                </div>
                            </div>
                        </div>
                    </section>

And it looks like this:

I'm wondering how I can make this work, unfortunately my code doesn't work. I want my form to have two buttons; one goes to the other PHP file, and the other goes to another PHP file.

The first button, SUBMIT, is working fine. But the second button, SEE RANK, is not working, nothing happens after clicking it

 <section class="small-section bg-gray-lighter" id="start">
                    <div class="container relative">

                        <!-- FORMS -->
                        <form id="format" class="form align-center" action="Algorithms/article.php" method = "GET">  
                           <form id="rank" class="form align-center" action="Algorithms/Main2.php"  method = "GET">
                            <div class="row">
                                <div class="col-md-8 align-center col-md-offset-2">

                                    <div class="newsletter-label font-alt">
                                        Type the description of your case below
                                    </div>

                                    <div class="mb-20">

                                        <!-- INPUT TEXT FIELD -->
                                        <input placeholder="Start typing here" name = "caseInput" class="newsletter-field form-control input-md round mb-xs-12"  type="text"  required/>

                              </form>
                           </form>
                                       <!-- BUTTONS -->
                                        <button form="format" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
                                            Submit
                                        </button> 
                                        <button form="rank" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
                                            See rank
                                        </button> 

                                        <!-- END OF BUTTONS -->
                                    </div>
                                    <div class="form-tip">
                                        <i class="fa fa-info-circle"></i> Ex. "The father killed her daughter."
                                    </div>

                                    <div id="subscribe-result"></div>

                                </div>
                            </div>
                        </div>
                    </section>

And it looks like this:

• javascript
• php
• html

• Please be more specific, what exactly doesn't work? – bkausbk Commented Sep 14, 2015 at 8:04
• @bkausbk, the first button is working fine. but the other button "see rank" is not clickable. – phenomenon09 Commented Sep 14, 2015 at 8:07
• Please don't call form inside the form. Using jQuery you can change the action of the form then it will be work for both. – Deepak saini Commented Sep 14, 2015 at 8:13
• Your HTML is a mess. Start by cleaning that up. – RiggsFolly Commented Sep 14, 2015 at 8:28

3 Answers 3

First, it doesn't make sense to use <form> inside <form>. There are couple of ways to do this:

Method 1

Use 2 forms instead.

<form method="post" action="php_file_1.php" id="form1">
    <!-- Your further HTML Code Goes Here...   -->
</form>
<form method="post" action="php_file_2.php" id="form2">
    <!-- Your further HTML Code Goes Here...   -->
</form>

Method 2

Use a single PHP file. But perform different function on each button click.

<form method="post" action="functions.php" id="form">
    <!-- Your further HTML Code Goes Here...   -->
    <input type="submit" name="action_1" id="button1">
    <input type="submit" name="action_2" id="button2">
</form>

Then in your functions.php file:

if(isset($_POST['action_1'])){
    action1(); // Your Function Name...
}
elseif(isset($_POST['action_2'])){
    action2(); // Your second function
}

You cannot have a form inside a form. (This is why your second buton does not work)

So, your solution will be to have 2 'submit' elements with different names in your form. Then, on form submission, detect and process accordingly depending on which button was pressed.

 <!-- BUTTONS -->
 <input type="submit" name='submitAction1' class="btn..." value='Submit'>
 <input type="submit" name='submitAction2' class="btn..." value='See rank'>

if(isset($_POST['submitAction1'])){

    // process form 1

} elseif (isset($_POST['submitAction2'])){

    // process form 2

}

From XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) - B. Element Prohibitions

form must not contain other form elements

Implementation example with a javascript function which changes the form's action:

<html>
    <body>

        <script>
            function mySubmit(wtf) {
              if ('article' == wtf ) {
                  document.forms['myForm'].action = 'Algorithms/article.php';
              } else if ('Main2' == wtf ) {
                  document.forms['myForm'].action = 'Algorithms/Main2.php';
              } else
                  return false;

              document.forms['myForm'].submit();
            }
        </script>

        <form name="myForm">
            <input type ="button" value="submit article" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('article')">
            <input type ="button" value="submit Main2" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('Main2')">
        </form>

    </body>
</html>