Can the input value of a form be appended directly to the end of a href?

Question

I have an Instant Message feature on my site which uses a popup window. When a user makes an IM post, their picture is added to the post. I am able to save on a database query for each IM post (so the popup does not have to query the database to retrieve the user's picture for each post) by retrieving the stored user pic file name from a form (UserPicStorage...a separate query is not required to grab $sql['picture']...it's already present on each of the main pages when these pages load) on each of 5 non-popup, main pages (one page is an exception, see below) of my site as follows:

<form id="UserPicStorage"><input type="hidden" name="UserPic" value="<?=     
$sql['picture'] ?>"></form>

I have an About Us page which does not need a database query to load. So to save a query if a user posts an Instant Message while on the About Us, I pass $sql['picture'] to the a href as follows:

<a href="about.php?userpic=<?= $sql['picture'] ?>">About Us</a>

so the popup can retrieve the userpic if there is an IM post while the user is on About Us.

However, the user can use AJAX on one of the 6 main pages to change his/her user picture. So I can't use this:

<a href="about.php?userpic=<?= $sql['picture'] ?>">About Us</a>

because if the user changes his/her photo, $sql['picture'] (which was valid on page load) is no longer the current photo. I did a lot of searching, but could find nothing to support something like the following method:

<a href="about.php?userpic=document.forms.UserPicStorage.UserPic.value">About Us</a>

I tried this and simply passed the literal string document.forms.UserPicStorage.UserPic.value. So did the following:

<a href="about.php?userpic='document.forms.UserPicStorage.UserPic.value'">About Us</a>

Is there any way to append the input value of a form directly to the a href?

Answer 1

You should just use

<a href="about.php?userpic=<?= $sql['picture'] ?>">About Us</a>

(well, probably you should encode $sql['picture'])

And when you make the AJAX request, update it as a success callback:

ajax.onreadystatechange = function() {
    if (ajax.readyState===4 && ajax.status >= 200 && ajax.status < 300) {
         /* AJAX successful */
         myAnchor.src = "about.php?userpic=" + encodeURIComponent(
             document.forms.UserPicStorage.elements.UserPic.value
         );
    }
};