Kama tulivyo jifunza kwenye somo lililotangulia. Tunaweza kupata value ya data zilizomo kwenye form kwa kutumia .value. Tofauti na tulivyojifunza hapa itatubidi tuunganishe form id na input type id kisha ndipo tutumie value.
Umuhimu wa somo hili ni kuja kukusaidia katika kuthibitisha taarifa. Tutalifanyia kazi sana somobhili wakati wa kujifunza condition statement.
Tutakwenda hatuwa kwa hatuwa ili tuweze kufikia malengo ya somo yaweze kufikiwa.
- Kupata taarifa kuhusu html form
Taarifa ambazo tunakwenda kuziangalia kwenue html form ni pamoja na
- Form id
- Form method
- Form actiom
Hizi zotebkwa pamoja zinaitwa form attribute. Rejea kwenye mafunzo yetu ya html level 2.
- Kupata form ID ni kama ambavyo tumeona huko awali kwenye somo lililotangulia. Kwanza tutaandika html form. Kumbuka form yetu inakuwa na attribute hizobzilizotajwa hapo juu.
<title>User input</title>
<form id="form" method="post" action="processor.php">
<input id="data" name="name" value="" >
<input type="button" onclick="myFnc()" value="check">
</form>
Kisha tutatengeneza paragraph ya html ambayo itakwenda ku display tada zetu. Kumbuka kuipa id hiyo paragraph. Nitakwenda kuipa id ya myP
<p id="myP"></p>
Sasa tunakwenda kuandika javasrcipt function ya ku display hizo datavzetu kwenye paragraph. Kumbuka tumetumia onclick kwenye hiyo batani yenye value ya check. Hivyo baada ya ku bofya function yetu itafanya kazi.
<script>
function myFnc(){
}
</script>
Sasa function yetu itakuwa na vitu vikuu viwili. Cha kwanza ni variable na chabpili ni statement ambayo inakwenda ku display data zilizomo kwenye variable yetu.
Variable yetu tutaiita btnId hii itachukuwa datavkutokabkwenye form yetu. Kumbuka element ya html ambayo unataka kuchukuwq data zake unatakiwa utumie id yake. Katika mfano tutatukia form ambayo ndio id ya form yetu. Kisha ili kuchukuwq datavgusika tutaweka .id ili kuchukuwa id. Mfano kama huu kama unataka kuchukuwa method tutatumia .method na endapo tutataka kuchukuwa action tutatumia .action
var btnId = document.getElementById("form").id;
Kitu cha pili kinachokaa kwenye function yetu ni statement ya ku display data zilizopo kwenye form yetu.
Jambo la kuzingatia ni kuwa matokeo ya hiyo statement yanatakiwa yaonekane kwenye paragraph hivyo tutatumia getElementById kisha tutaweka id ya hiyo paragraoh yetu amabyo ni myP
document.getElementById("myP").innerHTML = btnId;
Code nzima zipo hivi:
<title>User input</title>
<form id="form" method="post" action="processor.php">
<input id="data" name="name" value="" >
<input type="button" onclick="myFnc()" value="check">
</form>
<p id="myP"></p>
<script>
function myFnc(){
var btnId = document.getElementById("form").id;
document.getElementById("myP").innerHTML = btnId;
}
</script>
