/    Sign up×
Community /Pin to ProfileBookmark

JavaScript Form Help – My name is Jeremy and I’m a JS Newbie

I have a form which I am trying to have dynamically update and seems to be
running into a brick wall on why the form will not update the “Choose
Product” dropdown. For whatever reason, the JavaScript inside the header
of the page are not communicating these values down to the aforementioned
drop (select) box.

*Note: I did not originally create this code and find myself trying to
absorb something maybe a little above my head.

**Note: As stated in the thread subject, I am a complete JavaScript newb so please go easy on me. I wish to learn and learn it well, not to get trashed by those whose knowledge is far greater than mine. In short, any helpful pointers would be most appreciated.

Here is the JavaScript in the header of the page:
—————————————–


[QUOTE]

<script type=”text/javascript”>
function validate() {
if (document.myform.email.value != “” && document.myform.first_name.value
!=”” && document.myform.last_name.value !=”” &&
document.myform.company_name.value !=”” && document.myform.country.value
!= “” && document.myform.RegionCode.value != “”&&
document.myform.phone.value != “”) {
if (document.myform.email.value.indexOf(“@”) == -1 ||
document.myform.email.value.indexOf(“.”) == -1 ||
document.myform.email.value.indexOf(” “) != -1 ||
document.myform.email.value.length < 6) {
alert(“The email address does not appear to be valid. Please re-enter.”);
} else {
//alert(“Submit”);
document.myform.submit();
}
} else {
alert(“Please enter all required fields.”);
}
} // end of fxn

</script>

<!–// I’m pretty sure the first JavaScript here can be disregarded but I included it just in case. //–>

<script type=”text/javascript”>
<!–//
function changeAction(url)
{
if(url==”nofulfillment.asp”) {
document.myform.action = “nofulfillment.asp”;
}
else if (url==”fulfillment.asp”) {
document.myform.action = “fulfillment.asp”;
}

}
//–>
</script>

<script type=”text/javascript”>
<!–//

function fillCategory(){
// this function is used to fill the category list on load
addOption(document.myform.fulfill, “nofulfillment.asp”, “No not fulfill
trial”, “”);
addOption(document.myform.fulfill, “fulfillment.asp”, “Fulfill trial”, “”);
}

