/    Sign up×
Community /Pin to ProfileBookmark

Weird Problem with JS, form and DIV’s

Hi all, this is my first post here…so please be gentle 🙂

I’m having a really irritating problem with a form that I’ve created. Basically I’m doing some client side validation on the form before it gets submitted. Obviously to do this I need to get the value of the form elements. Part of the code is also hidden/displayed using CSS and so it’s in a DIV element. The problem arrises when I try to read the value of the elements within the DIV…The code is below and is XHTML 1.0 valid. The most annoying thing though is that if I take the <select> element out of the DIV then it works….

The form…
<form enctype=”multipart/form-data” method=”post” action=”” name=”main_form” onsubmit=”return validator();”>

<input name=”headline” type=”text” value=”Enter Headline” size=”80″ maxlength=”200″ />
<input type=”hidden” name=”posted” value=”true” />

<div id=”options”>
<select name=”related1″>
<option value=”headline”>Headline Article</option>
<option value=”other”>Other Article</option>
</select>
</div>

<input type=”submit” />
</form>

And the Javascript…

function validator() {
var value = document.getElementsByName(‘related1’)[0].value;
}
return false;
}

I’ve also tried…

var value = document.main_form.related1.value;

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@okiiyamaApr 25.2006 — I don't know why what you are doing doesn't wouldn't work, but you may get around it doing this with:
[code=html]
<form name="form01">
<input type="hidden" name="selectValue">
<div>
<select name="select01" onchange="document.form01.selectValue.value = this.value;">
<option value="1">1
<option value="2">2
<option value="3">3
</select>
</div>
</form>
[/code]
Copy linkTweet thisAlerts:
@James_GatkaApr 25.2006 — Try this instead. I hid the DIV and selected the 'other' option, for testing. Note the boldface changes.

[CODE]<html>
<head>
<script type="text/javascript">

[B]function validator(nForm){[/B]
var nSelect = nForm['related1'].value;
alert(nSelect);
return false;
}

</script>
</head>
<body>

<form enctype="multipart/form-data" method="post" action="" name="main_form" onsubmit="return [B]validator(this);">[/B]

<input name="headline" type="text" value="Enter Headline" size="80" maxlength="200" />
<input type="hidden" name="posted" value="true" />

<div id="options" [B]style='display:none'>[/B]
<select name="related1">
<option value="headline">Headline Article</option>
<option value="other" [B]selected[/B]>Other Article</option>
</select>
</div>

<input type="submit" />
</form>

</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@xenonflxauthorApr 25.2006 — Hi Guys,

Thanks for you replies. Unfortunately I still can't get it to work. Another piece of the puzzle though...

I'm using CSS to get style display attribute and hiding the select element using javascrip with <body onload...>. I then show it by using element.style.display = 'block'

If I keep the form structure the same but remove the div id tag it works...
Copy linkTweet thisAlerts:
@James_GatkaApr 25.2006 — xenonflx:

Did you test the code I posted AS IS? Copy it, then save it as an .html document. Open that document and click Submit.

You are trying to address form fields by id, when you should be addressing them by name.

document.forms[0]['someName'].value;

Never mind. I can tell this is going down the wrong road. One bad sign is that you don't address people by NAME, either.

I quit.
×

Success!

Help @xenonflx 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...