Change Label by value in dropdown - javascript

I have a BuddyPress profile form that currently has fields being shared between different member types, so they can be forced to be mandatory.
I would like field A (highlighted) to be able to change the labels/legends highlighted with B, so that once a user selects a value I can show the relevant text (which needs to change for each drop down value)
I already have PHP code to control these labels AFTER the user has selected a member type, I just need to know what to before hand, before they save these values.
The first field is field_6.
The second is field_19
The third is field_505
The fourth is field_56
I believe a javascript piece of code would make this work appropriately, but is not my strong suit programming language wise.
UPDATE:
The requirements have since changed, but I have found the solution, and sharing for others to use. This also includes changing labels on an input box as well.
If anyone has a better way of writing this code, happy to take advice
$(document).ready(function(){
$('#field_6').change(
function () {
var membertype = $('option:selected', this).text();
var cphmtp = document.getElementsByClassName("field_56");
var cphmtp_label = cphmtp[0].getElementsByTagName("label");
var age_ranges = document.getElementsByClassName("field_505");
var age_ranges_legend = age_ranges[0].getElementsByTagName("legend");
var age_ranges_option = document.getElementById("field_1120_0");
if (membertype == 'Babysitter or Nanny') {
$("#field_56").val("");
cphmtp_label[0].innerHTML = "Cost Per Hour (required)";
$('.field_56').show();
age_ranges_legend[0].innerHTML = "Age ranges of children able to sit (required)";
$("label[for='field_1120_0']").html('<input type="checkbox" name="field_505[]" id="field_1121_0" value="I don\'t mind">I don\'t mind');
$('.field_505').show();
} else if (membertype == 'Parent') {
$("#field_56").val("1");
$('.field_56').hide();
age_ranges_legend[0].innerHTML = "Age that my children are (required)";
$("label[for='field_1120_0']").html('<input type="checkbox" name="field_505[]" id="field_1121_0" value="I don\'t mind">I\'d rather not say');
$('.field_505').show();
} else {
$('.field_56').hide();
$('.field_505').hide();
}
});
});

Related

Hide or show field comparing two other fields in Sharepoint list

I have two people picker column called Current User and Issue Owner. I want third field hide/show based on comparison between two people picker column. If people picker column have same value I need to show it else hide it.
What am I doing wrong here?
<script src="/sites/risk/Style%20Library/jquery-3.1.1.min.js"></script><script src="/sites/risk/Style%20Library/sputility.min.js"></script><script>
//$(document).ready(function(){
var currentuser = SPUtility.GetSPField('Current User');
var issueowner = SPUtility.GetSPField('Issue Owner');
var HideOrShowOthersField=function(){
var currentuserValue = currentuser.GetValue();
var issueownerValue = issueowner.GetValue();
if(currentuserValue!=issueownerValue)
{
SPUtility.GetSPField('Issue Owner Review Status').Hide();
}
else
{
SPUtility.GetSPField('Issue Owner Review Status').Show();
}
};
HideOrShowOthersField();
});
</script>

Partial Password Masking on Input Field

