We Keep Coding

Call multilookuplist by title and verify content in SharePoint Site

I have this multilookuplist where user double click to movevalues to the right side. I need to make a method to check if the multilookuplist is empty.
I need to call it by the name as it is a sharepoint site.
The code looks like the following:
<span dir="none">
<input id="ctl00_MultiLookupPicker"
name="ctl04$ctl00$ctl00$MultiLookupPicker"
type="hidden"></input>
<input id="ctl04_ctl00_ctl00_MultiLookupPicker_data"
name="$ctl00$MultiLookupPicker$data"
type="hidden"
value="272|tAS (blaba)|t |t |t235|tAP (blalbla)|t |t |t224|tAR (blalbla)|t |t "></input>
<input id="ctl00_MultiLookupPicker_initial"
name="ctl04$ctl00$ctl00$MultiLookupPicker$initial"
type="hidden" value=""></input>
<table class="ms-long" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="ms-input">
<select name="ctl00$m$g_ctl00$SelectCandidate"
id="ctl00_ctl00_SelectCandidate"
multiple="multiple" title="Employees possible values"
onchange="GipSelectCandidateItems(ctl00_ctl00_MultiLookupPicker_m);"
ondblclick="GipAddSelectedItems(ctl00_ctl00_MultiLookupPicker_m); return false"
style="width:143px;height:125px;overflow:scroll;">
</select>
</td>
<td style="padding-left:10px">
<td align="center" valign="middle" class="ms-input"><button
id="ctl04_ctl00_ctl00_AddButton"
class="ms-ButtonHeightWidth"
onclick="GipAddSelectedItems(ctl00_ctl00_MultiLookupPicker_m); return false"> Add > </button><br />
<br /><button id="cctl04_ctl00_ctl00_RemoveButton"
class="ms-ButtonHeightWidth"
onclick="GipRemoveSelectedItems(ctl04_ctl00_ctl00_MultiLookupPicker_m); return false"> < Remove </button>
</td>
<td style="padding-left:10px">
<td class="ms-input">
<select name="ctl04$ctl00$ctl00$SelectResult"
id="ctl00_ctl04_ctl00_ctl00_SelectResult"
multiple="multiple"
title="Employees selected values"
onchange="GipSelectResultItems(ctl00_MultiLookupPicker_m);"
ondblclick="GipRemoveSelectedItems(_ctl00_ctl00_MultiLookupPicker_m); return false"
style="width:143px;height:125px;overflow:scroll;">
</select>
</td>
</tr>
</table>
</span>
The following is the method that I try to make it validate that some lines are selected and moved from "Employees possible values" to "Employees selected values"
<script type="text/javascript" src="../../Script/jquery-1.10.2.min.js">
</script>
<script type="text/javascript"
src="/sites/Competence_Man/Style%20Library/jquery.SPServices-2014.02.js">
</script>
<script type="text/javascript"
src="/sites/Competence_Man/Style%20Library/jquery.SPServices-2014.02.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello from Me");
//ValidateFields();
});
function ValidateFields()
{
if (("[title='Employees selected values'].val()==null)
{
// checked, so do something
alert("Test 2")
}
}
_spBodyOnLoadFunctionNames.push("ValidateFields()");
</script>

The code below for your reference.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
ValidateFields();
});
function ValidateFields(){
if ($("select[title='Employees selected values'] option").length==0){
// checked, so do something
alert("Test 2");
}
}
</script>
If you want to do the validation when save item form, we need override the PreSaveAction() method.
References: SharePoint 2010 Validation using Javascript

Initially Hiding and then Dynamically Adding and Removing Rows

