मैं दूसरा टेक्स्ट फ़ील्ड सहित दिखाना चाहता हूं। जैसे ही मैं पहला टेक्स्ट फ़ील्ड सबमिट करता हूं, कॉपी बटन। मैं दूसरा टेक्स्ट फ़ील्ड कैसे छुपा सकता हूं और सबमिट करने के बाद दिखा सकता हूं?

enter image description here

मैंने निम्नलिखित के रूप में कोशिश की:

एचटीएमएल:

पहला टेक्सफ़ील्ड:

<tr><td><input type="text" id="source">
<button type="submit" id="submit" id="formButton">Submit</button></td></tr>

दूसरा टेक्स्टफील्ड:

<tr><td><input type="text" size="62" id="target" id="form1">
<button onClick="myFunct()" id="form1">Copy</button></td></tr>  

JQuery:

 <script>
  $("#formButton").click(function(){
   $("#form1").toggle();
    });
 </script>  

आपके समर्थन के लिए धन्यवाद।

1
Stef 15 मई 2018, 00:27

2 जवाब

सबसे बढ़िया उत्तर

यदि आप सामान्य रूप से किसी सर्वर पर डेटा सबमिट करने का इरादा रखते हैं, तो आपके पास अपने इनपुट और बटन <form> टैग में लिपटे होने चाहिए, इसलिए मैंने एक जोड़ा और इसे सेट किया ताकि यह एक लाइव टेस्ट सर्वर को भेजे। सर्वर की प्रतिक्रिया प्रदर्शित करने के लिए एक आईफ्रेम भी जोड़ा गया है। JQuery सरल है:

$('#main').on('submit', function() {...

जब form#main एक submit घटना को "सुनता है" (अर्थात जब button[type=submit] क्लिक किया जाता है...

$('.row2').removeClass('hide');

...वर्ग .hide फॉर्म tr.row2 हटाएं जो शैली को हटा देता है display:none

बीटीडब्ल्यू, आईडी अद्वितीय होना चाहिए। #form1 डुप्लीकेट है और OP कोड में एक बटन पर 2 आईडी हैं।

डेमो

$("#main").on('submit', function() {
  $(".row2").removeClass('hide');
});
.hide {
  display: none
}
<form id='main' action='https://httpbin.org/post' method='post' target='view'>
  <table>
    <tr>
      <td><input type="text" id="source" name='source'>
        <button type="submit">Submit</button></td>
    </tr>

    <tr class='row2 hide'>
      <td><input type="text" size="62" id="target" name='target'>
        <button type='button'>Copy</button></td>
    </tr>
  </table>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1
Community 20 जून 2020, 12:12

पहली समस्या यह है कि आपके पास बटन पर डुप्लिकेट आईडी हैं (submit और formButton दोनों)। एक तत्व केवल एक आईडी हो सकता है। मैं अपने उदाहरण में बाद वाले के साथ गया हूं।

दूसरा, आपके पास डुप्लिकेट form1 आईडी हैं, जो कि अमान्य मार्कअप भी है। . इसके बजाय बस कक्षाओं का उपयोग करें।

फिर इन तत्वों को डिफ़ॉल्ट रूप से छिपाने और बटन के क्लिक पर उन्हें दिखाने की बात है। मैं इसके लिए .toggle() के बजाय .show() का सुझाव दूंगा।

इसे निम्नलिखित में देखा जा सकता है:

$("#formButton").click(function() {
  $(".form1").show();
});
.form1 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tr>
  <td>
    <input type="text" id="source">
    <button type="submit" id="formButton">Submit</button>
  </td>
</tr>

<tr>
  <td>
    <input type="text" size="62" id="target" class="form1">
    <button onClick="myFunct()" class="form1">Copy</button>
  </td>
</tr>
1
Obsidian Age 15 मई 2018, 00:37