2017-05-03 30 views
-1

下面是我的代碼,它在每次單擊添加按鈕並刪除該行中的文本框時,以模態彈出形式動態創建文本框當我點擊刪除按鈕,這是工作正常,直到這裏的問題是我有JavaScript函數驗證月份日期和年份在文本框中,如果我們給任何數字大於12它顯示消息,該月應該少於12同樣的日期也會接受,直到31日,但如果它大於31它顯示錯誤信息和同樣的一年也,但這是爲我們的asp文本框完成我怎麼能使這個JavaScript函數工作在模式彈出窗口的文本框創建動態如何激活在asp.net中動態創建的文本框中的javascript函數

 <script type="text/javascript"> 
     function GetDynamicTextBox(value) { 
      if (value == "") { 
       FillDropdown() 
       return '<input name = "DynamicTextBox" value = "' + value + '" placeholder="MM/DD/YYYY"></input>&nbsp;&nbsp;<select name = "DynamicTextBox" >"' + Hours + '"</Select><b>:</b><select name = "DynamicTextBox">"' + Min + '"</Select>' + 
          ' <input id="btnAdd123" type="button" value="Add" onclick="AddTextBox()" /><input type="button" value="Remove" onclick = "RemoveTextBox(this)" />' 
       //Min = ""; 
       // Hours = ""; 
       // 
      } 

     } 
     var HHEdit = ""; 
     var MMEdit = ""; 
     function GetDynamicTextBox1(value) { 


      values = value.split(' '); 
      one = values[0]; 
      two = values[1]; 

      values = two.split(':'); 
      three = values[0]; 
      Four = values[1]; 




      HHEdit = three; 
      MMEdit = Four; 
      FillDropdown() 

      return '<input name = "DynamicTextBox" value = "' + one + '" placeholder="MM/DD/YYYY"></input>&nbsp;&nbsp;<select name = "DynamicTextBox" >"' + Hours + '"</Select><b>:</b><select name = "DynamicTextBox">"' + Min + '"</Select>' + 
         ' <input id="btnAdd123" type="button" value="Add" onclick="AddTextBox()" /><input type="button" value="Remove" onclick = "RemoveTextBox(this)" />' 
      // $('.DynamicTextBox').val(one); 
     } 
     function AddTextBox() { 
      var div = document.createElement('DIV'); 
      div.innerHTML = GetDynamicTextBox(""); 
      document.getElementById("TextBoxContainer").appendChild(div); 
     } 
     function AddTextBox1() { 
      var inputCount = document.getElementById('TextBoxContainer').getElementsByTagName('input').length; 
      if (inputCount == "0") { 
       var div = document.createElement('DIV'); 
       div.innerHTML = GetDynamicTextBox(""); 
       document.getElementById("TextBoxContainer").appendChild(div); 
      } 


     } 
     function RemoveTextBox(div) { 
      document.getElementById("TextBoxContainer").removeChild(div.parentNode); 
     } 

     function RecreateDynamicTextboxes() { 
      var values = eval('<%=Values%>'); 
     if (values != null) { 
      var html = ""; 
      for (var i = 0; i < values.length; i++) { 
       html += "<div>" + GetDynamicTextBox1(values[i]) + "</div>"; 
      } 
      document.getElementById("TextBoxContainer").innerHTML = html; 
     } 
    } 

    var Hours = ""; 
    var Min = ""; 
    function FillDropdown() { 
     for (var i = 0; i < 24; i++) { 
      if (i >= 0 && i <= 9) { 
       if (HHEdit != "" && HHEdit == i) { 
        Hours += '<option value="' + i + '" selected="selected">' + " 0" + i + " " + '</option>' 
       } 
       else { 
        Hours += '<option value="' + i + '">' + " 0" + i + " " + '</option>'; 
       } 
      } 
      else { 
       if (HHEdit != "" && HHEdit == i) { 
        Hours += '<option value="' + i + '" selected="selected">' + " " + i + " " + '</option>'; 
       } 
       else { 
        Hours += '<option value="' + i + '">' + " " + i + " " + '</option>'; 
       } 
      } 


     } 
     for (var i = 0; i < 60; i++) { 
      if (i >= 0 && i <= 9) { 
       if (MMEdit != "" && MMEdit == i) { 
        Min += '<option value="' + i + '" selected="selected">' + " 0" + i + " " + '</option>'; 
       } 
       else { 
        Min += '<option value="' + i + '">' + " 0" + i + " " + '</option>'; 
       } 
      } 
      else { 
       if (MMEdit != "" && MMEdit == i) { 
        Min += '<option value="' + i + '" selected="selected">' + " " + i + " " + '</option>'; 
       } 
       else { 

        Min += '<option value="' + i + '">' + " " + i + " " + '</option>'; 
       } 
      } 

     } 
     //$('#Item').append(option); 
    } 


    window.onload = RecreateDynamicTextboxes; 
