2017-07-17 1 views
-1

私はJquery Mobileを試しています。私のフォーム要素がなぜ「未定義」に戻ったのか、間違いがあるようです。 onclick()関数がメンバーボタンで実行されたときにフォームが作成されていないことが間違いだと思います。私は、このコードは、おそらく私のHTMLのCSS/jsファイルが見つからないために実行されない知っている。誰かが私の間違いをすぐに見て、それを指摘してくれることを願っています。jvalery mobileを使用しているDOM要素に対して.val()が 'undefined'を返すのはなぜですか?

JS:

$(document).ready(function() { 


}); 

function createMember() { 
    var memberName = $("#memberName").val(); 
    var userName = $('#username').val(); 
    var pass = $('#password').val(); 

    var newMember = new submitMember(memberName, userName, pass); 
    console.log(newMember); 
} 

function submitMember(Name, Username, Password) { 
    this.Name = Name; 
    this.UserName = Username; 
    this.Password = Password; 
} 

HTML:あなたの関数はthis.propertyNameを設定する必要があります

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="C:\Users\ali\Desktop\Jquery Mobile\themes\CustomDarkBlue.css" /> 
     <link rel="stylesheet" href="C:\Users\ali\Desktop\Jquery Mobile\themes\jquery.mobile.icons.min.css"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css"/> 
     <script src="C:\Users\ali\Documents\jquery-2.0.0.min.js"></script> 
     <script src="C:\Users\ali\Desktop\Jquery Mobile\jquery.mobile.custom.js"></script> 
     <script src="C:\Users\ali\Documents\Youtube_ContactsApp\js\VolunteerEfforts.js"></script> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--the meta tag is to ensure that the view size remains 1px to 1 display pixel--> 
    <!--class="ui-btn-active"--> 
    </head> 
     <title>Volunteer Effort</title> 
      <body> 
       <div data-role="navbar" data-grid="c"> 
        <ul> 
         <li><a href="#popupLoginInstitute" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Institution</a></li> 
         <li><a href="#popupLoginMember" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Member</a></li> 
         <li><a href="#" class="ui-btn-active">Upcoming Events</a></li> 
         <li><a href="#" class="ui-btn-active">Contact</a></li> 
        </ul> 

         <!--<button type="submit" id="submit" onclick = "createMember()" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign Up</button>--> 

       </div><!--/navbar--> 

       <div data-role="popup" id="popupLoginInstitute" data-theme="a" class="ui-corner-all"> 
        <form> 
         <div style="padding:10px 20px;"> 
          <h3>Sign up as a new Institution</h3> 
          <label for="institution" class="ui-hidden-accessible">Username:</label> 
          <input type="text" name="user" id="institution" value="" placeholder="Institution Name" data-theme="a"> 
          <label for="Address" class="ui-hidden-accessible">Institution Address:</label> 
          <input type="text" name="address" id="address" value="" placeholder="Address" data-theme="a"> 
          <label for="username" class="ui-hidden-accessible">Username:</label> 
          <input type="text" name="user" id="username" value="" placeholder="Username" data-theme="a"> 
          <label for="password" class="ui-hidden-accessible">Password:</label> 
          <input type="password" name="pass" id="password" value="" placeholder="Password" data-theme="a"> 
          <label for="email" class="ui-hidden-accessible">Email:</label> 
          <input type="text" name="email" id="email" value="" placeholder="Email" data-theme="a"> 
          <label for="institutionSelect">Institution Selection:</label> 
          <select name="institutionSelect" id="institutionSelect" data-mini="true"> 
           <option value="1">Religious Organization</option> 
           <option value="2">Food Bank</option> 
           <option value="3">Homeless Shelter</option> 
           <option value="4">Public School</option> 
          </select> 
          <button type="submit" id="submitInstitute" onclick = "createInstitute()" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign Up</button> 
         </div> 
        </form> 
       </div> 

       <div data-role="popup" id="popupLoginMember" data-theme="a" class="ui-corner-all"> 
        <form> 
         <div style="padding:10px 20px;"> 
          <h3>Sign up as a new Member</h3> 
          <label for="member" >Full Name:</label> 
          <input type="text" name="member" id="memberName" placeholder="Member's Full Name" data-theme="a"> 
          <label for="username" class="ui-hidden-accessible">Username:</label> 
          <input type="text" name="user" id="username" placeholder="Username" data-theme="a"> 
          <label for="password" class="ui-hidden-accessible">Password:</label> 
          <input type="password" name="pass" id="password" placeholder="Password" data-theme="a"> 
          <button type="button" onclick="createMember()" id="submitMember" >Sign Up</button> 
         </div> 
        </form> 
       </div> 
      </body> 
</html> 
+0

あなたの "準備" ハンドラ内でこれら 'var'宣言は意味がありません。彼らは文字通りそのハンドラ関数の外側には何の効果もありません。 – Pointy

+0

私の悪い、私はjsfiddleでテストしていたことを忘れてしまった。私は正しい編集をしました –

+0

Javascript以外のプログラミング言語はありますか?私は自分の電話にいますが、あなたのサブミットメンバー機能が間違っていると思います。しかし、間違っている可能性があります。がんばろう。 –

答えて

2

、変数を設定しません。

function submitMember(name, userName, password) { 
 
    this.name = name 
 
    this.userName = userName; 
 
    this.password = password 
 
} 
 

 
var user1 = new submitMember("A", "B", "C"); 
 
var user2 = new submitMember("FOO", "BAR", "WORLD"); 
 
console.log(user1); 
 
console.log(user2);

+0

参考に、彼は新しい電話をする必要がありますか?それがどのように機能するのか、それが必要なのかどうかは不明です。 –

関連する問題