Form Help

[bw83]

I am working on a form that will auto complete a series of URL links when the submit button is hit. Here is the page that I am working on for it http://www.bw83.com/vampwars/links.phpYou can see the three partial URLs that are above the form section that are references for the game what I would like is to make it so a person can enter their ID number into the form and when the submit button is hit it will go to another page where the ***** in the links will be replaced by the ID number and the link will be clickable to open in a _blank target tab. I am pretty sure that it is supposed to be a method="post" from what Ive read but cant really figure how to make it work.

[bw83]

Okay so im not sure if this is the only way that it can be done but i did manage to make it work. http://www.bw83.com/vwtest/links.phpthe submit button works and fills in the inputted numbers at the end of the link. I decided to use a PHP form from the W3SCHOOL website to get it done. If there is a better way im missing feel free to let me know. The output way will be changed to be more visually appealling once im done but making the form work first was my priority.

[jeffman]

I didn't understand what you meant when you first posted. Now I get it.My first question is, if users have an id, why not have a login system of some kind, and then you can store the id in a PHP session variable and add it to the links when the page first downloads? You might find other uses for session data as you work on the project some more.The easier alternative would be to use javascript to change the value of the link. This would keep the page from refreshing and be a nicer user experience. You could add that on your form so that if javascript is turned off, the form goes ahead and does what it does now.To make that work, you'd want to give your links an id, so you can reference them with document.getElementById()If none of this makes sense, just ask what you want more info about.

[bw83]

The users do have an ID but this is actually a help site for a Facebook game that I play that I am also using to learn more on PHP now that I am in the process of redeploying from Iraq and have the free time to do so. Being that its not a site generated ID number I didnt see how the login portion would work as well. I think I understand what you mean about the JS type of form as it was what I was trying for originally but didn't know how so i used what i could find on the W3 website to make it work. I just looked into the website at the javascript section and didnt see anything about forms like it has for the HTML and PHP and so on. Where do you start at to make something like this in JS?

[jeffman]

I'm assuming the addresses on your page will eventually get put into <a> elements, so that's what I'm showing you. Anyway, this is one way of making the changes. Have a look, and then I'll walk you through it.

<script type="text/javascript">	function updateLinks (userID) {		if (userID == "") {			alert("Please enter an ID");		}		else {			var el = document.getElementById("link1");			var base = el.href.split("?")[0];			el.href = base + "?" + userID;		}	}</script>...<a href="mypage.php" id="link1">Link</a><form action="linkss.php" method="post" onsubmit="updateLinks(this.VW_id.value); return false;">	Next VW ID Number: <input type="text" name="VW_id" />	<input type="submit" /></form>

Start with the form tag. We bind some javascript to the form's submit event. The javascript passes the updateLinks() function a reference to the text input's value. this refers to the form itself, and then we work down the name-chain to the input value. There are other ways to do it, but this seemed convenient. The script in the tag returns a value of false. This tells the browser not to submit the form.If javascript is disabled on the user's browser, this code will be ignored and the form will submit normally.Now, look at the script. The updateLinks() function first checks to see if the user entered anything. If not, we put up the alert and return.If the user does submit an ID, we modify the links. I only created one, just to show you how to do it.First, we get a reference to the link through its id property. Glance back at the HTML and notice that I put one into the link.Second, we strip the link down to its base URL. The first time this function runs, that's not important. But we're going to add a query string to the link. What if a user hits the submit button 2 or more times? We don't want to add a query string to a query string. So we chop it down to the base every time. We're doing that with the split method. split() works just like it does in PHP. It turns the string into an array. We're using the ? character as the delimiter. The base of the URL will be the first array element, so we index it with [0]. We don't care about the rest of the array, so we ignore it. If the URL does not contain a ? character, the first array element contains the whole string. We're still okay.Finally, we take a ? and the ID that got passed to the function, and we add them to the link's href property.

[bw83]

Okay so i went through what you said and I would say I understand atleast 99% of it after reading and testing it a few times to make sure. Here is where it got me so farhttp://www.bw83.com/vwtest/links.phpI left it down to a single link just put it inside the table to keep how it would look going but noticed a couple problems. The first one which is probably the more serious one and might even be the easiest to fix is that using the "?" as the split breaks the end of the link off and makes it invalid once they are joined. (this might be able to be fixed with something as simple as using "=" instead just havent got to test it yet and then it would only work for this page and not another page without all links ending in a = sign)The second thing I noticed was that while the final product is designed to be a <a> the initial page where it just shows the URL with ****** at the end was not designed to be a link as it wouldnt work. Now for this example and trying to make it look better I took the ***** off of it as they really had no meaning but to show the user what to replace to do it on their own without the form section but if you notice before using the form the <a> leads to an invalid destination as its missing the ID number. Is there a way to make the text prior to the form not a link or would i have to make it an IF statement for the first set to be available IF there is no ID number and the <a> set to be available IF there is an ID number?The final thing I noticed which depending on the way the second problem gets resolved may not be a problem, the text version of the link does not change when the form is used. I tried to make that using a document.write() and using the el.href variable but nothing showed up at all. I can definitely tell though that the concept is far more user friendly and the load time is greatly improved as even this slow Kuwaiti internet connection handles the form portion quickly. Thank you again for the help so far it has got me thinking about other ideas as I move on to the rest of the site.

[jeffman]

To change the text inside most page elements, use the innerHTML property, as indocument.getElementById("something").innerHTML = "HELLO!";That will work for a table cell, a div, a paragraph, a link, just about anything. The big exceptions are form elements, like buttons and text inputs, where you would change the value property.

[bw83]

So i switched the "?" with "=" and the links now direct to the right location. I'm still struggling using the innerHTML thing to get whatever link1 is to be displayed as the text portion also that way as the URL changes so does the visible text. The current one i left has no display txt although none displayed right http://www.bw83.com/vwtest/links.php

[jeffman]

Is this the part you added?

<script type="text/javascript">var ulink1=document.getElementById("link1").innerHTML;document.write(ulink1);</script>

Yeah, this is not even close to what you want. (I don't even want to tell you what this code actually does, or tries to do.) In the earlier version, you just printed the URL in this spot, right? So put that back if that's how it's supposed to look. Or I guess it could start off blank. That's your call.All you really need, I think, is a little addition to the function I gave you. I'll pick it up at the relevant section:

else {	var el = document.getElementById("link1");	var base = el.href.split("=")[0];	el.href = base + "=" + userID;	el.innerHTML = el.href;}

So now the text of the link is exactly the same as the URL plus user ID. I think that's what you want.

[jeffman]

Now that I think about this some more, I bet working with the href property is going to make your URL text look pretty ugly. That's because the browser will normalize the URL instead of leaving it partial.Maybe the thing to do is start off with the partial URL in the text section and work with the value of the innerHTML rather than the href. I'm just discussing the text part, now. What you're doing to the href property is fine.I hope that makes sense.

[bw83]

Thank you for the help I was able to get it setup to work for all three links using that last method. I'm still stuck in Kuwait for a few more days with nothing to do so I am going to read up on the innerHTML because while I got it to work I understand all the rest of what you did completely just not that. Its 2am over here so for now I'm going to bed. Thanks again for the help, this way is definitely a faster load time and seems to be much more user friendly.

[jeffman]

Glad I could be some help. innerHTML was actually designed for more than just text, but sometimes the other tasks don't work as expected. Another thread is discussing that right now. When it does work, nothing beats it.Godspeed.