</script> 

使用月日驗證碼的javascript

var fdate = document.getElementById('<%=txtFromDate.ClientID%>').value; 
       var tdate = document.getElementById('<%=txtToDate.ClientID%>').value; 
       var fromdate = fdate.split('/'); 
       var fmonth = fromdate[0]; 
       var fdate = fromdate[1]; 
       var fyear = fromdate[2]; 
       if (fmonth > 12) { 
        message += "From Month Should Be Less Than 12." + "\n"; 
       } 
       if (fdate > 31) { 
        message += "From Date Cannot Be Greater Than 31." + "\n"; 
       } 
       if (fyear < 2000 || fyear > 2030) { 
        message += "From Year Should Be In Between 2000 to 2030." + "\n"; 
       } 
       var todate = tdate.split('/'); 
       var tmonth = todate[0]; 
       var tdate = todate[1]; 
       var tyear = todate[2]; 
       if (tmonth > 12) { 
        message += "To Month Should Be Less Than 12." + "\n"; 
       } 
       if (tdate > 31) { 
        message += "To Date Cannot Be Greater Than 31." + "\n"; 
       } 
       if (tyear < 2000 || tyear > 2030) { 
        message += "To Year Should Be In Between 2000 to 2030."+"\n"; 
       } 
       if (message != "") { 
        alert(message); 
        return false; 
       } 
From Date: <asp:TextBox ID="txtFromDate" Width="113px" runat="server" placeholder="mm/dd/yyyy" onkeypress="return IsValidData(event);" ondrop="return false;" 
     onpaste="return false;" onkeyup="this.value=this.value.replace(/^(\d\d)(\d)$/g,'$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2').replace(/[^\d\/]/g,'')"></asp:TextBox> <span id="error" style="color: Red; display: none">* Invalid Character</span>&nbsp;&nbsp; 
    To Date: <asp:TextBox ID="txtToDate" Width="113px" runat="server" placeholder="mm/dd/yyyy" onkeypress="return IsValidData(event);" ondrop="return false;" 
     onpaste="return false;" onkeyup="this.value=this.value.replace(/^(\d\d)(\d)$/g,'$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2').replace(/[^\d\/]/g,'')"></asp:TextBox><span id="Span1" style="color: Red; display: none">* Invalid Character</span>&nbsp;&nbsp; 
+0

你試着用'onchange'? – Webruster

+0

是的,它使用的是ASP文本框,但它不適用於動態創建的文本框 –

+0

我沒有看到將客戶端事件處理程序添加到動態創建的客戶端控件的部分。除非在創建後向控件顯式添加事件處理程序,否則不會發生客戶端事件。 –

回答

0

我不知道你實際上已經定義了IsValidData功能。我假設你已經做了什麼地方...

你可以通過您IsValidData功能參數與在你的函數觸發事件的元素來工作..

而且你應該嘗試從內聯函數轉移到事件監聽器。這篇文章(JavaScript click event listener on class)討論瞭如何將一個事件監聽器應用到一個DOM元素類中。

如果您使用的是jQuery,因爲您包含此標記,那麼我建議您查看jQuery .on()函數以添加事件處理程序。它會讓一切更容易(http://api.jquery.com/on/

如果你不知道一個JavaScript事件監聽器是什麼,然後從這裏開始(https://www.w3schools.com/js/js_htmldom_eventlistener.asp

+0

我不是在我的代碼中有無效的數據功能你可以通過編輯我的代碼來顯示我,因爲我是這個概念的新手 –

+0

你需要閱讀這兩篇文章:https://www.w3schools.com/js/js_function_definition.asp https://www.w3schools.com/js/js_htmldom_eventlistener.asp – l0ul0u

+0

我已經看到這兩篇文章的代碼是在這兩個文章類似於ny javascript函數我的問題是如何激發我的javascript函數在這個return'