JS - if hidden field's value is "x," then execute function - javascript

I think this is pretty simple, but I am writing 1 JavaScript include that will go on multiple pages with a form. All of the pages have a hidden field like this:
<input type="hidden" name="test" value="test1">
Some pages have the value as "test1," while others have "test2." I only want to execute this script for pages with the "test1" value. I do NOT want it on pages with "test2" value.
For reference, here is the JS:
function CheckDay(obj) {
if (obj.value == "F") {
document.getElementsByName("price")[0].value = "29.99";
} else {
document.getElementsByName("price")[0].value = "39.99";
}
}
I'm just not sure how to say, only run if "test" value is "test1". Can anyone help?

You can add condition in the funnction to execute the javascript only when the value of test is test1 (Or you can call the function CheckDay from another function after checking the value)
function CheckDay(obj) {
if(document.getElementsByName('test')[0].value==='test1'){
if (obj.value == "F") {
document.getElementsByName("price")[0].value = "29.99";
} else {
document.getElementsByName("price")[0].value = "39.99";
}
}
}

Related

Issue with if statement in JavaScript function

I use a radio button plata with two values 1 and 2 in my form and another input hidden plata2 take one value depend to plata.
So i use this code inside in an existent function total():
test = document.getElementById('plata').value;
if (test == 1) {
document.getElementById('plata2').value=pretfinal;
}
else{
document.getElementById('plata2').value=avansfinal;
}
But plata2 take just first value, else never works? can help with this.
try "checked" instead of value:
test = document.getElementById('plata').checked;
if (test) {document.getElementById('plata2').value=pretfinal;}
else {document.getElementById('plata2').value=avansfinal;}
I think what you have done is given both the radio elements the same id
test = document.getElementById('plata').value;
the code of line above will only select the 1st radio element, in your case the 1st one with value 1.
Hence leading to the if block and not the else block.
Here is a sample code for your requirement
https://jsfiddle.net/udkxynsn/
<label for='plate_1'>1</label>
<input type=radio name='plata' id='plata_1' value=1>
<br>
<label for='plate_1'>2</label>
<input type=radio name='plata' id='plata_2' value=2>
<br>
<input id='plata2'>
<br>
<br>
<div>CLICK</div>
<script>
document.querySelector('div').addEventListener('click', test);
function test(){
test = document.querySelector('[name=plata]:checked').value;
if (test == 1) {
document.getElementById('plata2').value="value1";
}else {
document.getElementById('plata2').value="value2";
}
}
</script>
Check which of radio element is selected:
function total() {
if (document.getElementById('plata').checked) {
test = 1;
}
else
{
test = 2;
}
if (test == 1) { document.getElementById('plata2').value = pretfinal; }
else { document.getElementById('plata2').value = avansfinal; }
}

Using Javascript to select a value from a Html Select box

Hey guys I am using JavaScript to select a specific value(option) from the html select form tag, but whenever I call my JavaScript function I get a single message repeating for all the choices I want to select.
Ex: If I choose to select 'Rabbit' from the list of options and then display a message saying 'Rabbit chosen'; the message will display for each option/value selected.
Here is my JavaScript Code:
var element = document.getElementById('choices').value;
function SelectElement() {
if (element = 'Rabbit') {
alert("Rabbit Selected");
}
else if (element = 'Wall') {
alert("Wall Selected");
}
else if (element = 'Arrow') {
alert("Arrow Selected");
}
}
Here is my html code:
<form>
<select id="choices" >
<option>Rabbit</option>
<option>Wall</option>
<option>Arrow</option>
</select>
<input type="button" value="Submit" onclick="SelectElement()"/>
</form>
Can you smart guys please help me????
A. You should fetch the value each time before calling the function and then check it otherwise your element variable won't refresh at all.
B. To compare two values you should use ==, = is an assignment operator.
function SelectElement() {
var element = document.getElementById('choices').value;
if (element == 'Rabbit') {
alert("Rabbit Selected");
}
}
(As your question is not much clear) if you just want to alert the selected value for every option clicked, just do:
function SelectElement() {
var element = document.getElementById('choices').value;
alert(element+" Selected");
}
This is basic string concatenation.
There is a something called selected == true or false in a "select" tag.
You could write in HTML :
<form>
<select id="choices">
<option id="Rabbit">Rabbit</option>
<option id="Wall">Wall</option>
<option id="Arrow">Arrow</option>
</select>
</form>
<button onclick="TakeElement()">Click</button>
You could write in javascript:
var ra = document.getElementById('Rabbit');
var wa = document.getElementById('Wall');
var ar = document.getElementById('Arrow');
function TakeElement() {
if (ra.selected == true) {
alert("Rabbit is selected");
}
if (wa.selected == true) {
alert("Wall is selected");
}
if (ar.selected == true) {
alert("Arrow is selected");
}
}
I think you must replace element ='rabbit' with element =='rabbit'
== is comparison operator
and = is assignment operator

Issue while evaluating the condition in javascript