So I need to mask a SSN# input field, lets say the ssn is 123-45-6789, I need to display ***-**-6789 (real time as they enter each digit) but I still need to retain the original value to submit.
I got to the point where I can do that if the user strictly enters the value but it breaks if the user does anything else such as delete, or moving cursor to a random position and adds/deletes a number, copy pasting/deleting, etc. I really don't want to listen to a bunch of events to make this work if thats even possible.
I also tried having a div sit on top of the input field to display the masked ssn while the actual ssn was transparent/hidden behind it but again they lose the functionality of being able to add/delete/select delete/paste in random parts (other then when they start at the end) and also the cursor not totally in sync with the end of the ssn number (asterisk size was the issue). This also broke on some mobile browsers.
I also thought of having two separate input fields, one type password, and one type text sit right next to each other, but again highlighting and deleting/pasting between the two would be an issue.
Ideally if there was something out there to have an input field have two types, part of the value be type password and the rest be type text, that would be fantastic. Btw this is for react js app.
TLDR: Need a fully functional input field that will do password masking on only first 5 digits of ssn and be plaintext for last 4 digits (while having the full plaintext value available for submission).
Thanks!
This might be a little sloppy, but it works as you want it to, is all in one text field, returns the full accurate SSN (despite replacing first 5 values with bullet points), and allows for editing anywhere in the field.
<input type="password" id="ssn" maxlength=9 />
<script>
var ssn = document.getElementById('ssn');
ssn.addEventListener('input', ssnMask, false);
var ssnFirstFive = "";
var secondHalf = "";
var fullSSN = "";
function ssnMask(){
if (ssn.value.length <= 5){
ssn.type = 'password';
}
else{
detectChanges();
secondHalf = ssn.value.substring(5);
ssn.type = 'text';
ssn.value = "•••••";
ssn.value += secondHalf;
fullSSN = ssnFirstFive + secondHalf;
}
}
function detectChanges() {
for (var i = 0; i < 5; i++){
if (ssn.value[i] != "•"){
ssnFirstFive = ssnFirstFive.substring(0, i) + ssn.value[i] + ssnFirstFive.substring(i+1);
}
}
}
</script>
Essentially, every time the input is changed, it checks to see if it matches the first 5 from before, and if it doesn't, it will update the necessary characters.
You can use 3 different fields and make then password fields.
Add a focus handler that changes their type into text and a blur handler that changes them back to password.
You can combine them before submission or on the server.
#ssn1{width:25px;}
#ssn2{width:20px;}
#ssn3{width:35px;}
<input type="password" name="ssn" maxlength=3 id="ssn1" />
<input type="password" name="ssn" maxlength=2 id="ssn2"/>
<input type="password" name="ssn" maxlength=4 id="ssn3"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('[name="ssn"]').focus(function() {
$(this).attr("type", "text")
});
$('[name="ssn"]').blur(function() {
$(this).attr("type", "password")
});
</script>
You can also write a pass handler to all a full SSN to be pasted in the first field and have all three fields get set.
This is the closest you are going unless you work with a single full text box and give the user the ability to mask and unmask the field.
In production apps, this actually the approach I take:
Masked:
Unmasked:
You can implement you own focus/blur functions to automatically unmask/mask the field as needed.
Achieve this using html data attributes.
i have used the same html tag and store actual value in html tag attribute (data-value) to use later on and store value to display in html tag attribute value.
Function to partial mask input value
function mask_field_value(obj, mask_letters_count=7){
mask_value = $(this).data('mask-value') || '';
unmask_value = $(this).data('unmask-value') || '';
if (obj.value.length <= mask_letters_count){
obj.type = 'password';
mask_value = obj.value;
$(this).data('mask-value', obj.value);
} else {
obj.type = 'text';
unmask_value = obj.value.substring(mask_letters_count);
obj.value = "*".repeat(mask_letters_count) + unmask_value;
$(this).data('unmask-value', unmask_value);
}
$(this).data('value', mask_value + unmask_value);
console.log($(this).data('value'));
}
Add an event on input fields to mask
$(document).ready(function () {
$(document).on('keyup', '.mask_input_display', function () {
mask_field_value(this);
});
});

How do I limit the results of a php query based on the value of a javascript variable?

Originally I had a WHERE class_id = 3 in my php query but as I learned more about server-side things I realized I wouldn't be able to change that once the page was loaded without AJAX or something. So now I've taken away the WHERE part of my query and am getting results for all class_id's.
My hope is that I can use a radio to limit the rows returned to only those matching the radio button that is checked.
EX. Click class 2 radio button, click go, and now only rows with class_id = 2 show up.
<input type='button' name='Go' value='Go' onclick='getSelected()'>
function getSelected() {
var queryClass = "";
if (classThree.checked) {
queryClass = 3;
} else if (classTwo.checked) {
queryClass = 2;
} else if (classOne.checked) {
queryClass = 1;
}
}
I can get the desired value with this but I don't know what to do with the value to limit the rows. If this is possible it'd be great to know how.

Data entered alters string length

