/    Sign up×
Community /Pin to ProfileBookmark

problem clearing fields

Copy linkTweet thisAlerts:
Jan 17.2005

Hi,

if you could look at: –
[url]http://www.privatedemo.apc-compunet…ev/1/reg_02.php[/url]

the css file isn’t uploaded btw.

but if you notice i have a clear button on every fieldset, how can i get it to just clear the fields within that fieldset here is the code in full: –

If it is a javascript question i will post again in javascript unless some1 can help

[CODE]
<body>
<?php if(isset($errors) && $errors){ ?>
<?php echo $error_msg; ?><br>
<?php } ?>
<div class=”outsidediv”>
<form method=”post” action=”<?PHP echo “”.$_SERVER[‘PHP_SELF’].”?val=1″; ?>”>
<fieldset>
<legend>Personal Information</legend>
<p class=”form”>
<label>*Salutation:</label>
<select name=”Salutation” tabindex=”1″>
<option value=”Mr” <?PHP if ($_POST[Salutation] == “Mr”) { echo “selected”; } ?>>Mr</option>
<option value=”Miss” <?PHP if ($_POST[Salutation] == “Miss”) { echo “selected”; } ?>>Miss</option>
<option value=”Mrs” <?PHP if ($_POST[Salutation] == “Mrs”) { echo “selected”; } ?>>Mrs</option>
<option value=”Ms” <?PHP if ($_POST[Salutation] == “Ms”) { echo “selected”; } ?>>Ms</option>
<option value=”Dr” <?PHP if ($_POST[Salutation] == “Dr”) { echo “selected”; } ?>>Dr</option>
</select>
</p>
<p class=form>
<label>*First Name:</label>
<input name=”FirstName” type=”text” tabindex=”2″ size=”25″ maxlength=”50″ value=”<?php echo $_POST[‘FirstName’]; ?>”>
</p>
<p class=form>
<label>*Last Name:</label>
<input name=”LastName” type=”text” tabindex=”3″ size=”25″ maxlength=”50″ value=”<?php echo $_POST[‘LastName’]; ?>”>
</p>
<p class=”form”>
<label>*Display Name:</label>
<input name=”DisplayName” type=”text” tabindex=”4″ size=”25″ maxlength=”12″ value=”<?php echo $_POST[‘DisplayName’]; ?>”>
</p>
<p class=”form”>
<label> Gender:</label>
<input name=”OPT_Gender” type=”radio” value=”Male” <?PHP if ($_POST[OPT_Gender] == “Male”) { echo “checked”; } ?> tabindex=”5″>Male
<input name=”OPT_Gender” type=”radio” value=”Female” <?PHP if ($_POST[OPT_Gender] == “Female”) { echo “checked”; } ?> tabindex=”6″>Female
</p>
<p class=”form”>
<label>*Birth Date:</label>
<select name=”DOB_Day” tabindex=”7″>
<option value=”1st” <?PHP if ($_POST[DOB_Day] == “1st”) { echo “selected”; } ?>>1st</option>
</select>
<select name=”DOB_Month” tabindex=”8″>
<option value=”January” <?PHP if ($_POST[DOB_Month] == “January”) { echo “selected”; } ?>>January</option>
</select>
<input name=”N_DOB_Year” type=”text” tabindex=”9″ size=”11″ maxlength=”4″ value=”<?php echo $_POST[‘N_DOB_Year’]; ?>”>
</p>
<p align=”right”>
<input name=”personal” type=”reset” class=”buttons” id=”personal” value=”Clear”>
</p>
</fieldset>
<fieldset>
<legend>Language</legend>
<p class=”form”>
<label>*Default Language:</label>
<select name=”Language” tabindex=”10″>
<option value=”English” <?PHP if ($_POST[Language] == “English”) { echo “selected”; } ?>>English</option>
</select>
</p>
<p align=”right”>
<input name=”language” type=”reset” class=”buttons” id=”language” value=”Clear” src=”<?PHP echo $_SERVER[‘PHP_SELF’]; ?>”>
</p>
</fieldset>
<fieldset>
<legend>Account Information</legend>
<p class=”form”>
<label>*Username:</label>
<input name=”U_Username” type=”text” tabindex=”11″ id=”Username” size=”25″ maxlength=”50″ value=”<?php echo $_POST[‘U_Username’]; ?>”>
</p>
<p class=”form”>
<label>*Password:</label>
<input name=”P_Password” type=”password” tabindex=”12″ id=”Password” size=”25″ maxlength=”50″ value=”<?php echo $_POST[‘P_Password’]; ?>”>
</p>
<p class=”form”>
<label>*Retype Password:</label>
<input name=”OPT_Password_Retype” type=”password” tabindex=”13″ id=”Password Retype” size=”25″ maxlength=”50″ value=”<?php echo $_POST[‘OPT_Password_Retype’]; ?>”>
</p>
<p class=”form”>
<label>*Email Address:</label>
<input name=”E_EmailAddress” type=”text” id=”E_EmailAddress” tabindex=”14″ size=”37″ maxlength=”150″ value=”<?php echo $_POST[‘E_EmailAddress’]; ?>”>
</p>
<p align=”right”>
<input name=”account” type=”reset” class=”buttons” id=”account” value=”Clear” src=”<?PHP echo $_SERVER[‘PHP_SELF’]; ?>”>
</p>
</fieldset>
<?php
if ($Type == “B”) {
?>
<fieldset>
<legend>Business Information</legend>
<p class=”form”>
<label>*Business Name:</label>
<input name=”BusinessName” type=”text” tabindex=”1″ size=”25″ maxlength=”50″ value=”<?php echo $_POST[‘BusinessName’]; ?>”>
</p>
<p class=”form”>
<label>*Trading Name:</label>
<input name=”TradingName” type=”text” tabindex=”2″ size=”25″ maxlength=”50″ value=”<?php echo $_POST[‘TradingName’]; ?>”>
</p>
<p class=”form”>
<label>*Display Name:</label>
<input name=”BusinessDisplayName” type=”text” tabindex=”3″ size=”25″ maxlength=”12″ value=”<?php echo $_POST[‘BusinessDisplayName’]; ?>”>
</p>
<p align=”right”>
<input name=”Address” type=”reset” class=”buttons” id=”Address” value=”Clear” src=”<?PHP echo $_SERVER[‘PHP_SELF’]; ?>”>
</p>
</fieldset>
<?php
}
?>
<fieldset>
<legend>Address Information</legend>
<p class=”form”>
<label>*Address Line 1:</label>
<input name=”Address1″ type=”text” tabindex=”1″ size=”37″ maxlength=”50″ value=”<?php echo $_POST[‘Address1’]; ?>”>
</p>
<p class=”form”>
<label>*Town / City:</label>
<input name=”town” type=”text” tabindex=”1″ size=”25″ maxlength=”50″ value=”<?php echo $_POST[‘town’]; ?>”>
</p>
<p class=”form”>
<label>*Country:</label>
<select name=”country” id=”country” onChange=”popStates()” tabindex=”2″>
<option selected>Please Select</option>
<option value=”USA”>USA</option>
<option value=”United States”>England</option>
<option value=”Canada”>Canada</option>
</select>
</p>
<div id=”statedisplay”>
<p class=”form”>
<label id=”statelbl”>*State:</label>
<select name=’slctState’ id=’slctState’ tabindex=”3″>
<option selected>Please Select</option>
</select>
</p>
</div>
<p class=”form”>
<label id=”postcodelbl”>*Postcode:</label>
<input name=”Postcode” type=”text” tabindex=”4″ id=”Postcode” size=”14″ maxlength=”10″>
</p>
<p align=”right”>
<input name=”Address” type=”reset” class=”buttons” id=”Address” value=”Clear” src=”<?PHP echo $_SERVER[‘PHP_SELF’]; ?>”>
</p>
</fieldset>
<p class=”proccess”>
<input name=”clear” type=”reset” tabindex=”4″ class=”buttons” value=”Clear All”>
<input name=”next” type=”submit” tabindex=”5″ class=”buttons” id=”next” value=”Confirm”>
</p>
</form>
</div>
</body>
[/CODE]

