Basic Javascript WebDev help - javascript

Hallo,
I have to write a little java script and have no idea how and I thought that for a real JS Programmer it would be real easy to just tell me instead of me searching the web for hours.
Simple Problem:
I have some boxes with name TrackSelectPos_1 - TrackSelectPos_7.
If one of those change I want to check if the value of the box is -1. If it is disable all the boxes with a higher number and set there value to -1. If the value is not -1 enable the box on the right (the box one higher).
So the basics things that I want to do are:
1. How to get the value
2. How do I disable/enable a box
Thanks for your help.

At the very basic level, assuming one of your textbox id is TextPOS_1
//1. Value
var valueTB1 = document.getElementById('TextPOS_1');
alert (valueTB1 .value);
//2.To Disable
valueTB1.disabled = true;
You would need to wrap the above in a JavaScript Function...so that you can handle any number of textboxes.
Let me know if this helps and you need more clarification...

Assuming TrackSelectPos_1 is the id of your text box:
var box1 = document.getElementById('TrackSelectPos_1');
var box2 = document.getElementById('TrackSelectPos_2');
// This does it for only one text box. You'd need to also perform the same for boxes 3 through 7.
if(box1.value == '-1'){
box2.disabled = true;
} else {
box2.disabled = false;
}

Related

fill textbox from other textbox based on combobox selection

Example of formsI would like to know if anyone can help me on the following problem?
I am working in Acrobat Pro with form development.
I have 2 forms in one document, 1 with only textboxes the other with 1 dropdownbox and 2 textboxes.
My knowledge of Acrobare Pro Java is quite small. I think it should be something like this. However this doesn't work in Java.
This code is placed in the custom calculation script of the textbox i would like to fill.
//if the dropdownDoc value is equal to the DocumentnrTXT it needs to fill `this textbox with the text from TitleTXT1.`
if(this.getField("dropdownDoc").value == " ") { event.value = ""; }
else if (this.getField("dropdownDoc").value == "DocumentnrTXT1")
{event.value = this.getField("TitleTXT1").ValueAsString; }
else if (this.getField("dropdownDoc").value == "DocumentnrTXT2")
{event.value = this.getField("TitleTXT2").ValueAsString; }
Anyone that can give me a tip on how to proceed?
The property you're looking for is "valueAsString"... lowercase "v". Otherwise, the script looks good.
And it's JavaScript, not Java.

JS and jQuery - loop through textboxes and store value