I am new to JavaScript and I have been doing some work creating a form in HTML and JavaScript. In this work I have been trying to limit the string of a field depending on the text entered into a previous field.
What i have been trying is if the country 'Australia' is entered into the 'Country' text box than the 'Postcode' text box is limited to only 4 numbers (the Australian postcode standard)
i have done this much of a function so far:
document.getElementById('txtcountry').onblur = function postcode()
{
var country = document.getElementById('txtcountry').value;
if (country == "Australia" || category == "australia")
{
document.getElementById('txtpostcode').maxLength = 4;
}
else
{
document.getElementById('txtpostcode').maxLength = 9;
}
}
Here is the segment of the initial HTML that i have to use the function with:
<b>Postcode:</b> <input type="text" id="txtpostcode" name="postcode">
<br>
<b>Country:</b> <input type="text" id="txtcountry" name="country">
I am calling the function using :
<form name="rego" action="submit.htm" onsubmit="return !!(validateText() & validateCheckBoxes(this) & validateRadioButton() & validateEmail() & populateInstitution() & postcode());" method="POST">
Any help would really be appreciated!
UPDATE: i have updated my function to the finished function after some help as it doesn't seem to work and i need some further help with it
Are you trying to set the maxLength property:
var pc = document.getElementById('txtpostcode');
pc.maxLength = 4;
pc.value = pc.value.substr(0,4); // remove any extra characters already entered
...and then add an else condition to set the maxLength to whatever your default is for other countries.
You would then call your postcode() function from the blur event of your txtcountry field.
EDIT: Note that the function you've shown has an undefined variable category in the second part of the if test - should be country. And as I mentioned already you do need to call the function from somewhere.
I would use the
var country = document.getElementById('txtcountry');
if (country.value == "Australia" || category == "australia")
{
country.setAttribute("maxlength","4");
country.value = country.value.substr(0,4);
}

Some sort of an array to create multiple Step Form?

a nice member here helped me out to create a form which adds steps as you go. I modified it a bit to allow you to change the answers to some of those questions by clicking a change button. Of course, I realized my limits and applied it to only the first question, and badly...
The way I was approaching this was to give each question and button it's own unique id, which I think is probably the wrong way to approach this?
This is what I want and I partially accomplished some:
Fill out a field, press NEXT
Field 1 Turns into readonly text and a ChangeButton appears
a new field appears below that you can fill out
By pressing CHANGE on field one, field2 becomes non-editable and field1 is now editable. The change button also turns to "Save". By clicking save, you make field 2 editable and field1 non-editable again.
this continues on forever :)
I tried what I found on the internet but I hope that someone who's better at this could help me out a bit if that's ok :)
Here's my Jfiddle
http://jsfiddle.net/pufamuf/TEyVL/3/
Thank you!
Example of the following here
Here's how I'd accomplish what you're trying to do...
HTML:
<div id="question1" class="question active">
<label>Q1</label>
<input type="text" />
<input type="button" value="SAVE" class="button" />
</div>
jQuery:
var qa = []; // questions array of objects { text: "question text" }
$('.button').live('click', function(e) {
var $but = $(this),
$inp = $but.prev(),
$parent = $but.parent(),
i = $parent.attr('id').match(/\d+$/)[0] - 1,
$new;
if ($but.val() == 'SAVE') {
// store value to array
qa[i] = {
text: $inp.val()
};
// append new question inputs if needed
if (!$('#question' + (i + 2)).length) {
$new = $parent.clone();
$new.attr('id', 'question' + (i + 2));
$new.find('label').html('Q' + (i + 2));
$new.find('input[type="text"]').val('');
$new.insertAfter($parent);
}
// change to inactive attributes
$inp.attr('disabled', true);
$parent.removeClass('active').addClass('answered');
$but.val('CHANGE');
} else { // CHANGE
// change to active attributes
$inp.attr('disabled', false);
$parent.removeClass('answered').addClass('active');
$but.val('SAVE');
}
});
I made the array store objects so it's easy to add other properties to each question if needed.
See demo

Categories

Resources