Thanks
Adam

p.s. sorry about the long code ?

to post a comment
JavaScript

23 Comments(s) ↴

Copy linkTweet thisAlerts:
@JonaJan 17.2005 — [font=trebuchet ms]You could just use different FORM elements, instead of putting them all into one. But if you must use one, I suppose you could make the Clear buttons run a recursive bubbling function to locate the FIELDSET tag that they are in, and once that object is discovered, run a recursive function to find all of the children of that specific FIELDSET object and if the current elment in the loop is an INPUT and its TYPE is "text," clear out all of its contents. That's the first way that comes to mind. There's likely to be a better way. (Perhaps something such as sending the name of the "clear" button so that the function knows when to start and stop clearing fields.)[/font]
Copy linkTweet thisAlerts:
@k0r54authorJan 17.2005 — if it was in there own forms though, how would i create the clear all?

Thanks

Adam
Copy linkTweet thisAlerts:
@JonaJan 17.2005 — [i]Originally posted by k0r54 [/i]

[B]if it was in there own forms though, how would i create the clear all?[/B][/QUOTE]

<i>
</i>&lt;label&gt;&lt;input type="reset" value="Clear"&gt;&lt;/label&gt;
Copy linkTweet thisAlerts:
@k0r54authorJan 17.2005 — Hi, sorry


