StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POReplace HTML based on query string?
text
Body
copied!<p>I've been looking at this <a href="https://stackoverflow.com/questions/901115/get-query-string-values-in-javascript">SO Post</a> in an effort to understand processing query strings. It's been great to see all of the responses. What I'm trying to understand, is how to take this one step further where the supplied query string actually replaces an object in the DOM, such as a specific DIV, and replaces it with another DIV (which could be hidden out of the gate), or just replaces content within the DIV. </p> <p>There are a few resources I've looked at around the web, but nothing that I can get tested up in jsfiddle to work right. <a href="https://stackoverflow.com/questions/6116081/replace-an-img-src-value-based-on-a-referring-urls-query-string">Another post here sort of eludes to this</a>.</p> <p><strong>The goal</strong></p> <p>Have a simple page show a single DIV within the body. When loading the page, the DIV and content is displayed. When loading the page with a ?q=whatever, the content within that DIV is replaced with other content.</p> <p><strong>MY SOLUTION</strong></p> <p>In order to have a DIV dissapea, which was the first issue to resolve, based on a querystring coming through, I implemented this on my page:</p> <pre><code>if (strrpos($_SERVER['REQUEST_URI'], '/landingpage/index.php?q=1') === strlen($_SERVER['REQUEST_URI']) - strlen('/landingpage/index.php?q=1')) { $style = "display: none"; } else { $style = "display: inline"; } </code></pre> <p><strong>I then place this in my DIV:</strong></p> <pre><code><div id="theForm" style="<?php echo $style; ?>"> //Form code here </div> </code></pre> <p>This got me to at least have the DIV clear out if the query string was present. </p> <p>Next step, was to not really clear it out, but replace it with some content.</p> <p><strong>I added the following into my original PHP:</strong></p> <pre><code>$thankYou = "<h1>Thank You for signing up</h1>"; </code></pre> <p>Under the first if, and changed the else to an elseif to capture the non query string code, with potentially some more cases down the road.</p> <p><strong>So the final PHP code looks like this:</strong></p> <pre><code>if (strrpos($_SERVER['REQUEST_URI'], '/landingpage/index.php?q=1') === strlen($_SERVER['REQUEST_URI']) - strlen('/landingpage/index.php?q=1')) { $style = "display: none"; $thankYou = "<h1>Thank You for signing up</h1>"; } elseif (strrpos($_SERVER['REQUEST_URI'], '/landingpage/index.php') === strlen($_SERVER['REQUEST_URI']) - strlen('/landingpage/index.php')) { $style = "display: inline"; $thankYou = ""; } </code></pre> <p>Then it's just a matter of adding in the PHP echo out of the $thankYou variable right before the DIV that will be shown or hidden, and that did it for me.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload