Embedding HTML Forms within another HTML Form

I haven't googled much on the topic "Embedding HTML Forms within another HTML Form". Although if there is any possibility that Forms can be nested, well I doubt if that would be a nice idea. I came up with one possible solution to this because one of the projects I recently handled requires that the application keeps its basic functionalities even if the Browsers' Javascript is turned off. I guess you guys should really consider the fact that some of the users visiting your site have their Javascript turned off for security reasons. And by that, your site should still work as expected. They may be less than what you might have anticipated but think about the idea that they might end up visiting and purchasing goods in your competitors' website instead. Now how's that?

So I got several forms on the site which have this adjacent field values which depends on the preceding field. With Javascript turned on, this seems an easy task. No sweat at all. Specially with the presence of jQuery Javascript library. But what if it goes the other way. That your visitors seem to be so tight with regards to security issues and switched their Javascript engine off. That's a lot aweful for a heavily JS implented site.

Ok. Straight to the solution! First, take a look at the base code from which we modify later on. This is your index.php file.

<form action="process.php" method="GET">

<select name="country_id">
<option value="--" selected="selected">Select Country</option>
<option value="US">United States</option>
<option value="AU">Australia</option>
</select>

<select name="state_id">
<option value="--" selected="selected">Select State</option>
</select>

<input type="submit" value="submit" />

</form>

Here we got two Select tags. The one with the name "state_id" is dependent on "country_id". With Javascript turned on, you can bind an event using jQuery that triggers an AJAX call fetching all the States of whatever country is Selected, then inserts the returned values inside state_id Select tag.

Enabling this functionality with Javascript turned off is easy. Simply provide a <noscript> tag beside the country_id Select tag, and in it, place another submit button.

<form action="process.php" method="GET">

<select name="country_id">
<option value="--" selected="selected">Select Country</option>
<option value="US">United States</option>
<option value="AU">Australia</option>
</select>

<noscript>
<input type="submit" value="Load States" />
</noscript>

<select name="state_id">
<option value="--" selected="selected">Select State</option>
</select>

<input type="submit" value="submit" />

</form>

Take note of the code in red. When the browser's JS is off, this will then be available for the user. If he clicks on it, the form data will be sent over to process.php. Now, the next step for us to do is to verify if the button he pressed is the main Submit button or the Load States button. We should figure that out before we run the whole process.php code because as of this time, he intends to load all the states available for the country he just selected. To do that, we need to know what button was pressed. Here's the new code for that:

<form action="search-index.php" method="GET">

<select name="country_id">
<option value="--" selected="selected">Select Country</option>
<option value="US">United States</option>
<option value="AU">Australia</option>
</select>

<noscript>
<input type="submit" value="Load States" name="submit_button" />
</noscript>

<select name="state_id">
<option value="--" selected="selected">Select State</option>
</select>

<input type="submit" value="Submit" name="submit_button" />

</form>

With the buttons having the same name, we could use this to verify what button was pressed by checking its value. So your process.php should have something like:

<?php

session_start();

$btn = $_GET['submit_button'];
$country_id = $_GET['country_id'];

if ($btn == 'Load States') {
    if ($country_id == 'US') {
        $_SESSION['form_data']['states'] = array(
            1 => 'Alabama',
            2 => 'Colorado',
            3 => 'Illinois',
            4 => 'Ohio',
            5 => 'Texas'
            // Add States as needed
        );
    }
    elseif ($country_id == 'AU') {
        $_SESSION['form_data']['states'] = array(
            1 => 'New South Wales',
            2 => 'Queensland',
            3 => 'South Australia',
            4 => 'Tasmania',
            5 => 'Western Australia'
            // Add States as needed
        );
    }

    header("location: index.php");
    exit();
}

// ... the rest of your code goes here


// EOF

...and your index.php would now have the ff codes:

<?php

session_start();

$states = '';

if ( ! empty($_SESSION['form_data']['states'])) {
    foreach($_SESSION['form_data']['states'] as $val => $label) {
        $states .= '<option value="'. $val .'">'. $label .'</option>';
    }
}

?>

<form action="search-index.php" method="GET">

<select name="country_id">
<option value="--" selected="selected">Select Country</option>
<option value="US">United States</option>
<option value="AU">Australia</option>
</select>

<noscript>
<input type="submit" value="Load States" name="submit_button" />
</noscript>

<select name="state_id">
<option value="--" selected="selected">Select State</option>

<?php echo $states; ?>

</select>

<input type="submit" value="Submit" name="submit_button" />

</form>

Ok there you have it. This is short I know. But what's important is you get the idea of it. If you think you got a better solution, well then, we'll be glad to know about it. Show it to us.


Bookmark and Share

5 comments :

Anonymous said...

That helps. Thank you

Anonymous said...

This really is helpful, but is there a way to do this with jsp and java on the server side?

bassgrinder said...

Of course. I think that's possible. Whichever server-side scripting language you're comfortable using with, go for it. The important thing is you know how to do it.

Ven said...

This really helped me a lot with my php coding to setup a form...Thanks !

Unknown said...

Own version of this snippet: http://www.codedump.be/code/1383/

I have made my own version of this script just to show how it can be done without multiple Submits. The trick is to make a Div which can be reloaded.

In short you have your index.php
which contains a small snippet of code with a onchange listener.

if the Div id 'country' changes it will trigger a Javascript Post submit using Jquery. to the page process.php it submits the value of the ID country.
To a variable called 'country_name' which can be called upon using $_POST['country_name']

The html in the file proces.php will be loaded in the 'show_result' ID. This works with almost every browser! (haven't seen one which didnt work ).
If you want to make this process safe always check your input!!!! in this case $_POST['country_name']

any questions? please refer to cablegunmaster.nl and contact me there.

Post a Comment

Hi there! Please leave your message here. Also, I may not be able to respond to your query right away. So please bear with me. Thanks. :)