i want to insert in my NewForm.aspx two or more script in jquery. I wrote the code in a Content Editor web part as many online tutorial.
I have two script that work fine separately, but when i merge the script doesn't work (exactly work just one of two).
This is my code in Content editor:
<p>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
</script>
<script type="text/javascript">
function HideColumn(targetColumn, hideColumn) {
var columnObj = $("input[Title='" + hideColumn + "']");
$("input[Title='" + targetColumn + "']").bind('click',function() {
if($(this).is(':checked')) {
columnObj.closest("tr").show();
}
else {
columnObj.closest("tr").hide();
}
});
}
$(document).ready(function() {
HideColumn('sino','descrizione');
});
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
</script>
<script type="text/javascript">
function HideColumn(targetColumn, hideColumn) {
var columnObj = $("input[Title='" + hideColumn + "']");
$("select[Title='" + targetColumn + "']").bind('click',function() {
if($(this).val() == "Pippo") {
columnObj.closest("tr").show();
}
else {
columnObj.closest("tr").hide();
}
});
}
$(document).ready(function() {
HideColumn('Scelta','descrizione');
});
</script>
</p>
Thank for your help,
EDIT SOLVED:
This is the correct code:
<p>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
</script>
<script type="text/javascript">
function HideColumn(targetColumn1, hideColumn1, targetColumn2, hideColumn2) {
var columnObj1 = $("input[Title='" + hideColumn1 + "']");
$("input[Title='" + targetColumn1 + "']").bind('click',function() {
if($(this).is(':checked')) {
columnObj1.closest("tr").show();
}
else {
columnObj1.closest("tr").hide();
}
});
var columnObj2 = $("input[Title='" + hideColumn2 + "']");
$("select[Title='" + targetColumn2 + "']").bind('click',function() {
if($(this).val() == "Pippo") {
columnObj2.closest("tr").show();
}
else {
columnObj2.closest("tr").hide();
}
});
}
$(document).ready(function() {
HideColumn('sino','descrizione','Scelta','Titolo');
});
</script>
</p>
Regards, Francesco
I see a couple of issues, some that will outright break this (the duplicate function definitions) & others that are less-than-optimal design. You don't need to load the jQuery library twice and you shouldn't define the same function twice with different contents.
Try this:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>
<script type="text/javascript">
function HideColumn(targetColumn, hideColumn) {
var columnObj = $("input[Title='" + hideColumn + "']");
$("input[Title='" + targetColumn + "']").bind('click',function() {
if($(this).is(':checked') || $(this).val() == "Pippo") {
columnObj.closest("tr").show();
}
else {
columnObj.closest("tr").hide();
}
});
}
$(document).ready(function() {
HideColumn('sino','descrizione');
HideColumn('Scelta','descrizione');
});
</script>
To also have the ability to hide certain columns on initial page load, consider the below:
UPDATE:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>
<script type="text/javascript">
function HideColumnOnLoad(hideColumn) {
$("input[Title='" + hideColumn + "']").closest("tr").hide();
}
function HideColumnOnClick(targetColumn, hideColumn) {
var columnObj = $("input[Title='" + hideColumn + "']");
$("input[Title='" + targetColumn + "']").bind('click',function() {
if($(this).is(':checked') || $(this).val() == "Pippo") {
columnObj.closest("tr").show();
}
else {
columnObj.closest("tr").hide();
}
});
}
$(document).ready(function() {
HideColumnOnLoad('descrizione');
HideColumnOnClick('sino','descrizione');
HideColumnOnClick('Scelta','descrizione');
});
</script>