/    Sign up×
Community /Pin to ProfileBookmark

Show hide form fields based on calculation value shown in another field

Copy linkTweet thisAlerts:
Apr 15.2016

I am looking for assistance in creating a javascript that will hide the fields ‘field1’ ‘field2’ and ‘field3’ if the value contain within a field ‘total’ is less than 34.00 The field total is a variable calculation based on the user selection which works fine, however I can’t get the Show/Hide to functionality to work and need help with a JavaScript.

(I have also been advised it may be required that you use a setTimeout() as the calculation might be done after your JavaScript function) but not sure how to integrate that as well??
Below is my script so far…

<script type=”text/javascript”>
function displayField()
{
if ($(‘#total’).val() < 34)
document.getElementById(‘field1’).style.display=”none”;
document.getElementById(‘field2’).style.display=”none”;
document.getElementById(‘field3’).style.display=”none”;
}
else
{
document.getElementById(‘field1’).style.display=””;
document.getElementById(‘field2’).style.display=””;
document.getElementById(‘field3’).style.display=””;
}
</script>

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Apr 15.2016 — Your if statement is missing the opening brace.

"Curly quotes" will kill a script.

"display" must be one of these: none|block|inline|inline-block;
Copy linkTweet thisAlerts:
@daknoxyauthorApr 15.2016 — Your if statement is missing the opening brace.

"Curly quotes" will kill a script.

"display" must be one of these: none|block|inline|inline-block;[/QUOTE]


Hi Kevin the javascript is to use within rsforms and the example they show uses "Curly quotes" etc, are you able to help based on this info?

https://www.rsjoomla.com/support/documentation/rsform-pro/custom-scripting/show-or-hide-fields.html
Copy linkTweet thisAlerts:
@daveyerwinApr 15.2016 — [CODE]

<!doctype html>
<head>
<title>Title of the document</title>
</head>
<body>
<input id=field1>
<input id=field2>
<input id=field3>
<br>
<input id=field4 onchange=hideShow()>
<script>
function hideShow(){
if (field4.value < 34){
field1.style.display="none";
field2.style.display="none";
field3.style.display="none";
} else {
field1.style.display="";
field2.style.display="";
field3.style.display="";
}
}
</script>
</body>
</html>

[/CODE]
Copy linkTweet thisAlerts:
@rootApr 17.2016 — Set up CSS style options in a style sheet

Using Javascript, apply a class name that corresponds to your item that needs hiding

Example of using a form, css and toggling between two states in the display of certain form fields. if you were using something like this then you would need to consider if data input in to the field remains visible.

[code=html]<!doctype html>
<head>
<title>Toggle Me</title>
<style>
.hideMe { display:none; }
.showMe { display:block; }
</style>
<script>
function toggle( fm ){
var field = fm.field;
for(f=0; f<field.length; f++){
// change the state of the className
field[f].className = (field[f].className=="hideMe") ? "showMe" : "hideMe";
}
}

</script>
</head>
<body>
<form name="myForm" action="javascript:;" onsubmit="toggle( this );">
<input name="field" type="text" value="" placeholder="field1" class="showMe">
<input name="field" type="text" value="" placeholder="field2" class="hideMe">
<input name="field" type="text" value="" placeholder="field3" class="showMe">
<br>
<input name="Submit" type="submit" value="Click Me">
</form>
</body>
</html>[/code]

Your using JQuery or some other framework, so your question is best placed in the JQuery form (see my signature for link to it) but I do think that learning JavaScript first is best in your interests to understanding programming before using JQuery.
×

Success!

Help @daknoxy 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.18,
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,
)...