function SelectSubCat(url){
// ON selection of fulfill this function will work

removeAllOptions(document.myform.elements[’00N200000019CLw’]);
addOption(document.myform.elements[’00N200000019CLw’], “”, “–Product–“, “”);

if(url == ‘nofulfillment.asp’){
addOption(document.myform(0).elements[’00N200000019CLw,”Product 01″, “Product 01”);
addOption(document.myform(1).elements[’00N200000019CLw’],”Product 02″, “Product 02”);
addOption(document.myform(2).elements[’00N200000019CLw’],”Product 03″, “Product 03”,
“”);
addOption(document.myform(3).elements[’00N200000019CLw’],”Product 04″, “Product 04”);
addOption(document.myform(4).elements[’00N200000019CLw’],”Product 05″, “Product 05”);
addOption(document.myform(5).elements[’00N200000019CLw’],”Product 06″, “Product 06”);
}
if(url == ‘fulfillment.asp’){
addOption(document.myform(0).00N200000019CLw,”PAFGPCMV03000P0EVDEN”,
“PCmover”);
}

}

function removeAllOptions(selectbox)
{
selectbox.options.length=0;
}

function addOption(selectbox, value, text )
{
var optn = document.myform.createElement(“OPTION”);
optn.text = text;
optn.value = value;

selectbox.options.add(optn);

}

//–>
</script>

[/QUOTE]

Here are the relevant HTML form fields in the body of the page

[QUOTE]

<form name=”myform” method=”POST” action=”fulfillment.asp”>
<fieldset class=”corporate_field”>
<div class=”corporate_signup”>

<table ID=”Table1″>
<tr>
<td>Fulfillment: </td>
<td><select id=”fulfill” name=”fulfill”
onChange=”changeAction(this.value); SelectSubCat(this.value);”>
<option value=””>–Select your fulfillment option–</option>
<option value=”nofulfillment.asp”> Do Not Fulfill Trial
<option value=”fulfillment.asp”> Fulfill Trial
</select></td>
</tr>
<tr>
<td>Choose Product:&nbsp;</td>
<td><select id=”00N200000019CLw” name=”00N200000019CLw”
title=”00N200000019CLw”>
<option value=””>–Product–</option>
</select></td>
</tr>
<tr>
<td>Comments:&nbsp;</td>
<td><textarea name=”description” cols=”30″ rows=”5″ ID=”Textarea1″></textarea></td>
</tr>
<tr><td colspan=2 align=”center” class=”corporate_signup”>
<input type=”submit” style=”width: 80px;” onClick=”validate()” value=”Submit” ID=”Button1″ NAME=”Button1″>
<input type=”hidden” name=”sfga” value=” ” ID=”Hidden2″/>
<input type=hidden name=”retURL” value=”http://www.somedomain.com/corporatetrial/step3.html” ID=”Hidden1″></td></tr>

</table>

</fieldset>
</form>

[/QUOTE]


————————————-

I’m reasonably certain that there is something missing from the HTML form
field (Choose Product) that will pull in the variable set by the
SelectSubCat(url) function, I just don’t know JavaScript well enough for
this to be completely obvious to me.

Any help would be greatly appreciate. I can send the entire page if that
would be considered useful.

Thanks in advance,
-Jeremy Wilson

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@jeremy_wilsonauthorJul 10.2008 — And yes, I realize I violated the posting guidelines with the stupid first attempt at a thread subject. I have now read said guidelines and apologize for the weak attempt at self-deprecation.

-Jeremy
Copy linkTweet thisAlerts:
@toicontienJul 10.2008 — How about something like this?
function validate() {
var form = document.forms.myform;
var els = form.elements;

if ( !isBlank(els.email) &amp;&amp; !isBlank(els.first_name) &amp;&amp; !isBlank(els.last_name) &amp;&amp; !isBlank(els.company_name) &amp;&amp; !isBlank(els.country) &amp;&amp; !isBlank(els.RegionCode) &amp;&amp; !isBlank(els.phone) ) {
if ( validEmail(els.email.value) ) {
form.submit();
} else {
alert("The email address does not appear to be valid. Please re-enter.");
}
} else {
alert("Please enter all required fields.");
}
} // end of fxn

function isBlank(field) {
return (field.value.length &gt; 0) ? true : false;
}

function validEmail(str) {
if (str.indexOf("@") == -1 || str.indexOf(".") == -1 || str.indexOf(" ") != -1 || str.length &lt; 6) {
return false;
} else {
return true;
}
}
Copy linkTweet thisAlerts:
@toicontienJul 10.2008 — Now, add the bold face text to the FORM tag:
&lt;form name="myform" method="POST" action="fulfillment.asp" [B]onsubmit="return validate(this);"[/B]&gt;
The validate function will then change:
function validate(form) {
var els = form.elements;
var r = true;

if ( isBlank(els.email) || isBlank(els.first_name) || isBlank(els.last_name) || isBlank(els.company_name) || isBlank(els.country) || isBlank(els.RegionCode) || isBlank(els.phone) ) {
alert("Please enter all required fields.");
r = false;
} else if ( !validEmail(els.email.value) ) {
alert("The email address does not appear to be valid. Please re-enter.");
r = false;
}
return r;
} // end of fxn

Lastly, remove the onclick attribute from the submit button. This helps to catch all the ways a user can submit a form (by pressing ENTER in a text box for instance) and simplifies your validation logic.
Copy linkTweet thisAlerts:
@jeremy_wilsonauthorJul 10.2008 — Just wanted to drop back in and say a quick thank you for the assistance.

I think I need to repost and try and be a little more specific as to the problem I am experiencing. The form validation works well enough, it was the attempt to populate the "Choose Product" drop down menu with items from the JavaScript array.
×

Success!

Help @jeremy_wilson spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...