Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Mengganti textbox hasil menjadi label

Saya ingin menampilkan hasil penjumlahan dua textbox, begini scriptnya:

<script language="javascript">
<!--
function jumlah(){
var a,b;
a = parseFloat(form1.angka1.value);
if (isNaN(a))
a=0.0;
b = parseFloat(form1.angka2.value);
if (isNaN(b))
b=0.0;
form1.hasil.value = a + b;
}
-->
</script>

<form name="form1" id="form1">
Angka 1 : <input type="text" name="angka1" onKeyUp="jumlah();">

Angka 2 : <input type="text" name="angka2" onKeyUp="jumlah();">

Hasil : <input type="text" name="hasil">
</form>

tapi saya ingin menampilkan hasilnya bukan dalam textbox karena dapat dihapus. Bisa tidak kita menggantinya menjadi label / tulisan. Bagaimana caranya???:):):):)

Comments

  • pak newuser, nanya... ,!,,, (gambar tunjuk jari gimana sih :P)
    readonly bukannya cuma sekedar "flag" (kaya disabled) yg ndak ada value-nya?

    -edit-
    ini alternatif lain, gak pake <input type=text>,
    tapi pake <span> atau <div> dgn kombinasi property innerHTML atau innerText

    mungkin jadi kaya gini :
    <script language="javascript">
    <!--
    function jumlah(){
    var a,b;
    a = parseFloat(form1.angka1.value);
    if (isNaN(a))
    a=0.0;
    b = parseFloat(form1.angka2.value);
    if (isNaN(b))
    b=0.0;
    document.getElementById( 'hasil' ).innerText = a + b;
    form1.hasil.value = a + b;
    }
    -->
    </script>

    <form name="form1" id="form1">
    Angka 1 : <input type="text" name="angka1" onKeyUp="jumlah();"><br>
    Angka 2 : <input type="text" name="angka2" onKeyUp="jumlah();"><br>
    Hasil : <span id="hasil"></span>
    <input type="hidden" name="hasil">
    </form>

    yg jd masalah kalo pake <span> atau <div> hasil penjumlahannya gak bisa dikirim pake <form>,
    mesti diakalin lagi pake <input type=hidden>,

    ...halah malah jadi panjang... :D :D :D
  • kenapa gak dibuat seperti ini :

    Hasil : <input type="text" name="hasil" readonly="">

    CMIIW
  • ya masih bisa dong mas boo, kan ada
    - inner html
    - terus juga fungsi submit()
  • Saya coba saran Mas Boo di atas yang pake innerText, tapi kok masih belum bisa. Cara Pak Hadi Mulyadi bagaimana?? Pakai innerHTML caranya? Fungsi submit itu untuk apa? Agak kurang ngerti, bisa tolong dijelas'in nggak????
  • Saya coba di IE, script mas Boo yang pake <span> itu bisa, tapi kalau di Firefox atau flock saya coba kok tdk bisa ya?? Padahal javascript di kedua browser itu sudah saya enable. Apakah ada cara yang lain??? Thanks.
  • coba ganti innerText menjadi innerHTML mas.
  • @boo
    hehehe, gak bisa yach pak.
    Masih kepikiran seandainya bisa langsung

    String hasil = Integer.ParseInt(a+b);
    textbox.setText(hasil);

    ^_^ sory2... untung dikoreksi ama pak boo. thanks
  • Originally posted by newuser
    @boo
    hehehe, gak bisa yach pak.
    Masih kepikiran seandainya bisa langsung

    String hasil = Integer.ParseInt(a+b);
    textbox.setText(hasil);

    ^_^ sory2... untung dikoreksi ama pak boo. thanks
    lha.... bener kok... post Pak Newuser gak salah,
    cuma "readonly" kan nulisnya cukup "readonly" doang gak perlu readonly="" :)
    (maaf, saya nge-post gak jelas yah :D)

    ...post saya sendiri cuma ngasih alternatif lain 'kali berminat... gicuuu... :D
  • Originally posted by boo
    Originally posted by newuser
    @boo
    hehehe, gak bisa yach pak.
    Masih kepikiran seandainya bisa langsung

    String hasil = Integer.ParseInt(a+b);
    textbox.setText(hasil);

    ^_^ sory2... untung dikoreksi ama pak boo. thanks
    lha.... bener kok... post Pak Newuser gak salah,
    cuma "readonly" kan nulisnya cukup "readonly" doang gak perlu readonly="" :)
    (maaf, saya nge-post gak jelas yah :D)

    ...post saya sendiri cuma ngasih alternatif lain 'kali berminat... gicuuu... :D

    lah itu mah defaultnya dreamweaver, sama seperti halnya ngetik combobox :

    <select name="cb_id" selected="selected">

    </select>
    kek gitu dech :D
  • Saya ikuti saran pak hadi_mulyadi yg pake innerHTML tdk bisa. Saya ikuti juga saran pak newuser yang pake
    <input type="text" name="hasil" readonly=""> juga tdk bisa di Firefox. Ada cara lain nggak???
  • @ Pak Newuser,
    waks, saya baru tau dreamweaver punya keanehan kaya gitu :D
    padahal di referensi help-nya sendiri tertulis semacam :
    <input type="text" name="var" readonly>
    ...software yg aneh... :D

    @ Pak Budi,
    sebenernya dr awal yg bermasalah script anda sendiri utk proses ambil value-nya...

    coba test 2 script ini,
    yg satu seperti saran Pak Newuser, yg satu lagi spt saran saya :

    [1]
    <script language="javascript">
    <!--
    function jumlah(){
    var a,b;
    a = parseFloat(document.getElementById( 'form1' ).elements['angka1'].value);
    if (isNaN(a))
    a=0.0;
    b = parseFloat(document.getElementById( 'form1' ).elements['angka2'].value);
    if (isNaN(b))
    b=0.0;
    document.getElementById( 'form1' ).elements['hasil'].value = a + b;
    }
    -->
    </script>

    <form name="form1" id="form1">
    Angka 1 : <input type="text" name="angka1" onKeyUp="jumlah();"><br>
    Angka 2 : <input type="text" name="angka2" onKeyUp="jumlah();"><br>
    <input type="text" name="hasil" readonly>
    </form>

    [2]
    <script language="javascript">
    <!--
    function jumlah(){
    var a,b;
    a = parseFloat(document.getElementById( 'form1' ).elements['angka1'].value);
    if (isNaN(a))
    a=0.0;
    b = parseFloat(document.getElementById( 'form1' ).elements['angka2'].value);
    if (isNaN(b))
    b=0.0;
    document.getElementById( 'hasil' ).innerHTML = a + b;
    document.getElementById( 'form1' ).elements['hasil'].value = a + b;

    }
    -->
    </script>

    <form name="form1" id="form1">
    Angka 1 : <input type="text" name="angka1" onKeyUp="jumlah();"><br>
    Angka 2 : <input type="text" name="angka2" onKeyUp="jumlah();"><br>
    Hasil : <span id="hasil"></span>
    <input type="hidden" name="hasil">

    </form>

    atau alternatif ke-3, masih pake cara Pak Newuser,
    perhatikan utk <input> jg diberi "id" :
    <script language="javascript">
    <!--
    function jumlah(){
    var a,b;
    a = parseFloat(document.getElementById( 'angka1' ).value);
    if (isNaN(a))
    a=0.0;
    b = parseFloat(document.getElementById( 'angka2' ).value);
    if (isNaN(b))
    b=0.0;
    document.getElementById( 'hasil' ).value = a + b;
    }
    -->
    </script>

    <form name="form1" id="form1">
    Angka 1 : <input id="angka1" type="text" name="angka1" onKeyUp="jumlah();"><br>
    Angka 2 : <input id="angka2" type="text" name="angka2" onKeyUp="jumlah();"><br>
    <input id="hasil" type="text" name="hasil" readonly>
    </form>
  • semoga jelas, ini dasarnya saja


    <html>

    <head>

    <script type="text/javascript">

    function jumlah() {

    document.getElementById( 'kambing' ).innerHTML = parseInt( document.getElementById( 'adam' ).value ) + parseInt( document.getElementById( 'hawa' ).value );

    }

    </script>

    </head>

    <body>

    <input id="adam" onkeyup="jumlah()" value="1" />

    <input id="hawa" onkeyup="jumlah()" value="1" />

    <span id="kambing"></span>

    </body>

    </html>
  • agak komplit.

    o iya, parseInt mengubah value jadi angka, parseFloat mengubah value jadi desimal, silahkan pilih


    <html>

    <head>

    <script type="text/javascript">

    function jumlah() {

    var adam = parseInt( document.getElementById( 'adam' ).value );

    var hawa = parseInt( document.getElementById( 'hawa' ).value );

    if( isNaN( adam ) ) {

    var adam = 0;

    }

    if( isNaN( hawa ) ) {

    var hawa = 0;

    }

    document.getElementById( 'kambing' ).innerHTML = adam + hawa;

    }

    </script>

    </head>

    <body>

    <input id="adam" onkeyup="jumlah()" />

    <input id="hawa" onkeyup="jumlah()" />

    <span id="kambing"></span>

    </body>

    </html>
  • innerText hanya bisa di IE
    krn itu bukan standard yg disarankan oleh w3c..
    pakai DOM yaitu dgn innerHTML
  • Saya ikuti saran mas Boo, ketiga-tiganya dan sudah bisa. Makasih yaa......;);););););)
  • Originally posted by boo
    lha.... bener kok... post Pak Newuser gak salah,
    cuma "readonly" kan nulisnya cukup "readonly" doang gak perlu readonly="" :)
    Tergantung type standar HTML yang digunakan. Dalam DocType XHTML, readonly harus ditulis readonly="readonly".

    Lihat http://www.w3c.org
  • Mas boo, kalo textbo I di isi angka 5, textbox II di isi (-) hasilnya sama dengan 5 gimana ya?
  • wah pusing tuh...!!
    :))
Sign In or Register to comment.