HTML/Javascript Form Help Please

[viskonriddle]

Hi.

So I'm working on a website, and I'm trying to create a form that checks the input to see whether it matches a predetermined thing, and if it does, reveal a hyperlink (must not be seen by the user, even if they view source); otherwise show a message like :nuts:"Sorry invalid input, please try again."

Otherwise, apparently that are forms that can add stuffs to the hyperlink, like if on domain.com/subdomain/folder/file.htm I insert the form, and whatever the user submits into the form (together with some numbers) is put into the URL, like domain.com/subdomain/folder/(input)(numbers).htm.
Does anyone know how to do either of these?

I've got some random thing here, but I'm not sure what to do with it.

<form action="check/check" method="get">
<input type="text" name="name">
<input type="text" name="place">
<input type="submit" value="submit query.">

</form>

Thanks in advance.

 

[as4s1n]

For the first, you could try to create an element using javascript when the input is correct

function validateForm() {
// Get the variables
var
name = document.getElementById("name").value, // Value of name field
place = document.getElementById("place").value, // Value of place field
linkURL = "LINK URL", // Where the link would take the user
linkText = "", // Text of created link
div = document.getElementById("event"), // Where the hyperlink will be placed under (divs usually)
nameValue = "predeterminedValue", // Value name will be to show the link
placeValue = "predeterminedValue"; // Value place will be to show the link

// If both fields meet the requirements you specified
if(name == nameValue && place == placeValue) {
 var a = document.createElement("a"); // Create the ANCHOR tag
 div.innerHTML = ""; // Clear the error message
 div.appendChild(a); // Add it to the document
 a.setAttribute("href",""+linkURL);
 a.innerHTML = linkText;
}
else {
// Check whether the element has been created otherwise remove nothing
 if(a != null) 
  div.removeChild(); // Remove the link from the page
 div.innerHTML = "Invalid Input"; // Write an error message where the link would be
}
}
}

<form action="javascript:void(0)" method="get" id="form">
<input type="text" name="name" id="name">
<input type="text" name="place" id="place">
<input type="submit" value="submit query." onclick="validateForm()">
</form>
<!-- Where the link appears -->
<div id="event">
</div>

That should work

As for the second, the "GET" method puts the value into the url. E.G. filename.html?name=value&&place=value

Note: If you do not want the user to see the link just put the whole script on an external script (call the file 'validate.js' and reference by: <script type="text/javascript" src="directory/validate.js"></script>).

If you have more than one for the answers you could make two arrays called "answers." Try this

function validateForm() {
// Get the variables
var
i,
j,
k,
l,
name = document.getElementById("name").value, // Value of name field
place = document.getElementById("place").value, // Value of place field
linkURL = "LINK URL", // Where the link would take the user
linkText = "This is the link text", // Text for the ilnk (REQUIRED)
div = document.getElementById("event"); // Where the hyperlink will be placed under (divs usually)

// Easily organized array of data (answers)
// Answers for "name" field
var nameAnswers = new Array();
nameAnswers[0]="value";
nameAnswers[1]="value2";
// etc.

// Answers for "place" field
var placeAnswers = new Array();
placeAnswers[0]="value";
placeAnswers[1]="value2";

var pAnswersLength = placeAnswers.length;
var nAnswersLength = nameAnswers.length;
// Check each whether it works
for(i in nameAnswers) {
 // If name is not equal to any of the answers, keep trying
 if(name != nameAnswers[i] && i != nAnswersLength) {
  continue;
  j = 0;
 // If name equals one, it stops the loop and runs the code
} else {
 j=1;
  break;
}
}

for(l in placeAnswers) {
	// If place is not equal to any of the answers, keep trying
	if(place != placeAnswers[l] && l != pAnswersLength) {
	 continue;
	 k = 0;
	} else {
	 // If place equals one, it stops the loop and runs the code
	 k = 1;
         break;
	}
}
if(j > 0 && k > 0) {

 var a = document.createElement("a"); // Create the ANCHOR tag
 div.innerHTML = ""; // Clear the error message
 div.appendChild(a); // Add it to the document
 a.setAttribute("href",""+linkURL);
 a.innerHTML = "this is a test";
}
else {
// Check whether the element has been created otherwise remove nothing
 if(a != null) 
  div.removeChild(); // Remove the link from the page
 div.innerHTML = "Invalid Input"; // Write an error message where the link would be
}
}

Please note I used javascript:void(0) as the value for the action attribute of the form tag, that just means it does not go anywhere, which I assumed is what you are talking about because the link shows up on the same page.

 

[Submariner]

Any JavaScript file that gets run on the end users browser can be seened by the user if they really want to see it. The only way to not have it availble to the end user is if it is run on the server and forwarded back to the client box (i.e. script and validation routine not sent to client, only data to display). The validate.js would still end up in the users browser history/cache and can be viewed very easily.

 

[as4s1n]

That is true but then there would not be any javascript. I suppose the true solution would be to send the form values through a PHP script and send the link if the values were true

$name = $_POST['name']; # Value in name field
$place = $_POST['place']; # Value in place field
$nValue = "value"; # Predetermined value of name
$pValue = "value"; # Predetermined value of place
$linkURL = "value"; # Link destination if it works
$linkText = "value"; # Text the link displays
$errors = "";
$badForm = 0;

if($name != $nValue)  {
 $errors .= "Wrong name ";
$badForm++;
}
if($place != $pValue) {
 $errors .= "Wrong place ";
$badForm++;
}

if($badForm > 0)
 echo "Errors: "$errors;
else {
 echo "<a href=\"$linkURL\">$linkText</a>";
}

(save this as form.php)

HTML form

<form action="form.php" method="POST" id="form">
<input type="text" name="name">
<input type="text" name="place">
<input type="submit" value="submit query.">
</form>

Hope this helps

Note: I changed the form from GET to POST so now the values will not be in the URL, if you wish to change it change the METHOD attribute in the form tag and change the superglobals to $_GET from $_POST