no how could i clear all the forms i think either way it is going to be difficuilt but for me it would prob be easier if there was only one form.

Thanks

Adam
Copy linkTweet thisAlerts:
@JonaJan 17.2005 — [font=trebuchet ms]If there was only one FORM object, you put the code I just posted previously inside that form, and all of the text boxes will be cleared when you click it.[/font]
Copy linkTweet thisAlerts:
@CharlesJan 17.2005 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

</head>

<body>

<form action="some-script.pl">

<fieldset>

<label>Foo<input type="text" value="Foo"></label>

<label>Bar<input type="text" value="Bar"></label>

<script type="text/javascript">

<!--

document.write ('<button onclick="var e, i = 0; while (e = this.parentNode.getElementsByTagName('INPUT')[i++]) {e.value = ''}">Clear</button>')

// -->

</script>

</fieldset>

<fieldset>

<label>Foo<input type="text" value="Foo"></label>

<label>Bar<input type="text" value="Bar"></label>

<script type="text/javascript">

<!--

document.write ('<button onclick="var e, i = 0; while (e = this.parentNode.getElementsByTagName('INPUT')[i++]) {e.value = ''}">Clear</button>')

// -->

</script>

</fieldset>

<button type="Reset">Reset</button>

<button type="submit">Submit</button>

</form>

</body>

</html>[/font]
Copy linkTweet thisAlerts:
@k0r54authorJan 17.2005 — Hi, that doesn't work ???
Copy linkTweet thisAlerts:
@CharlesJan 17.2005 — Actually, it works fine. It's just that a wee syntax error crept in when I cut and pasted the example. This board hides back slashes unless you "toothpick".