I'm working on a request form. It needs to list the study team members on a research study besides the PI and submitter of the form. However, some studies will have no additional team members so I would like the row to remain hidden until someone clicks the Add Team Member button.
What's working:
1. I've got the element hidden on initially loading the page.
2. Clicking add rows adds the correct rows.
3. Clicking remove will remove a row.
Current problems:
1. If someone adds a team member then removes all the team members, clicking add team member will not add a row.
2. When the element is hidden on initial page load, the first time the Add Team Member button is clicked it adds two rows.
Here's my current code with only the relevant section of the form.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/test.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function addTableRow(jQtable){
jQtable.each(function(){
var tds = '<tr>';
jQuery.each($('tr:last td', this), function() {tds += '<td>'+$(this).html()+'</td>';});
tds += '</tr>';
if($('tbody', this).length > 0){$('tbody', this).append(tds);
}else {$(this).append(tds);}
});
}
</script>
<script>
function myDeleteFunction() {
document.getElementById("stmember").deleteRow(0);
}
</script>
<script type="text/javascript">
$(function() {
$('#add').click(function() {
$('#stmember').show();
});
});
</script>
<style>
#stmember {
display: none
}
</style>
</head>
<body>
<h3><strong>Other Study Team Members:</strong></h3>
<FORM>
<table id="stmember">
<tr>
<td>Name:
<label for="namest1"></label>
<input type="text" name="namest1" id="namest1" placeholder="First Name, Last Name" />
</td>
<td>JHED ID:
<label for="jhedst1"></label>
<input type="text" name="jhedst1" id="jhedst1" />
</td>
<td>Email:
<label for="emailst1"></label>
<input type="email" name="emailst1" id="emailst1" placeholder="you#example.com" />
</td>
</tr>
</table>
<CENTER>
<button type="button" id="add" onclick="addTableRow($('#stmember'));">Add Study Team Member</button>
<button type="button" onclick="myDeleteFunction()">Remove Study Team Member</button>
</CENTER>
</FORM>
</body>
</HTML>

Here are a couple solutions for you:
Solution 1
Store the HTML of the row in your addTableRow function within a variable. That way you can use tokens for the input IDs to ensure they are unique. Also, you won't have to provide the first row in your HTML, as it will be created through your JS function. Something like:
var template = "<tr><td>Name:<label for="namest1"></label><input type="text" name="namest!!TOKEN!!" id="namest!!TOKEN!!" placeholder="First Name, Last Name" /></td><td>JHED ID:<label for="jhedst1"></label><input type="text" name="jhedst!!TOKEN!!" id="jhedst!!TOKEN!!" /></td><td>Email:<label for="emailst1"></label><input type="email" name="emailst!!TOKEN!!" id="emailst!!TOKEN!!" placeholder="you#example.com" /></td></tr>";
Solution 2
Use a templating engine like jsRender or Mustache.
Conclusion
The cleanest method would be to use a templating engine, if you're game for that. But using a string to store the template within your function will work.

If you're using jQuery, I'd fully commit to using that instead of mixing vanilla JS, as with jQuery you can use clone and remove effectively for what you're trying to achieve. Also, if you plan on submitting this as a form, please be sure to add [] to your input names so you can parse each row properly as the names are the same on the input fields. Please see the below snippet:
function addTableRow() {
var $tableRow = $('tr.model-row:first-child');
var $clonedRow = $tableRow.clone().show();
$('#stmember').append($clonedRow);
}
function myDeleteFunction() {
var $memberTRs = $('tr', '#stmember');
// If rowcount === 1, hide first row, don't remove it!!
var rowCount = $memberTRs.length;
if (rowCount === 1) {
$('tr.model-row:first-child').hide();
return;
}
$memberTRs.last().remove();
}
jQuery(function() {
$('#delete').click(function() {
myDeleteFunction();
});
$('#add').click(function() {
addTableRow();
});
});
.model-row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h3><strong>Other Study Team Members:</strong></h3>
<FORM>
<table id="stmember">
<tbody>
<tr class="model-row">
<td>Name:
<label for="namest1"></label>
<input type="text" name="namest1[]" id="namest1" placeholder="First Name, Last Name" />
</td>
<td>JHED ID:
<label for="jhedst1"></label>
<input type="text" name="jhedst1[]" id="jhedst1" />
</td>
<td>Email:
<label for="emailst1"></label>
<input type="email" name="emailst1[]" id="emailst1" placeholder="you#example.com" />
</td>
</tr>
</tbody>
</table>
<CENTER>
<button type="button" id="add">Add Study Team Member</button>
<button type="button" id="delete">Remove Study Team Member</button>
</CENTER>
</FORM>
</body>

