'How to submit different forms with same input

Im trying to implement the "i'm feeling lucky" functionality in a quite simple web. The thing is that at first, without this button, the query was properly done (i mean when doing a normal search). But, when i included the im feeling lucky button, the normal search stopped working and know even when you click on norma search it goes directly to the firs result. im new to HTML and still lost regarding forms. Note that i cant do it using js cause its for an assignment meant to be done only with HTML.

Thanks a lot for your help :D

<a href="image.html">Image</a>
<a href="advanced.html">Advanced</a>

<form action="https://www.google.com/search?">
  <div><input type="text" name="q" id="search"></div>
  <div>
    <input type="submit" value="Google Search" id="button">
    <form>
      <input type="hidden" name="btnI" value="1">
      <input type="submit" value="I'm feeling lucky" id="button">
    </form>
  </div>
</form>
html


Solution 1:[1]

In case that you need two buttons with one text field, perhaps a different approach would be useful. Use

<button type="submit" name="action" value="val1"></button>

and

<button type="submit" name="action" value="val2"></button>

but be careful with this one, since some browsers will upload value from the "value" attribute.

The other method is to use some PHP in your script, like this:

<input type="submit" name="update_button" value="Update" />
<input type="submit" name="delete_button" value="Delete" />

<?php
if (isset($_POST['update_button'])) {
    //update button 
} else if (isset($_POST['delete_button'])) {
    //delete button
} else {
    //no button was pressed
}
?>

Happy coding!

Solution 2:[2]

You cannot nest forms

You need two forms:

<a href="image.html">Image</a>
<a href="advanced.html">Advanced</a>

<form action="https://www.google.com/search?">
  <div><input type="text" name="q" id="search"></div>
  <div>
    <input type="submit" value="Google Search" id="button">
    <input type="hidden" name="btnI" value="1">
  </div>
</form>
<form action="https://www.google.com/search?"><input type="hidden" name="q" value="I'm feeling lucky"><button>I'm feeling lucky</button></form>

Solution 3:[3]

A few notes:

  1. you have a form tag nested inside the other which is wrong.
  2. you have two submit button with same id.

Remove these issues and it will work as desired.

Solution 4:[4]

As I see it, you want to have window inside another window, both of which will have buttons? In that case, don't go form inside form, make it div inside div and in both of them, enter a form, here's and example:

<div id="div1">
   <form action="https://www.google.com/search?">
     <input type="text" name="q" id="search">
     <input type="submit" value="Google Search" id="btn1" class="button">
   </form>
   <div id="div2">
     <form action="https://www.google.com/search?">
       <input type="text" name="q2" id="search">
       <input type="submit" value="Google Search" id="btn2" class="button">
     </form>
   </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 lordsanken
Solution 2 mplungjan
Solution 3 Ritik Banger
Solution 4

Related Questions