Hi,
To start, there’s no need to make the button a submit button. You can use a plain old <button> element and set its onclick attribute to be the name of the Javascript function to execute when the button is clicked. For example:
<button onclick="showResults()">SUBMIT</button>
Next, add the div where you want the links to appear and set its CSS property to display: none so it will be hidden by default.
Finally, in the showResults function that gets called when the button is clicked, populate the div and show it by setting its display property to block:
function showResults() {
// Do some stuff.
document.getElementById("myDiv").style.display = "block";
}
Hope that helps.
Thread Starter
fafjh
(@fafjh)
Donna, thank you so much for your help. I’ve struggled a bit to get the syntax right, but your advice was VERY helpful. I started building my page in TextWrangler so that I can check my work on my local server, which has made it a lot easier. But, although I’ve gotten it to work on my local server, I haven’t been able to translate it to WordPress. Research has directed me to add “wp_enqueue_script()”, but the div that I populate on my local host remains blank on my wp site. I imagine that the javascript is not being executed, but I can’t figure out how to fix that.
I also have a second, unrelated question: how can I make the output from the document.write command populate the div rather than opening in a new window?
Here is my current js code:
[Large code excerpt removed by moderator per forum rules. Please use the pastebin for all large code excerpts. It works better anyway.]
Thank you, again, so much for your help.
Thread Starter
fafjh
(@fafjh)
Donna, thank you so much for your help. I’ve struggled a bit to get the syntax right, but your advice was VERY helpful. I started building my page in TextWrangler so that I can check my work on my local server, which has made it a lot easier. But, although I’ve gotten it to work on my local server, I haven’t been able to translate it to WordPress. Research has directed me to add “wp_enqueue_script()”, but the div that I populate on my local host remains blank on my wp site. I imagine that the javascript is not being executed, but I can’t figure out how to fix that.
I also have a second, unrelated question: how can I make the output from the document.write command populate the div rather than opening in a new window?
Here is my current js code:
<script type="text/javascript">
function showResults()
{
var x = 0;
var y = 0;
var z = 0;
intensity = Number(document.getElementById("x").value)
distance = Number(document.getElementById("y").value)
objective = Number(document.getElementById("z").value)
score_build = (x + y + z);
var var1 = new Array();
if (score_build <= 4) {
var1[0] = "a";
var1[1] = "b";
var1[2] = "c";
}
if (4 < score_build < 8) {
var1[0] = "d";
var1[1] = "e";
var1[2] = "f";
}
var varurl = new Array();
if (score_build <= 4) {
varurl[0] = "urla";
varurl[1] = "urlb";
varurl[2] = "urlc";
}
if (4 < score_build < 8) {
varurl[0] = "urld";
varurl[1] = "urle";
varurl[2] = "urlf";
}
for (var i=0;i<var1.length;i++) {
document.write(var1[i].link(varurl[i])+"<br />");
}
}
</script>
And html code:
<body>
<h4>Select your criteria:</h4>
<br />
<br />
<columns><span3>
<form name="myform" action="" method="post">
Variable X:
<br />
<select id="x">
<option value="">Select:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</span3>
<span3>
Variable Y:
<br />
<select id="y">
<option value="">Select:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</span3><span3>
Variable Z:
<br />
<select id="z">
<option value="">Select:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</span3>
<button type="button" onclick="showResults()">SUBMIT</button>
</form>
<div id="results">
<p>Check out these options:</p>
</div>
</body>
</html>
Thank you, again, so much for your help.
