HTML elementini o'zgartirish va yangi element yaratish uchun JavaScript-ni ishlatish

Quyidagi kodning bir qismi bor

<input type="text" />
<button> Submit </button>

Endi foydalanuvchining yuborish tugmasini bosgan holda kiritilgan matnni kiritishni xohlamasligim kerak, lekin matn kiritilmasligi kerak. Shuningdek, yuborish tugmasi ham tarqatilmasligi kerak. Bundan tashqari, matn kiritish uchun matn qutisi ostida quyida joylashgan tugmachaga o'xshash boshqa matnni yaratmoqchiman. Shunday qilib, bu sharh tizimiga o'xshaydi. Buni JavaScript yordamida qanday qilish haqida har qanday fikr.

2

3 javoblar

Try this solution at jsFiddle

Agar siz kontentni takrorlashni xohlasangiz, idlarni o'chirishga ishonch hosil qiling. Ular har bir sahifa uchun noyob bo'lishi kerak. Mana html:


<input type="text" value="Initial Text" /> <button>Submit</button>

live dan foydalanib, kelajakdagi barcha tugmachalarga jQuery'ni ishlatamiz. Tugmani bosganingizda, qatorni klonlash, maydonni o'chirish va tugmani olib tashlash. Keyin klonlangan paragrafni keyinchalik takrorlang:

// Execute when document is ready
$(function() {
 //Bind click handler to all current and future button elements
  $('.comment button').live('click', function() {
   //Find the paragraph this button is in and clone it
    var p = $(this).closest('p'), 
        row = p.clone();

   //Disable text field
    $(this).prev().attr('disabled',true);

   //Hide submit button for this row
    $(this).hide();

   //Insert a new field/button pair below this one
    p.after(row);
  }); 
});
0
qo'shib qo'ydi
<input type="text" />
<button> Submit </button>


$('button').click(function() {
    $(this).hide();
    $('input').prop('disabled', true);
})

Misol

0
qo'shib qo'ydi
Men matn qutisini xohlamayman, div emas. Ikkinchidan, chop etishni bosgandan so'ng, yana shunga o'xshash narsa undan keyin paydo bo'lishi kerak
qo'shib qo'ydi muallif Programmer, manba
Javobni yangiladim, nima deb o'ylaysiz, menga xabar bering
qo'shib qo'ydi muallif Joe, manba

Buni qilishning juda oddiy usuli quyida keltirilgan. Tasavvur qilmaydigan Javascript uchun, onclick hodisasini programli ravishda tugmani bog'lashingiz kerak. Yoki yaxshiroq, jQuery-dan foydalaning, u har doim hodisalarni yozadi, shuning uchun biz uni yaxshi ko'ramiz.

 <script>
 function disableInput() {
  document.getElementById("foo").disabled = true;
  document.getElementById("bar").style.display = "none";
 }
 </script>

<input id="foo" type="text" value="Some Text" />
<button id="bar" onclick="disableInput();"> Submit </button>
0
qo'shib qo'ydi
Iltimos, jQuery kodini ham bera olasizmi :)
qo'shib qo'ydi muallif Programmer, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb