Minimizing JQuery Script

Question

I'm making some survey pages. And I need to control screen with some options and restrictions when surveyer answer the questions. for that I'am currently using jQuery and it is very manual jobs and codes look stupid because of there are so many duplicated functions and etc. So Could you give me some advice about how to minimize jquery script that i'd been written.

belows are scripts

$( document ).ready(function() {


// Block text input at the very first
 $("#q1_1_etc, #q1_2_etc, #q1_3_etc, #q1_4_etc,#q1_5_etc, #q1_6_etc, #q2_1_etc, #q2_2_etc, #q2_3_etc, #q3_1_etc, #q3_2_etc, #q3_3_etc, #q4_1_etc, #q4_2_etc, #q4_3_etc, #q4_4_etc, #q5_1_etc ,#q5_5_etc").attr("disabled","disabled" );

//Block/Unblock input type on checkbox
 $("#q1_1_5").change(function(){
    if($(this).is(":checked")==true){
        $("#q1_1_etc").removeAttr("disabled");
    }else{
        $("#q1_1_etc").val(" ");
        $("#q1_1_etc").attr("disabled","disabled" );
    }

 });

  $("#q1_4_4").change(function(){
    if($(this).is(":checked")==true){
        $("#q1_4_etc").removeAttr("disabled");
    }else{
        $("#q1_4_etc").val(" ");
        $("#q1_4_etc").attr("disabled","disabled" );
    }

 });

 //Block/Unblock input type on radio
 $("input[name='q1_2']").change(function(){
    if($("#q1_2_3").is(":checked")==true){
        $("#q1_2_etc").removeAttr("disabled");
    }else{
        $("#q1_2_etc").val(" ");
        $("#q1_2_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q1_3']").change(function(){
    if($("#q1_3_3").is(":checked")==true){
        $("#q1_3_etc").removeAttr("disabled");
    }else{
        $("#q1_3_etc").val(" ");
        $("#q1_3_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q1_5']").change(function(){
    if($("#q1_5_3").is(":checked")==true){
        $("#q1_5_etc").removeAttr("disabled");
    }else{
        $("#q1_5_etc").val(" ");
        $("#q1_5_etc").attr("disabled","disabled" );
    }

 });

  $("input[name='q1_6']").change(function(){
    if($("#q1_6_3").is(":checked")==true){
        $("#q1_6_etc").removeAttr("disabled");
    }else{
        $("#q1_6_etc").val(" ");
        $("#q1_6_etc").attr("disabled","disabled" );
    }

 });

  $("input[name='q2_1']").change(function(){
    if($("#q2_1_3").is(":checked")==true){
        $("#q2_1_etc").removeAttr("disabled");
    }else{
        $("#q2_1_etc").val(" ");
        $("#q2_1_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q2_2']").change(function(){
    if($("#q2_2_3").is(":checked")==true){
        $("#q2_2_etc").removeAttr("disabled");
    }else{
        $("#q2_2_etc").val(" ");
        $("#q2_2_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q2_3']").change(function(){
    if($("#q2_3_3").is(":checked")==true){
        $("#q2_3_etc").removeAttr("disabled");
    }else{
        $("#q2_3_etc").val(" ");
        $("#q2_3_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q3_1']").change(function(){
    if($("#q3_1_3").is(":checked")==true){
        $("#q3_1_etc").removeAttr("disabled");
    }else{
        $("#q3_1_etc").val(" ");
        $("#q3_1_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q3_2']").change(function(){
    if($("#q3_2_3").is(":checked")==true){
        $("#q3_2_etc").removeAttr("disabled");
    }else{
        $("#q3_2_etc").val(" ");
        $("#q3_2_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q3_3']").change(function(){
    if($("#q3_3_4").is(":checked")==true){
        $("#q3_3_etc").removeAttr("disabled");
    }else{
        $("#q3_3_etc").val(" ");
        $("#q3_3_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q4_1']").change(function(){
    if($("#q4_1_3").is(":checked")==true){
        $("#q4_1_etc").removeAttr("disabled");
    }else{
        $("#q4_1_etc").val(" ");
        $("#q4_1_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q4_2']").change(function(){
    if($("#q4_2_3").is(":checked")==true){
        $("#q4_2_etc").removeAttr("disabled");
    }else{
        $("#q4_2_etc").val(" ");
        $("#q4_2_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q4_3']").change(function(){
    if($("#q4_3_3").is(":checked")==true){
        $("#q4_3_etc").removeAttr("disabled");
    }else{
        $("#q4_3_etc").val(" ");
        $("#q4_3_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q4_4']").change(function(){
    if($("#q4_4_3").is(":checked")==true){
        $("#q4_4_etc").removeAttr("disabled");
    }else{
        $("#q4_4_etc").val(" ");
        $("#q4_4_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q5_1']").change(function(){
    if($("#q5_1_7").is(":checked")==true){
        $("#q5_1_etc").removeAttr("disabled");
    }else{
        $("#q5_1_etc").val(" ");
        $("#q5_1_etc").attr("disabled","disabled" );
    }

 });

 $("input[name='q5_5']").change(function(){
    if($("#q5_5_11").is(":checked")==true){
        $("#q5_5_etc").removeAttr("disabled");
    }else{
        $("#q5_5_etc").val(" ");
        $("#q5_5_etc").attr("disabled","disabled" );
    }

 });



});

function onSubmit(){

var aq1_1=$("input[name^='q1_1']:checked").val();
if(aq1_1 == undefined){
    alert("1-1 Please, Answer the question!");  
    $("#viewpoint1_1").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_1_5").is(":checked");
var isEtcEmpty=$("#q1_1_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-1 Please, Answer the question!.");
    $("#q1_1_etc").focus();
    return;
}


var aq1_2=$("input[name^='q1_2']:checked").val();
if(aq1_2 == undefined){
    alert("1-2 Please, Answer the question!");  
    $("#viewpoint1_2").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_2_3").is(":checked");
var isEtcEmpty=$("#q1_2_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-2 Please, Answer the question!.");
    $("#q1_2_etc").focus();
    return;
}

var aq1_3=$("input[name^='q1_3']:checked").val();
if(aq1_3 == undefined){
    alert("1-3 Please, Answer the question!");  
    $("#viewpoint1_3").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_3_3").is(":checked");
var isEtcEmpty=$("#q1_3_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-3 Please, Answer the question!.");
    $("#q1_3_etc").focus();
    return;
}

var aq1_4=$("input[name^='q1_4']:checked").val();
if(aq1_4 == undefined){
    alert("1-4 Please, Answer the question!");  
    $("#viewpoint1_4").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_4_4").is(":checked");
var isEtcEmpty=$("#q1_4_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-4 Please, Answer the question!.");
    $("#q1_4_etc").focus();
    return;
}

var aq1_5=$("input[name^='q1_5']:checked").val();
if(aq1_5 == undefined){
    alert("1-5 Please, Answer the question!");  
    $("#viewpoint1_5").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_5_3").is(":checked");
var isEtcEmpty=$("#q1_5_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-5 Please, Answer the question!.");
    $("#q1_5_etc").focus();
    return;
}

var aq1_6=$("input[name^='q1_6']:checked").val();
if(aq1_6 == undefined){
    alert("1-6 Please, Answer the question!");  
    $("#viewpoint1_6").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q1_6_3").is(":checked");
var isEtcEmpty=$("#q1_6_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("1-6 Please, Answer the question!.");
    $("#q1_6_etc").focus();
    return;
}

var aq2_1=$("input[name^='q2_1']:checked").val();
if(aq2_1 == undefined){
    alert("2-1 Please, Answer the question!");  
    $("#viewpoint2_1").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q2_1_3").is(":checked");
var isEtcEmpty=$("#q2_1_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("2-1 Please, Answer the question!.");
    $("#q2_1_etc").focus();
    return;
}

var aq2_2=$("input[name^='q2_2']:checked").val();
if(aq2_2 == undefined){-
    alert("2-2 Please, Answer the question!");  
    $("#viewpoint2_2").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q2_2_3").is(":checked");
var isEtcEmpty=$("#q2_2_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("2-2 Please, Answer the question!.");
    $("#q2_2_etc").focus();
    return;
}


var aq2_3=$("input[name^='q2_3']:checked").val();
if(aq2_3 == undefined){
    alert("2-3 Please, Answer the question!");  
    $("#viewpoint2_3").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q2_3_3").is(":checked");
var isEtcEmpty=$("#q2_3_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("2-3 Please, Answer the question!.");
    $("#q2_3_etc").focus();
    return;
}


var aq3_1=$("input[name^='q3_1']:checked").val();
if(aq3_1 == undefined){
    alert("3-1 Please, Answer the question!");  
    $("#viewpoint3_1").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q3_1_3").is(":checked");
var isEtcEmpty=$("#q3_1_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("3-1 Please, Answer the question!.");
    $("#q3_1_etc").focus();
    return;
}


var aq3_2=$("input[name^='q3_2']:checked").val();
if(aq3_2 == undefined){
    alert("3-2 Please, Answer the question!");  
    $("#viewpoint3_2").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q3_2_3").is(":checked");
var isEtcEmpty=$("#q3_2_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("3-2 Please, Answer the question!.");
    $("#q3_2_etc").focus();
    return;
}

var aq3_3=$("input[name^='q3_3']:checked").val();
if(aq3_3 == undefined){
    alert("3-3 Please, Answer the question!");  
    $("#viewpoint3_3").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q3_3_3").is(":checked");
var isEtcEmpty=$("#q3_3_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("3-3 Please, Answer the question!.");
    $("#q3_3_etc").focus();
    return;
}

var aq4_1=$("input[name^='q4_1']:checked").val();
if(aq4_1 == undefined){
    alert("4-1 Please, Answer the question!");  
    $("#viewpoint4_1").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q4_1_3").is(":checked");
var isEtcEmpty=$("#q4_1_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("4-1 Please, Answer the question!.");
    $("#q4_1_etc").focus();
    return;
}

var aq4_2=$("input[name^='q4_2']:checked").val();
if(aq4_2 == undefined){
    alert("4-2 Please, Answer the question!");  
    $("#viewpoint4_2").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q4_2_3").is(":checked");
var isEtcEmpty=$("#q4_2_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("4-2 Please, Answer the question!.");
    $("#q4_2_etc").focus();
    return;
}

var aq4_3=$("input[name^='q4_3']:checked").val();
if(aq4_3 == undefined){
    alert("4-3 Please, Answer the question!");  
    $("#viewpoint4_3").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q4_3_3").is(":checked");
var isEtcEmpty=$("#q4_3_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("4-3 Please, Answer the question!.");
    $("#q4_3_etc").focus();
    return;
}

var aq4_4=$("input[name^='q4_4']:checked").val();
if(aq4_4 == undefined){
    alert("4-4 Please, Answer the question!");  
    $("#viewpoint4_4").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q4_4_3").is(":checked");
var isEtcEmpty=$("#q4_4_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("4-4 Please, Answer the question!.");
    $("#q4_4_etc").focus();
    return;
}



var aq5_1=$("input[name^='q5_1']:checked").val();
if(aq5_1 == undefined){
    alert("5-1 Please, Answer the question!");  
    $("#viewpoint5_1").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q5_1_7").is(":checked");
var isEtcEmpty=$("#q5_1_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("5-1 Please, Answer the question!.");
    $("#q5_1_etc").focus();
    return;
}

var aq5_2=$("input[name^='q5_2']:checked").val();
if(aq5_2 == undefined){
    alert("5-2 Please, Answer the question!");  
    $("#viewpoint5_2").get(0).scrollIntoView(true);
    return;
}

var aq5_3=$("input[name^='q5_3']:checked").val();
if(aq5_3 == undefined){
    alert("5-3 Please, Answer the question!");  
    $("#viewpoint5_3").get(0).scrollIntoView(true);
    return;
}

var aq5_4=$("input[name^='q5_4']:checked").val();
if(aq5_4 == undefined){
    alert("5-4 Please, Answer the question!");  
    $("#viewpoint5_4").get(0).scrollIntoView(true);
    return;
}

var aq5_5=$("input[name^='q5_5']:checked").val();
if(aq5_5 == undefined){
    alert("5-5 Please, Answer the question!");  
    $("#viewpoint5_5").get(0).scrollIntoView(true);
    return;
}

var isEtcChecked=$("#q5_5_11").is(":checked");
var isEtcEmpty=$("#q5_5_etc").val().length;
if(isEtcChecked== true && isEtcEmpty ==0){
    alert("5-5 Please, Answer the question!.");2014-04-23
    $("#q5_5_etc").focus();
    return;
}


if($("#companyName").val().length ==0){
    alert("Please Answer the Question");
    return;
}

if($("#writer").val().length ==0){
    alert("Please Answer the Question");
    return;
}

if($("#phoneFax").val().length ==0){
    alert("Please Answer the Question");
    return;
}

if($("#contactemail").val().length ==0){
    alert("Please Answer the Question");
    return;
}

if($("#location").val().length ==0){
    alert("Please Answer the Question");
    return;
}


form.action = "customs_save.jsp";
form.submit();

}

as you can see there are heaps of duplications. and If i say one more time i want change it to the way more efficient.

if you know about it please tell me your experience and give a advice that will be helpful for me.

thank you.

Answer 1

1. Replace

   $("#q1_1_etc, #q1_2_etc, #q1_3_etc, #q1_4_etc,#q1_5_etc, #q1_6_etc, #q2_1_etc, #q2_2_etc, #q2_3_etc, #q3_1_etc, #q3_2_etc, #q3_3_etc, #q4_1_etc, #q4_2_etc, #q4_3_etc, #q4_4_etc, #q5_1_etc ,#q5_5_etc").attr("disabled","disabled" );
   

by

// If you want to disabled all input fields
$(":input").attr("disabled", "disabled");

// If you want to disable only a subset. Add them to a container like a div
$("#myInputContainer :input").attr("disabled", "disabled");

1. Use generic event handlers for your input fields replacing things like this:

   $("#q1_1_5").change(function(){
     if($(this).is(":checked")==true){
         $("#q1_1_etc").removeAttr("disabled");
     }else{
         $("#q1_1_etc").val(" ");
         $("#q1_1_etc").attr("disabled","disabled" );
     }
   });
   
   
   $("#q1_4_4").change(function(){
     if($(this).is(":checked")==true){
       $("#q1_4_etc").removeAttr("disabled");
     }else{
       $("#q1_4_etc").val(" ");
       $("#q1_4_etc").attr("disabled","disabled" );
     }
   
   });
   

by

$("input").change(function(){
  var relatedElementId = "#" + $(this).attr("id") + "_etc";
  if($(this).is(":checked")==true){
      $(relatedElementId).removeAttr("disabled");
  }else{
      $(relatedElementId).val(" ");
      $(relatedElementId).attr("disabled","disabled" );
  }

});

The main idea is to use jQuery selectors and organize your DOM struture to make generic code easy to write.

Answer 2

Use index ->.eq(i)

Use common class at input

$(document).ready(function(){

$('.common_class_input').each(function(i){

    //use index! ->.eq(i)

    //use common class at input

    if($(this).is(":checked")==true)

    {

               $('.common_class_input').eq(i)//Do something

    }else{

               $('.common_class_input').eq(i)//Do something

            }

})

});