동적으로 생성 된 입력 상자에 입력 된 값을 추출하고 jquery를 사용하여 컨트롤러에 전달하는 방법은 무엇입니까?

Question

사용자가 입력 상자를 입력하여 클릭 한 번으로 제거 할 수있는 양식이 있습니다. 이 입력 상자에 입력 된 값을 추출하여 jQuery를 사용하여 컨트롤러에 전달하려고합니다. 어떻게해야합니까? 지금은 값을 추출하기 위해 ID를 사용하고 있지만 4 옵션을 추가 한 다음 모든 옵션을 제거한 다음 입력을 다시 입력한다고 가정하면 더 좋은 방법이라고 생각하지 않습니다. 이러한 ID를 추적하고 값을 추출하십시오.

var MaxOptions  = 4; //maximum input boxes allowed 
    var Optionsform = $("#Options"); //Input boxes wrapper ID 
    var AddButton  = $("#addoption_btn"); //Add button ID 
    var x = Optionsform.length; //initial text box count 
    var OptionCount=1; //to keep track of text box added 
    $(AddButton).click(function (e) //on add input button click 
{ 
     if(x <= MaxOptions) //max input box allowed 
     { 
      OptionCount++; //text box added increment 
      //add input box 
      $(Optionsform).append('<div><input type="text" name="mytext[]" id="option_'+ OptionCount +'" placeholder="Option '+ OptionCount +'"/><a href="#" class="removeclass">&times;</a></div>'); 
      x++; //text box increment 
     } 
return false; 
}); 

$("body").on("click",".removeclass", function(e){ //user click on remove text 
     if(x > 1) { 
       $(this).parent('div').remove(); //remove text box 
       x--; //decrement textbox 
     } 
return false; 
}); 

다음

JQuery와 내가 내 컨트롤러에 데이터를 전달하는 데 사용하고있다 :

$("#addquestion_btn").click(function(){ 
     var val= CKEDITOR.instances['question_topic'].getData(); 
      storequestion(val);   
    }); 


function storequestion(ques) 
    { 
     $.post("/instructor/store/question",{ 
      question: ques, 
      option1: $("#option_1").val(), 
      option2: $("#option_2").val() 
     },function(data){ 
      if(data[0]==="success") 
       { 
        window.location.href = '/instructor/create/topics'; 
       } 
       else 
        { 
         alert("fails"); 
         window.location.href = '/instructor'; 
      //redirect to further page to enter courses 
     }} 
    ,'json'); 


    } 

Answer 1

을 여기

<button type="button" class="addoption" id="addoption_btn">Add more option</button> 
<div id="Options"> 
<input type="text" name="mytext[]" id="option_1" placeholder="Option 1"/> 
</div> 

내 자바 스크립트입니다 : 여기

내 HTML 코드입니다

아래 표시된 코드를 사용하여 표시된 모든 옵션을 읽으십시오.

function storequestion(ques) { 
      obj = {}; 
      obj[question] = ques; 
      $("#Options:input[name*='mytext']").each(function (index) { 
       obj['option' + index] = $(this).val(); 
      }); 

      $.post("/instructor/store/question", obj 
       , function (data) { 
        if (data[0] === "success") { 
         window.location.href = '/instructor/create/topics'; 
        } 
        else { 
         alert("fails"); 
         window.location.href = '/instructor'; 
         //redirect to further page to enter courses 
        } 
       } 
       , 'json'); 


     }