How to change div id name based on form value?

Question

I have a couple forms on a page with a single button and a hidden input field with a value already pre-set:

<form action="product.html" method="get">
<fieldset>
<input style="display: none;" type="text" name="RSS" id="RSS" value="RSS" />
<input type="submit" value="Go"/>
</fieldset>
</form>

<form action="product.html" method="get">
<fieldset>
<input style="display: none;" type="text" name="RSS2" id="RSS2" value="RSS2" />
<input type="submit" value="Go"/>
</fieldset>
</form>

Once they hit the Go button on either form, it will redirect to the product.html page where a specific div loads based on the value above.

<div id="ID CHANGE TO OCCUR HERE to either be RSS or RSS2"></div>

My question is, how do I get that id to change on that div? Thanks

PS: PHP is not enabled on the company servers...so yeah..yeah...

Is there a reason you don't do this on the server-side and swap IDs when the page is generated? — Todd, Oct 18 '13 at 17:03
So you reinvented `type="hidden"` with `style="display: none;" `? — epascarello, Oct 18 '13 at 17:08
So you rougly want: `div.id = (get_headers.rss != undefined) ? 'rss' : 'rss2';`? — Broxzier, Oct 18 '13 at 17:12
Todd, this is for a demo, and several demos down the line. I'm trying to get it to work without having to build several pages. — mark1178, Oct 18 '13 at 17:55
Broxzier, I guess so lol, my javascript brain isn't as good as it should be, which is why I'm here. — mark1178, Oct 18 '13 at 17:56
I provided two answers, because I didn't fully understand your end goal at first. Both answers have useful information and I didn't want to delete/change the info in the first answer. *Please remember to upvote all answers that are helpful to you, and to select a correct answer when ready to close the question.* — cssyphus, Oct 18 '13 at 19:43

cssyphus · Answer 1 · 2013-10-18T19:24:59.243

If I understand you correctly, when program control transfers over to product.html, you wish to discover which form value has come across (i.e. which form did the user click).

I cannot think how you would do this solely with HTML. This is a job for a server-side language like PHP or ASP .Net.

It's pretty simple in PHP. Note that you can take all your existing HTML files and simply rename them to .php (eg. product.php) and they will still work the same.

Just put this at the top of the file -- in fact, this is the complete file (just copy/paste to your server to test):

product.php

<?php 

    /*   Below not required, but un-comment to see useful info: 
    echo '<pre>';
    print_r($_REQUEST);
    echo '<pre>';
    */

    if (isset($_REQUEST['RSS'])) {
        echo 'User clicked the RSS form';
    } else if (isset($_REQUEST['RSS2'])) {
        echo 'Sent here by the RSS2 form';
    }

Since the name of the processing file has changed, remember to change the action= line in each of your forms before trying this:

<form action="product.php" method="get">

Explanation:

When a form is submitted, the form elements (input fields, radio buttons, checkboxes) are turned into variables and sent to the processing document (the target document specified in the action= attribute of the form tag).

For each element, the variable name is the name= attribute for that element, and the variable value is either the value= attribute, or, in the case of an input field for example, whatever the user typed into the field before pressing submit.

The is very little difference to the programming/functionality between sending the form as method="Get" or method="POST", but the post method is more secure and can transfer more information, so most of us use that.

Finally, on the other end, there are three ways to get the variable values (PHP Example):

 $newvar = $_GET['varname'];  //if method="GET" was used

 $newvar = $_POST['varname'];  //if method="post" was used

 $newvar = $_REQUEST['varname'];  //works for both

If you need more assistance with PHP, view some of the Alex Garret's free ten-minute videos on the New Boston or on his own site.

Thanks, but I forgot to mention that for some reason our PHP isn't enabled and the company doesn't want to turn it on. Yeah...I know — mark1178, Oct 18 '13 at 20:20

score 0 · Answer 2 · answered Oct 18 '13 at 19:41

Re-reading your question, I put together the completed example. In your target page, you have two DIVs and you wish to display one or the other depending on what form the user clicked.

Here is a working example of the solution. Copy/Paste into two files called:

test.php -- this file can be renamed whatever you want
product.php -- if change this name, must also change name in both action= attributes of forms

test.php

<form action="product.php" method="get"> <!--  product.html -->
<fieldset>
    <input type="hidden" name="RSS" id="RSS" value="RSS" />
    <input type="submit" value="Go"/>
</fieldset>
</form>

<form action="product.php" method="get">
<fieldset>
    <input type="hidden" name="RSS2" id="RSS2" value="RSS2" />
    <input type="submit" value="Go"/>
</fieldset>
</form>

product.php

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var whichone = $('#xfer').val();
                //alert( whichone );
                $('#' + whichone).show();
            });
        </script>
    </head>
    <body>
        <input type="hidden" id="xfer" value="<?php echo ( isset($_REQUEST['RSS'])  ? 'RSS' : 'RSS2' ) ; ?>">

        <div id="RSS" style="display:none;">
            <h1>RSS DIV</h1>
            Here is some information regarding the RSS div.
        </div><!-- #RSS -->
        <div id="RSS2" style="display:none;">
            <h1>RSS2 DIV</h1>
            <i>Here is some <strong>different </strong>information regarding the RSS2 div.</i>
        </div><!-- #RSS -->
    </body>
</html>

Thanks, but I forgot to mention that for some reason our PHP isn't enabled and the company doesn't want to turn it on. Yeah...I know — mark1178, Oct 18 '13 at 20:21
Not much, they're pretty tight here. We are running on ASP, not sure what version, like I said, they're pretty tight. I've been running around looking for a javascript or jquery version that could work. — mark1178, Oct 20 '13 at 13:25

score 0 · Answer 3 · edited May 23 '17 at 11:57

You can test your request with javascript:

if(location.href.indexOf("RSS=RSS") > 0) {
    var element = document.getElementById('RSS')
    element.id = "RSS2";
    element.name = "RSS2";
    element.value = "RSS2";
}

this is just an indexOf check, u could also parse the whole query string and associate the key/value pairs into an array. See How can I get query string values in JavaScript?

How to change div id name based on form value?

3 Answers3