2017-06-27 7 views
0

私はOutlookフォーマッタを構築しており、フォームの入力値をcopyDivに表示するのに問題があります。入力された値を除いて、theWholeStringのすべてを表示します。私はfocus()メソッドで何かが間違っているかもしれないと考えています。これを修正して入力を表示するにはどうすればいいですか?ここに私のソースコードは次のとおりです。jQuery focus()メソッドが機能していませんか?

$(document).ready(function() { 
 

 
    var firstName = $("#firstName").val(); 
 
    var lastName = $("#lastName").val(); 
 

 
    var lastNameLC = lastName.toLowerCase(); 
 
    var firstInitial = firstName.substr(0, 1); 
 
    var firstInitialLC = firstInitial.toLowerCase(); 
 
    var firstInitialLast = firstInitial.concat(lastName); 
 

 
    var theWholeString = "New-RemoteMailbox -Alias " + firstInitialLast + " -Name " + '"' + firstName + " " + lastName + '"' + " -FirstName " + firstName + " -LastName " + lastName + " -DisplayName " + '"' + firstName + lastName + '"' + " -UserPrincipalName " + firstInitialLC + lastNameLC + "@belmont.gov -RemoteRoutingAddress " + firstInitialLC + lastNameLC + "@belmont.gov.onmicrosoft.com -OnPremisesORganizationalUnit "; 
 

 
    var finalString = ""; 
 

 
    $("#submitButton").click(function() { 
 

 
    $('input[type="checkbox"]').click(function() { 
 
     if ($(this).prop("checked")) { 
 
     finalString = theWholeString + "blueone.pd/PDUser"; 
 
     } else { 
 
     finalString = theWholeString + "belmont.local/BelmontUsers"; 
 
     } 
 
    }); 
 

 
    $("#copyDiv").html(finalString).end().appendTo($("body")); 
 
    }); 
 

 
    return false; 
 
}); 
 

 
function changeFocus(id) { 
 
    var v = "#" + id; 
 
    $(v).focus(); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 
    <div class="container" style="margin-top:120px"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-xs-offset-3"> 
 
     <h4>1. Enter name:</h4> 
 
     <form id="nameForm" method="post" action=""> 
 
      <div class="form-group"> 
 
      <label for="firstName" class="sr-only">First:</label> 
 
      <input class="form-control" id="firstName" name="firstName" type="text" placeholder="First Name" value="" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="lastName" class="sr-only">Last:</label> 
 
      <input class="form-control" id="lastName" name="lastName" type="text" placeholder="Last Name" value="" /> 
 
      </div> 
 
      <div class="check-box"> 
 
      <label for="policeDept">Police Department?</label> 
 
      <input type="checkbox" id="pdCheck" data-group-cls="btn-group-sm"> 
 
      </div> 
 
      <button class="btn btn-primary pull-right" id="submitButton" type="button" value="Submit" />Make </button> 
 
     </form> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-xs-offset-3"> 
 
      <h4>2. Copy this text:</h4> 
 
      <div id="copyDiv" class="panel panel-default" style="padding:10px">Result 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

+0

F12、コンソールに何ですか? – mkaatman

+1

'changeFocus'メソッドは呼び出されませんか? – adeneo

+0

コンソールに何もありません。私はそれをどこで呼びますか? –

答えて

0

あなたはページがロードされたとき、ユーザは、送信ボタン上にないクリックしたときに入力フィールドから値を取得する必要があります。

チェックボックスにクリックハンドラは必要ありません。サブミット機能でチェックボックスがオンになっているかどうかをテストするだけです。

changeFocus()機能の必要性はありませんが、あなたの問題にはまったく関連していないようです。

$(document).ready(function() { 
 
    $("#submitButton").click(function() { 
 

 
    var firstName = $("#firstName").val(); 
 
    var lastName = $("#lastName").val(); 
 

 
    var lastNameLC = lastName.toLowerCase(); 
 
    var firstInitial = firstName.substr(0, 1); 
 
    var firstInitialLC = firstInitial.toLowerCase(); 
 
    var firstInitialLast = firstInitial.concat(lastName); 
 

 
    var finalString; 
 

 
    var theWholeString = "New-RemoteMailbox -Alias " + firstInitialLast + " -Name " + '"' + firstName + " " + lastName + '"' + " -FirstName " + firstName + " -LastName " + lastName + " -DisplayName " + '"' + firstName + lastName + '"' + " -UserPrincipalName " + firstInitialLC + lastNameLC + "@belmont.gov -RemoteRoutingAddress " + firstInitialLC + lastNameLC + "@belmont.gov.onmicrosoft.com -OnPremisesORganizationalUnit "; 
 
    if ($(':checkbox').is(":checked")) { 
 
     finalString = theWholeString + "blueone.pd/PDUser"; 
 
    } else { 
 
     finalString = theWholeString + "belmont.local/BelmontUsers"; 
 
    } 
 

 
    $("#copyDiv").html(finalString).appendTo($("body")); 
 
    }); 
 

 
    return false; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 
    <div class="container" style="margin-top:120px"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-xs-offset-3"> 
 
     <h4>1. Enter name:</h4> 
 
     <form id="nameForm" method="post" action=""> 
 
      <div class="form-group"> 
 
      <label for="firstName" class="sr-only">First:</label> 
 
      <input class="form-control" id="firstName" name="firstName" type="text" placeholder="First Name" value="" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="lastName" class="sr-only">Last:</label> 
 
      <input class="form-control" id="lastName" name="lastName" type="text" placeholder="Last Name" value="" /> 
 
      </div> 
 
      <div class="check-box"> 
 
      <label for="policeDept">Police Department?</label> 
 
      <input type="checkbox" id="pdCheck" data-group-cls="btn-group-sm"> 
 
      </div> 
 
      <button class="btn btn-primary pull-right" id="submitButton" type="button" value="Submit" />Make </button> 
 
     </form> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-xs-offset-3"> 
 
      <h4>2. Copy this text:</h4> 
 
      <div id="copyDiv" class="panel panel-default" style="padding:10px">Result 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

関連する問題