CODEWITHSUNDEEP
javascriptphphtml
phenomenon09
phenomenon09

Reputation: 65

Two forms from one input

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:

Upvotes: 0

Views: 3849

Answers (3)

fantaghirocco
fantaghirocco

Reputation: 4868

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>

Upvotes: 0

Zahid Saeed
Zahid Saeed

Reputation: 1171

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
}

Upvotes: 4

MaggsWeb
MaggsWeb

Reputation: 3027

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

}

Upvotes: 2

Related Questions