We Keep Coding

How to bind 2 input fields dynamically added in a table with Jquery

I am not very familiar with javascript/Jquery Syntax, I would like to bind 2 input text fields that were dynamically added to a table inside a loop. The main goal is to automatically fill the second text field with text from the first one. I was able to do it for 2 static text field by doing that.
$(document).bind('input', '#changeReviewer', function () {
var stt = $('#changeReviewer').val();
stt = stt.replace(/ /g,'.')
$("#changeReviewerEmail").val(stt + "##xxxxxx.com");
});
I have tried a few things but when I try to get the value of the first input, it always returns empty. Thanks.

Check this code
$(document).on('input', '#changeReviewer', function() {
var stt = $('#changeReviewer').val();
stt = stt.replace(/ /g, '.');
$("#changeReviewerEmail").val(stt + "##xxxxxx.com");
});
$('#addbtn').click(function() {
$('div').empty().append(`<input id='changeReviewer'><input id='changeReviewerEmail'>`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id='addbtn'>add inputs</button>
</div>

How do I check if Dropdown List is readonly?

I want to check if a dropdown list is readonly. I have this dropdown on my xpage inside repeat control and based on certain condition one of my dropdown will be in readonly. I want to check which one is in readonly using CSJS (javascript, jquery, dojo)

you can using jquery with few ways:
1st Way:
if($('select').attr('disabled'))
{
alert("read only");
}
Fiddle Example
2nd way:
if($('select').is(':disabled'))
{
alert("read only");
}
3rd way:
if($('select').attr('readonly'))
{
alert("read only");
}

Assuming that your dropdown is an XPages control of type xp:combobox, you can do the following to check if the control is readonly using server-side logic:
getComponent("<id of combobox>").isReadonly()
As you mention yourself, a readonly combobox in XPages is not rendered as a dropdown but as a table with an id of your combobox.

Try with this with jQuery methods:
alert($('select[readonly]').attr('id'));
// alerts the id of readonly select element
if there are multiple readonly select elements then you can store the ids in an array with .map() method:
var readOnly = $('select[readonly]').map(function(){
return this.id;
}).get();
Demo # fiddle with readonly attribute.
or if you meant for disabled then you can change to this script:
alert($('select[disabled]').attr('id'));
or
var readOnly = $('select[disabled]').map(function(){
return this.id;
}).get();

As we know a readonly combobox in XPages is not rendered as a dropdown but as a table with an id of combobox.
If we try to set some values to the readonly dropdown it wont be visible as the readonly dropdown gets rendered as table and that table has value property.
So, I created a span element on runtime for showing my readonly combobox value with the id of my combobox and used visible property of dropdown instead of readonly property so that even table doesn't gets created.
function setValues()
{
//START OF CODE: Set values on dialog
var RepID = "#{id:repeatControlID}"
var totalcont = "#{javascript:getComponent('repeatControlID').getRowCount()}";
var val = "#{javascript: DataSourceObj.getItemValue('docField')}"
for(i=0;i<val.length;i++)
{
var idChL = RepID+":"+i+":comboboxID";
var cbCell = RepID+":"+i+":cbCell"; //cbCell is my id of table cell in which my combobox is present
var element = document.getElementById(idChL);
if(element) //Check if dropdown is rendered, if not then create element on fly
{
element.value = val;
}
else{
createEle(idChL,cbCell,val);
}
}
//END OF CODE: Set values on dialog
}
function createEle(idText,cbCell,idVal)
{
var input = document.createElement("span");
input.innerText = idVal;
input.id = idText;
var parentEle = document.getElementById(cbCell);
parentEle.appendChild(input);
}

How to append Span to input field dynamically using native javascript

I have 5 input box in my page. I want to check if any field is blank, i will show the error message using a span tag appending to that input field.
Here is my code:
function validateForm() {
// Declare all the local variable
var inputElements, inputId, inputType, i, inputLength, inputNode;
// Get all the input tags
inputElements = document.getElementsByTagName("input");
for(i = 0, inputLength = inputElements.length; i < inputLength; i++) {
inputId = inputElements[i].id; // Get the input field ID
inputType = inputElements[i].type; // Get the input field type
// We will ONLY look for input[type=text]
if(inputType === "text") {
inputNode = document.getElementById(inputId);
if(inputNode.value === "") {
var spanTag = document.createElement("span");
spanTag.innerHTML = inputFieldBlankErrorMessage;
console.log(inputNode.appendChild(spanTag));
}
}
}
return false; // Do Nothing
}
This is what i am getting
It should append after the input tag. I am getting a weird tag which i don't need. Please help!!!

You can't .appendChild() anything to an input node, since an input can have no descendants.
Instead, you should insert the new node after it, or something similar.
inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);
DEMO: http://jsfiddle.net/hMBHT/

Simply put you are not supposed to append any elements to input elements.
What you probably want is something like this:
<div class="field">
<input type="text" name="bla"/>
<span class="error">This field can't be blank!</span>
</div>
So you need to insert the span before or after the input element.
Here is an answer that shows you how.

I believe that your issue is that you are trying to append the span as a child of the input, not a sibling (which, I believe, is what you really want).
I can't to be sure without seeing your actual HTML, because I don't know how your inputs are situated in the DOM, but if they have separate parent elements, then you would replace:
inputNode.appendChild(spanTag);
. . . with
inputNode.parentNode.appendChild(spanTag);
Edit: FYI, the code that squint gave below (inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);) would be how you could do it if all of the inputs are under the same parent element. It all depends on how the DOM structure is set up.

How to get the values of html hidden wrapped by a div using jquery?

Im very new to javascript and jquery so please bear with me.
Here's my code: http://jsfiddle.net/94MnY/1/
Im trying to get the values of each hidden field inside the div.
I tried
$(document).ready(function() {
$('input#btnDispHidden').click(function() {
var totalHidden = 7;
for(var i=0; i<totalHidden; i++) {
alert($("#hiddenField hidden").html());
}
});
});
but the value Im getting is null.
I also wanna know how to get the total number of html elements inside a div. In my case how am I gonna get the total number hidden field inside the div. I assigned the value of totalHidden = 7 but what if I dont know total number of hidden fields.
Please help. Thanks in advance.

$('#hiddenField hidden') is attempting to access an actual <hidden> tag that is a child of #hiddenField
Try this instead. What you want to use is the input[type=hidden] selector syntax. You can then loop through each of the resulting input fields using the jQuery.each() method.

If you want to iterate over the <input> elements and alert each value try this:
$(document).ready(function() {
$('input#btnDispHidden').click(function() {
$('#hiddenField input').each(function() {
alert(this.value);
});
});
});
http://jsfiddle.net/94MnY/8/

Here it is.
Basically, you are looking for .each(). I removed a few input fields because so many alert messages are annoying. Also added in the selector the type hidden to avoid getting your last input field.
$(document).ready(function() {
$('input#btnDispHidden').click(function() {
$('input[type="hidden"]').each(function(i){
alert($(this).attr('value'))
})
});
});

To stick to what you already have - but with few modifications:
DEMO
$(document).ready(function() {
$('input#btnDispHidden').click(function() {
var totalHidden = $('#hiddenField input[type=hidden]').length; // get number of inputs
for(var i=0; i<totalHidden; i++) {
alert($("#hiddenField input[type=hidden]").eq(i).val());
}
});
});

You can actually just create an array of those hidden elements using query and loop through them and alert their values.
I have put a jsfiddle for you to see
http://jsfiddle.net/94MnY/4/
$(document).ready(function() {
$('input#btnDispHidden').click(function() {
$("#hiddenField input[type='hidden']").each(function(i, e){
alert($(this).val());
});
});
});

Try
$('#hiddenfield input[type=hidden]').each(function(){
alert(this.val());
});

add and remove a certain value from a text field

each checkbox that i check, i fill the input with it's id
now, how can i retrieve this id that i put inside the input if the user uncheck the checkbox?
exp:
estate SC,SP was checked;
input recieve SC,SP value in this format = SC,SP
but the user uncheck the checkbox with SC value, then SC should be removed from the input.
this is what i'm doing to fill the input with the checkboxes.
var separador = ",";
var estadosS = "";
$(".checkboxEstados").live("click", function(){
if($(this).is(":checked")){
estadosS += (estadosS == "") ? "" : separador;
estadosS += $(this).attr("id");
$("#holdEstados").val(estadosS);
}else{
// now i'm just cleaning all the input,
// but i need to clean only the checkbox that was unchecked
$("#holdEstados").val("");
}
});
dont know if i was clear, any question, be my guest.
Thanks.

An easy way to solve this is to avoid parsing and removing parts of the data. Instead of trying to remove 'SC', instead regenerate the entire contents of the text field each time any checkbox is selected.
When a checkbox click event is detected, deleted the contents of the text input field, scan all of the selected checkboxes, and include their IDs in the text input field.

You're logic can be greatly simplified. Simply grab each checkbox that is checked when the click event fires:
$(".checkboxEstados").live("click", function() {
var aryIds = new Array();
$(".checkboxEstados:checked").each(function() {
aryIds.push($(this).attr("id"));
});
$("#holdEstados").val(aryIds.toString());
});
Here's a working fiddle.

I would store the value in an array and add and remove values from it and then write the array to the output instead of trying to parse the text each time:
var estadosS = [];
$(".checkboxEstados").live("click", function(){
var index;
if($(this).is(":checked")){
// append the id to the list
estadosS.push($(this).attr("id"));
}else{
index = estadosS.indexOf($(this).attr("id"));
if(index > -1) {
estadosS.splice(index, 1);
}
}
$("#holdEstados").val(estadosS.join(separador));
});

If all you are aiming to do is get a list of the checked values from all the check boxes, you could do:
$('.checkboxEstados:checked').each(function(){
alert($(this).val());
});
And that should return all the check box items that have been checked. Then you don't have to worry about adding and removing data from a text box. I'm just alerting the value, you would want to store them into an object or something more useful.