html jquery kann keinen Eingabewert erhalten

Question

Diese ganze Jquery-Sache ist neu für mich. Ich habe einige Probleme. Ich habe ein Formular und kann meine Texteingabe nicht erhalten. Die Texteingabe verfügt über einen Datenlisteneintrag, der dynamisch erstellt wird, wenn der Benutzer ein Datum aus einem Datumssteuerelement auswählt. Wenn ich den Datumswert anrufe, erhalte ich den Wert, der ausgewählt wurde. Wenn ich versuche, den Eingabewert aufzurufen, ist es undefined. Ich weiß nicht, was der Grund dafür ist, warum es nicht anrufen kann. Kann mir jemand helfen oder in die richtige Richtung weisen?

function Function1() { 
 
    console.log($("#inp_encounterdate").val()); 
 
    $.ajax({ 
 
    url: "photoapp.asmx/stuff", 
 
    data: "selected_enc_date=" + $("#inp_encounterdate").val(), 
 
    success: OnGetFunction1Success, 
 
    error: OnGetFunction1Error 
 
    }); 
 
} 
 

 
function OnGetFunction1Success(msg, status) { 
 
    console.log("Success OnGetProviderSuccess"); 
 
    console.log(msg); 
 
    var provider_list = msg; 
 
    $('#provider_data').empty(); 
 
    $(provider_list).find("Provider").each(function() { 
 
    optionRow = "<option id='" + $(this).find("provider_id").text() + 
 
     "' value='" + $(this).find("name").text() + "'/>"; 
 
    console.log(optionRow); 
 
    $('#provider_data').append(optionRow); 
 
    }) 
 
} 
 

 
function OnGetFunction1Error(data, status) { 
 
    console.log("Error: OnGetProviderError: " + status); 
 
} 
 

 
function Function2() { 
 
    console.log("enc_date=" + $("#inp_encounterdate").val()); // I get the value from the date picker. 
 
    console.log("provider_id=" + $("#inp_provider").val()); // ERROR HERE: I can't get the value, I get 'undefined' 
 
    $.ajax({ 
 
    url: "photoapp.asmx/something2", 
 
    data: "enc_date=" + $("#inp_encounterdate").val() + "&" + "provider_id=" + $("#inp_provider").val(), 
 
    success: OnGetEncountersSuccess, 
 
    error: OnGetEncountersError 
 
    }); 
 
} 
 

 
function OnGetFunction2Success(data, status) { 
 
    console.log(data); 
 
    var encounter_list = data; 
 
    $('#encounter_data').empty(); 
 
    var optionRow = ""; 
 
    $(encounter_list).find("Encounter").each(function(index, encounter) { 
 
    optionRow = "<option data-value='" + $(this).find("id").text() + 
 
     "'>" + $(this).find("patient_name").text() + " (" + $(this).find("time").text() + ")" + "</option>"; 
 
    console.log(optionRow); 
 
    $('#encounter_data').append(optionRow); 
 
    }); 
 
} 
 

 
function OnGetFunction2Error(data, status) { 
 
    console.log("OnGetEncountersError: " + status); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="frmSnap" method="post" action="" role="snap" onsubmit=""> 
 
    <div class="col-xs-12"> 
 
    <input type="date" id="inp_encounterdate" placeholder="Encounter" required onchange="Function1()" class="form-control input-lg" /> 
 
    <span class="fa fa-calendar fa-lg"></span> 
 
    <div class="col-xs-12"> 
 
     <input type="text" name="inp_provider" placeholder="Provider" required class="form-control input-lg" list="provider_data" onchange="Function2()" /> 
 
     <span class="fa fa-user-md fa-lg"></span> 
 
    </div> 
 
</form>

Answer 1

ist Ihr inp_provider der Name nicht die ID.

# Hash ist der CSS-ID-Selektor.

Versuchen:

$('input[name=inp_provider]').val(); 

Answer 2

Sie können einfach bearbeiten JQuery-Selektor:

instead of $("#inp_provider").val(), put $("input[name=inp_provider]").val()