Here's the function that checks if the form is complete.
So, what I'm trying to do:
If radio is not selected, throw a message.
If radio is "yes", but text is not entered, throw error.
If radio is "no" but text is entered, make the text empty.
If all is good, add stuff into `allResponses
The form was displayed 5 times, and input was as follows:
Yes a1
No
Yes a3
No
Yes
Now, this input should display an error since in 5th case, "yes" is selected but nothing is entered in the textbox.
However, I get this:
http://i.imgur.com/ya2CUp0.png
Also, the text is not being updated as in 1st and 3rd cases.
I don't know a lot about JS, so please provide me with as explained responses as you can.
EDIT: Complete code: http://pastebin.com/scNSNM2H
Thanks
You have this in a loop:
var exaggerationPart = document.getElementById('exaggeration').value
And then you check to make sure it has a value for each item. But you will get the same value each time.
You are creating multiple inputs with the same id, "exaggeration". This is invalid HTML. Id's must be unique. To correct this, you can increment the id the same as you are doing with other elements (such as, input[name='response"+thisJokeIndex+"']).
var exaggerationPart = document.getElementById('exaggeration' + thisJokeIndex).value
tipTD2.append("<input type='text' name='exaggeration' id='exaggeration" + tipIndex + "' size='70'>")
Working demo: jsfiddle.net/svvge/2
Edit: To clear the value of the text box, you must change the value property of the text box element. Right now you are just changing the value of a variable.
var exaggerationInput = document.getElementById('exaggeration' + thisJokeIndex).value;
var exaggerationPart = exaggerationInput.value;
exaggerationInput.value = '';

jQuery.maskedInput - Switching input masks dynamically

I have a text field that requires a mask. As per the suggestions on other SO threads I am using this jQuery plugin to do this: http://digitalbush.com/projects/masked-input-plugin/.
I am having a problem with it however. There 2 different masks that can be applied to my input field. The decision of which one to use can only be determined after the first 4 characters have been inputed. So here's what I have:
$('#user-input').keyup(function () {
current_val = $(this).val();
if (current_val.replace(/\s*$/, "").length == 4){
mask = determineMask(current_val);
$(this).unmask();
$(this).mask(mask);
}
});
When the line "$(this).mask(mask)" fires, all existing input is removed. Does anyone know how to prevent this package from doing that? Is there another plugin, library, code snippet, etc that would be better at dong what i am trying to do here?

How can I tell if the checkboxes are checked?

I need to be able to tell if the checkboxes are checked to do some basic validation. Problem: I don't have access to the PHP generating this. There is no class added, or the basic checked=checked that most forms have. What's the easiest way to target the checked boxes?
http://www.inpresence.in/event-registration?ee=4
EDIT: freak out!! here's the code, i just need to target the checked boxes, everything else is working. the :checked method of jquery uses checked=checked within the checkbox, which isn't there.
$(document).ready(function(){
//when the submit button is clicked...
$("input.btn_event_form_submit").click(function(){
//find the value of the drop down with one evening or four evenings
var priceOption = $("#price_option-4").val();
//match a string ending with "one evening" as the first numbers will be randomly generated by php
var oneEvening = /^\d{2}\|One Evening$/.test(priceOption);
//match a string ending with "four evenings" as the first numbers will be randomly generated by php
var fourEvenings = /^\d{2}\|Four Evenings$/.test(priceOption);
//HOW DO I GET THE CHECKED BOXES?!
var checkedBoxCount = $('#dates-1351733097 .valid').is(':checked').length;
//if one evening is selected make sure the checked boxes count does in fact equal one
if(oneEvening && checkedBoxCount != 1){
//if it doesn't alert the user and return false
alert('You must select one date');
return false;
}
//if one evening isn't selected, four is. make sure the count does indeed in 4
else if (fourEvenings && checkedBoxCount != 4){
//if it doesnt alert the user and return to the form
alert('You must select four dates');
return false;
}
//else, everything checks out!
else {
return;
}
});
});
Using this JavaScript code you can check if a checkbox is checked:
var isChecked = document.getElementById("my-checkbox").checked;
Or using jQuery:
var isChecked = $('#my-checkbox').is(':checked');
EDIT: Try this and tell me if it works:
var checkedBoxCount = $('#dates-1351733097 .valid:checked').length;
Have you tried using jquery to resolve this?
http://jquery-howto.blogspot.co.uk/2008/12/how-to-check-if-checkbox-is-checked.html
$('#edit-checkbox-id').is(':checked');
use the jquery :checked selector. http://api.jquery.com/checked-selector/
This will give you a boolean in javascript of what you want:
document.getElementById("Nov.12-4_1").checked
You can view source and find the elements to view whatever id's they have.
Other answers: the OP didn't specify that he wanted a jquery answer. If he hasn't used jquery for anything up to this point. I think adding it just for this would be a tad overkill.

Add a permanent prefix to a textbox

What I am trying to achieve is to force a textbox to start with a prefix ( country telephone code ) and to make this permanent, meaning that the user cannot bypass this. For example, the Phone textbox should always start with "+45" and after that the user can add the phone number. How to prevent it from deleting the code, by any means?
What I done so far, using jQuery:
//attach event on phone text boxes
$(document).delegate(".phone", "keyup", function(event){
var target = $(this);
var value = target.val().trim();
if (value.indexOf(CONSTANTS.DANISH_PHONE_CODE) == -1) {
//country code not found
//if the user starts deleting the country code
if (value.indexOf("+") == 0){
value = "";
}
//if the user types something in front of the country code, put the country code at the end
value = value.replace(CONSTANTS.DANISH_PHONE_CODE, "");
//phone doesn't start with +45
value = CONSTANTS.DANISH_PHONE_CODE + value;
target.val(value);
}
});
But the problem is that the user can delete the plus sign and the prefix is put automatically at the start so we will have +4545. Do you know an elegant way of achieving this? Thanks.
You can absolutely position the text (in a span) over the textbox and add a left-margin to it.
This way users won't be able to remove it. But you'll have to add it server side.
Add the +45 as static html before the field. Required the user to enter "the rest" of the number (not the +45).
If necessary, add the +45 server side before persisting the value. Similarly, remove the +45 when editing.
JSFiddle Example
This should actively keep them from deleting "+45" instead of trying to fix the problem after the user as changed it. Upon keypress, determine character position, if the position is too early in the string (i.e. inside the "+45" as oppose to after it) then don't allow the keypress, unless that key is the left or right arrow keys.
Acquired resources:
http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea
Binding arrow keys in JS/jQuery

Categories