When you create a row, you use the last existing row to create it. But if you remove all the row you lose your example of row.
You can easily fix your problem by checking when you remove a Row, if it's the last one, add a new row before remove the last one.

JQUERY AJAX LOAD-TEXTBOX FOCUS

I am trying to get the text in a div to show when the textbox beside the div is focused on. I am not seeing that text
Below is the jquery script
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script src="../Scripts/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//$jquery selector
//find textbox and place it in a variable
var txtbox = $('input[type="text"]');
//when textbox recives focus
txtbox.focus(function () {
$('#newroleHelpDiv').load('help.html');
});
//when textbox loses focus
txtbox.blur(function () {
$('#newroleHelpDiv').html('');
});
});
</script>
Below is the ASP code
<fieldset style="width:350px">
<legend> New Role</legend>
<table>
<tr>
<td>Insert New Role:</td>
<td> <input type="text" id="newrole" /> </td>
<td> <div id="newroleHelpDiv" runat="server"></div></td>
</tr>
</table>
</fieldset>
</asp:Content>
Below is the help.html file where the help text is coming from
<div id="newroleHelpDiv">
You may add an employee to this role
</div>

id should be unique so if you have id="newroleHelpDiv" main html, you should use another id for your help.html
not sure if you could load the html file, but if loaded it only once, then you can show and hide like this:
$(document).ready(function() {
$('#newroleHelpDiv').load('help.html');
$('#newroleHelpDiv').hide();
//$jquery selector
//find textbox and place it in a variable
var txtbox = $('input[type="text"]');
//when textbox recives focus
txtbox.focus(function() {
$('#newroleHelpDiv').show();
});
//when textbox loses focus
txtbox.blur(function() {
$('#newroleHelpDiv').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<fieldset style="width:350px">
<legend> New Role</legend>
<table>
<tr>
<td>Insert New Role:</td>
<td>
<input type="text" id="newrole" /> </td>
<td>
<div id="newroleHelpDiv" runat="server">You may add an employee to this role</div>
</td>
</tr>
</table>
</fieldset>

Find auto generated id of textbox on button click

<td id="RB_0_val_1">
<label for="RB_0_value_field_1" style="display:none;">Field Value</label>
<input type="text" id="RB_0_value_field_1"></td>
<td id="RB_0_extra_1"><input type="button" value="Select.." id="File"></td>
Now i need to find the id of textbox on th click of button.So i am using
var textboxid=$('input[id="File"]').closest('input[type="text"]').attr("id");
but value returned is undefined.
The id of the textbox is auto generated so i need to find the id on the click of the button.
How to do this?

Please replace your code with my code where just add prev() function.
var textboxid=$('input[id="File"]').prev().closest('input[type="text"]').attr("id");

Try utilizing .parentsUntil , :has()
$("#File").click(function() {
var textboxid = $(this).parentsUntil("td:has(:text)").find(":text").attr("id")
console.log(textboxid)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td id="RB_0_val_1">
<label for="RB_0_value_field_1" style="display:none;">Field Value</label>
<input type="text" id="RB_0_value_field_1">
</td>
<td id="RB_0_extra_1">
<input type="button" value="Select.." id="File">
</td>
</tr>
</tbody>
</table>

You can use jquery .prev() api, for doing that. Try the FIDDLE
Javascript code
$(document).ready(function(){
$('#File').click(function(e){
console.log($(this).prev('input[type=text]').prop('id'));
alert($(this).prev('input[type=text]').prop('id'));
e.preventDefault();
});
});
EDIT : For Updated markup provided in FIDDLE, I have used .closest() .prev() and .find() jquery api
$(document).ready(function () {
$('#File').click(function (e) {
var id = $(this).closest('td').prev('td').find('input[type=text]').prop('id');
alert(id);
e.preventDefault();
});
});
Hope this helps .....

I assume that the tds are inside a tr.
You can make this selector
var textboxid=$('input#File').parents('tr').find('label + input').attr("id");

Try this maybe (haven't tried it) :
var textboxid = $('#File').parent().find('input[type=text]').first().attr("id");
Should it be triggered by a click or something ?

Problem is the text box is in different td, try this:
$(function() {
$('#File').on('click', function() {
alert($(this).parent().prev('td').children('input[type=text]').prop('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td id="RB_0_val_1">
<label for="RB_0_value_field_1" style="display:none;">Field Value</label>
<input type="text" id="RB_0_value_field_1">
</td>
<td id="RB_0_extra_1">
<input type="button" value="Select.." id="File">
</td>
</tr>
</table>

FIDDLE
$$(document).on('click', '#File', function() {
var qwe = $(this).parent().parent().find('input[type="text"]');
alert(qwe.attr('id'));
});

document.getElementById("test").style.display="hidden" not working

I want to hide my form when I click on the submit button. My code is as follows:
<script type="text/javascript">
function hide() {
document.getElementById("test").style.display = "hidden";
}
</script>
<form method="post" id="test">
<table width="60%" border="0" cellspacing="2" cellpadding="2">
<tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold"
align="center">
<td>Ample Id</td>
<td>Find</td>
</tr>
<tr align="center" bgcolor="#E8F8FF" style="color:#006">
<td>
<input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>"
/>
</td>
<td>
<input type="image" src="../images/btnFind.png" id="find" name="find"
onclick="javascript:hide();" />
</td>
</tr>
</table>
</form>
But when I click on the "Find" button, that particular form is not being hidden.

It should be either
document.getElementById("test").style.display = "none";
or
document.getElementById("test").style.visibility = "hidden";
Second option will display some blank space where the form was initially present , where as the first option doesn't

Set CSS display property to none.
document.getElementById("test").style.display = "none";
Also, you do not need javascript: for the onclick attribute.
<input type="image" src="../images/btnFind.png" id="find" name="find"
onclick="hide();" />
Finally, make sure you do not have multiple elements with the same ID.
If your form goes nowhere, Phil suggested that you should prevent submission of the form. Simply return false in the onsubmit handler.
<form method="post" id="test" onsubmit="return false;">
If you want the form to post, but hide the div on subsequent page load, you will have to use server-side code to hide the element:
<script type="text/javascript">
function hide() {
document.getElementById("test").style.display = "none";
}
window.onload = function() {
// if form was submitted, PHP will print the below,
// which runs function hide() on page load
<?= ($_POST['ampid'] != '') ? 'hide();' : '' ?>
}
</script>

Using jQuery:
$('#test').hide();
Using Javascript:
document.getElementById("test").style.display="none";
Threw an error "Cannot set property 'display' of undefined"
So, fix for this would be:
document.getElementById("test").style="display:none";
where your html code will look like this:
<div style="display:inline-block" id="test"></div>

Replace hidden with none. See MDN reference.

There are two ways of doing this.
Most of the answers have correctly pointed out that style.display has no value called "hidden". It should be none.
If you want to use "hidden" the syntax should be as follows.
object.style.visibility="hidden"
The difference between the two is the visibility="hidden" property will only hide the contents of you element but retain it position on the page. Whereas the display ="none" will hide your complete element and the rest of the elements on the page will fill that void created by it.
Check this illustration

its a block element, and you need to use none
document.getElementById("test").style.display="none"
hidden is used for visibility

Maybe you can add a class like 'hide'.
Follow the example here : https://developer.mozilla.org/fr/docs/Web/API/Element/classList.
document.getElementById("test").classList.add("anotherclass");

you need to use display = none
value hidden is connected with attributet called visibility
so your code should look like this
<script type="text/javascript">
function hide(){
document.getElementById("test").style.display="none";
}
</script>

you can use something like this....div container
<script type="text/javascript">
function hide(){
document.getElementById("test").innerHTML.style.display="none";
}
</script>
<div id="test">
<form method="post" >
<table width="60%" border="0" cellspacing="2" cellpadding="2" >
<tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold" align="center">
<td>Ample Id</td>
<td>Find</td>
</tr>
<tr align="center" bgcolor="#E8F8FF" style="color:#006" >
<td><input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>" /></td>
<td><input type="image" src="../images/btnFind.png" id="find" name="find" onclick="javascript:hide();"/></td>
</tr>
</table>
</form>
</div>

Through JavaScript
document.getElementById("test").style.display="none";
Through Jquery
$('#test').hide();

this should be it try it.
document.getElementById("test").style.display="none";