[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

</head>

<body>

<form action="some-script.pl">

<fieldset>

<label>Foo<input type="text" value="Foo"></label>

<label>Bar<input type="text" value="Bar"></label>

<script type="text/javascript">

<!--

document.write ('<button onclick="var e, i = 0; while (e = this.parentNode.getElementsByTagName('INPUT')[i++]) {e.value = ''}">Clear</button>')

// -->

</script>

</fieldset>

<fieldset>

<label>Foo<input type="text" value="Foo"></label>

<label>Bar<input type="text" value="Bar"></label>

<script type="text/javascript">

<!--

document.write ('<button onclick="var e, i = 0; while (e = this.parentNode.getElementsByTagName('INPUT')[i++]) {e.value = ''}">Clear</button>')

// -->

</script>

</fieldset>

<button type="Reset">Reset</button>

<button type="submit">Submit</button>

</form>

</body>

</html>[/font]
Copy linkTweet thisAlerts:
@k0r54authorJan 17.2005 — Is there a way it can also clear option and selects ??

document.write ('<button onclick="var e, i = 0; while (e = this.parentNode.getElementsByTagName('INPUT')[i++]) {e.value = ''}">Clear</button>')

Thanks

Adam
Copy linkTweet thisAlerts:
@CharlesJan 17.2005 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<script type="text/javascript">

<!--

function clearSet (f) {

var e, i = 0;

while (e = f.parentNode.getElementsByTagName('INPUT')[i++]) {if (e.type == 'text') e.value = ''}

i = 0;

while (e = f.parentNode.getElementsByTagName('SELECT')[i++]) {e.selectedIndex = 0}

}

// -->

</script>

</head>

<body>

<form action="some-script.pl">

<fieldset>

<label>Foo <input type="text" value="Foo"></label>

<label>Bar <input type="text" value="Bar"></label>

<label>Giant Says <select>

<option>Fee</option>

<option>Fie</option>

<option>Foe</option>

<option selected>Fum</option>

</select></label>

<script type="text/javascript">

<!--

document.write ('<button onclick="clearSet (this)">Clear</button>')

// -->

</script>

</fieldset>

<fieldset>

<label>Foo <input type="text" value="Foo"></label>

<label>Bar <input type="text" value="Bar"></label>

<label>Giant Says <select>

<option>Fee</option>

<option>Fie</option>

<option>Foe</option>

<option selected>Fum</option>

</select></label>

<script type="text/javascript">

<!--

document.write ('<button onclick="clearSet (this)">Clear</button>')

// -->

</script>

</fieldset>

<button type="Reset">Reset</button>

<button type="submit">Submit</button>

</form>

</body>

</html>[/font]
Copy linkTweet thisAlerts:
@JonaJan 18.2005 — [font=trebuchet ms]To uncheck all checkboxes and radio buttons, you can also change the following line in Charles's code:[/font]

<i>
</i>while (e = f.parentNode.getElementsByTagName('INPUT')[i++]) {if (e.type == 'text') e.value = ''}


[font=trebuchet ms]Into:[/font]

<i>
</i>while (e = f.parentNode.getElementsByTagName('INPUT')[i++]) {if (e.type == 'text') e.value = ''; else if(e.type == 'checkbox' || e.type == 'radio') e.checked = false}
Copy linkTweet thisAlerts:
@k0r54authorJan 18.2005 — Hi,

This is not working ???

[CODE]
<script language='javascript' type='text/javascript'>

<!--
function clearSet (f) {
var e, i = 0;
while (e = f.parentNode.getElementsByTagName('INPUT')[i++]) {if (e.type == 'text') e.value = '';
else if(e.type == 'checkbox' || e.type == 'radio') e.checked = false}
}
// -->
</script>
[/CODE]

With the button
[CODE]
 <script type="text/javascript">
<!--
document.write ('<button class"buttons" onclick="clearSet (this)">Clear</button>')
// -->
</script>
[/CODE]

?? thanks

k0r54
Copy linkTweet thisAlerts:
@JonaJan 18.2005 — [font=trebuchet ms]The link you originally posted doesn't work. If you've been updating the page, you might want to post the correct link so that we are able to see it in action and observe any errors that occur. Speaking of which, what error occured when you ran the script? Your button is missing an equals sign for its CLASS attribute, and there is no need to escape the double-quotes when the document.write method makes use of single-quotes. If the function is at fault, you might try adding brackets and/or removing the "else" part.[/font]
Copy linkTweet thisAlerts:
@k0r54authorJan 18.2005 — The is no error it just doesn't clear the box?

I have now put the = in ??
Copy linkTweet thisAlerts:
@CharlesJan 18.2005 — Try:

[font=monospace]<script type="text/javascript">

<!--

function clearSet (f) {

var e, i = 0;

while (e = f.parentNode.getElementsByTagName('INPUT')[i++]) {

if (e.type == 'text') {

e.value = ''

} else if (e.type == 'checkbox' || e.type == 'radio') {

e.checked = false

}

}

i = 0;

while (e = f.parentNode.getElementsByTagName('SELECT')[i++]) {e.selectedIndex = 0}

}

// -->

</script>[/font]

If that doesn't work then we need to see the rest of the page, and we need to make certain that some typing error hasn't crept in. Post a link to the troublesome page and note, the example's posted only work if the buttons are child nodes of a FORMSET. If they are more distant descendants then we will have to adjust.
Copy linkTweet thisAlerts:
@k0r54authorJan 18.2005 — Hi,

The link is : -

http://www.privatedemo.apc-compunet.co.uk/webdev/1/reg_02.php

the css file isn't uploaded btw

Thanks

Adam
Copy linkTweet thisAlerts:
@CharlesJan 18.2005 — Exactly as I had thought. Your buttons are not children of a FIELDSET. Get rid of those P elements, they're for [i]paragraphs[/i], and use CSS for layout.
Copy linkTweet thisAlerts:
@k0r54authorJan 18.2005 — Hi,

Ok the problem is aligning it to the right, also the space between each box is not right when there is no <p> ??

Is it bad to use that?

Thanks

Adam
Copy linkTweet thisAlerts:
@CharlesJan 18.2005 — You can use CSS for all that. Your HTML needs to express the [i]meaning[/i] of you document. The P elemenmt is for paragraphs. If you have no paragraph then you should have no P.

The example I gave, each button upon being clicked goes to its immediate parent and then works its magic on all of that parent's descendents. The way you have things, that parent is the P element, not the FIELDSET.
Copy linkTweet thisAlerts:
@JonaJan 18.2005 — [font=trebuchet ms]Charles is right, you should be using LABEL tags instead of P tags. I [url=http://www.cmmwebdesign.com/blog/chronicles/2004/12/12/displaying-your-forms]pondered this myself[/url] at one time, and arrived at what I believe to be a feasible solution. (Although I would like to study more on how the HTML and CSS should behave across all platforms and browsers in my free time.)

Charles, if you're interested, could you "human validate" the way I do forms, please? You don't have to if you don't want to, or if you can't find the time; I don't mean to put any additional burden on you. I know it's off topic, but I'd like to hear from you that I'm doing things correctly -- you're someone who is straight to the point and not afraid to tell me how wrong I am. ? [/font]
Copy linkTweet thisAlerts:
@k0r54authorJan 18.2005 — Hi, yes that is really good, if you do find the time if you could post it on this thread i would be much abliged as i would like that aswell.

Many Thanks

Adam
Copy linkTweet thisAlerts:
@JonaJan 18.2005 — [i]Originally posted by k0r54 [/i]

[B]Hi, yes that is really good, if you do find the time if you could post it on this thread i would be much abliged as i would like that aswell.[/B][/QUOTE]

[font=trebuchet ms]Did you get your problem solved (just curious)?[/font]
Copy linkTweet thisAlerts:
@k0r54authorJan 18.2005 — Yes, i did thank you, i just asigned a class to the button, didn't quite give me the space i wanted from the txt box to the button, but other than that it worked ?

onto my next css problem now anyway lol, i think im cloggin up the css board ?

Any thanks jona and Charles and every1 ? hope to here soon
×

Success!

Help @k0r54 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.8,
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,
)...