I am fetching one value from controller to jsp and trying to validate the value as follows,
<c:set var="healthWorkerOptions" value='${map["healthWorkerOptions"]}' />
<script>
validateSelectedOption();
function validateSelectedOption()
{
alert("test");
if(healthWorkerOptions != null)
{
alert("not null");
}
else{
alert("null");
}
}
</script>
Value is coming from the controller and able see the fetched value with following statement,
<p> ${healthWorkerOptions} </p>
But while evaluating the condition nothing is happening. What's wrong in my code? I am able to see only test alert but not not null or null alert.
Any suggestion
healthWorkerOptions is not defined in scope of your JS. A debugger should tell you this.
function validateSelectedOption() {
var healthWorkerOptions = '<c:out value="${healthWorkerOptions}" />';
[...]
}
You can directly use el in JavaScript also like below :
healthWorkerOptions = "${healthWorkerOptions}";
if(healthWorkerOptions != null)
{
alert("not null");
} else {
alert("null");
}

HTML Checkboxes with Javascript Functions

I'm just trying to get this checkbox to alert a message after it is checked and after it is unchecked by running a function in Javascript. I can get it to display the "checked" message but can't get the "unchecked" alert to come up.
<input type="checkbox" id="chbx" onchange="foo()">
<script type="text/javascript">
var checkbox = document.getElementById("chbx");
function foo(){
if(checkbox.checked=true){
alert("Checked!");
}
else {
alert("UnChecked!");
}
};
</script>
You've got single-equals instead of double-equals in your if statements:
if (checkbox.checked=true) {
should be
if (checkbox.checked == true) {
or just
if (checkbox.checked) {
You are not comparing values using =. Needs to be at least ==, better ===
if(checkbox.checked === true) {}
or, simplified
if(checkbox.checked) {}
You made the commonly made mistake of using a single = this actual sets the checkbox.checked to true. If you want to make a comparison make sure to use a double ==.
Also, there are only two options for a checkbox; so if it's not on it's off:
This is what I would have done:
<input type="checkbox" id="chbx" onchange="checkbox_changed()">
<script type="text/javascript">
var checkbox = document.getElementById("chbx");
function checkbox_changed() {
if (checkbox.checked == true) {
alert("Checked!");
} else {
alert("UnChecked!");
}
}
</script>

[JavaScript]: How to define a variable as object type?

I am using following code to check whether a check box on my website page is checked or not. But there are several check boxes and I want to use this same function. I want to call this function from a Submit button click and pass the check box name as argument. It should than validate that check box.
function CheckTermsAcceptance()
{
try
{
if (!document.getElementById('chkStudent').checked)
alert("You need to accept the terms by checking the box.")
return false;
}
catch(err)
{
alert(err.description);
}
}
Just pass a parameter to CheckTermsAcceptance(). You also missed a brace after the alert -- there are two statements in that if block, and you'll always execute the return false without it.
function CheckTermsAcceptance(checkboxName)
{
try
{
if (!document.getElementById(checkboxName).checked) {
alert("You need to accept the terms by checking the box.")
return false;
}
}
catch(err)
{
alert(err.description);
}
}
To call this from your submit button, have a function like validateForm that's called on submit. Then simply construct a list of the checkboxes and pass in their IDs to CheckTermsAcceptance.
Note that this sort of validation is handled very smoothly by jQuery and its ilk. For example, here's the jQuery validation plugin.
function CheckTermsAcceptance(element){
try{
if (!element.checked){
alert("You need to accept the terms by checking the box.")
return false;
}
}catch(err){
alert(err.description);
}
}
and you call it like:
CheckTermsAcceptance(document.getElementById('chkStudent'));
is that it?
Sorry for not answering your questions. But you should seriously consider using jQuery and jQuery validate.
You could also use more arguments to allow for different options as well.
function CheckTermsAcceptance()
{
var ctrl = arguments[0];
var valueExpected = arguments[1];
var outputMessage = arguments[2];
if(valueExpected == null) valueExpected = true;
if(outputMessage == null) outputMessage = "You need to accept the terms by checking the box.";
try
{
if(ctrl.checked == valueExpected)
{
Log.Message(outputMessage);
}
}
catch(err)
{
alert(err.description);
}
}
this function will work with a bit of fix up, pass argument and make sure you do both the alert and the return false in the if statement
function CheckTermsAcceptance(checkBox) //added argument
{
try
{
if (!checkBox.checked) { //added block to group alert and fail case
alert("You need to accept the terms by checking the box.")
return false;
}
return true; //added success case
}
catch(err)
{
alert(err.description);
}
}
once you have this in place you can then use it on your form validation like so
<form id="formid" action="" onsubmit="return validate('formid');">
<input type=checkbox name="name" id="name"><label for="name">Name</label>
<input type=checkbox name="name2" id="name2"><label for="name2">Name2</label>
<input type=submit>
</form>
<script>
function validate(formid) {
var form = document.getElementById(formid);
for (var i = 0; i < form.elements.length; i++) {
var elem = form.elements[i];
if (elem.type == 'checkbox' && !CheckTermsAcceptance(elem)) {
return false;
}
}
return true;
}
</script>
i can confirm that this works in firefox 3.5
also jQuery and jQuery.validate make this very easy to implement in a very declarative way.

Categories

Resources