0 सवाल: एक विस्तार क्षेत्र में एक फॉर्म फ़ील्ड से दूसरे में एक मान पारित करना

पर बनाया गया सवाल Thu, Mar 28, 2019 12:00 AM

मेरे पास एक गतिशील रूप से विस्तार योग्य फ़ॉर्म है जो शीर्ष पर मैं चाहता हूं कि उपयोगकर्ता डिफ़ॉल्ट मान को सेट करने में सक्षम हो जो पूरे फॉर्म में कॉपी किया जाएगा। मैं दिनांक फ़ील्ड के लिए एक ऑन्चेंज इवेंट की कोशिश कर रहा हूं लेकिन यह उन दिनांक फ़ील्ड को अपडेट नहीं करता है जो अनुसरण करते हैं।

मैंने तत्व आईडी और नाम w /o को किसी भी सफलता में बदलकर कोड का निवारण करने का प्रयास किया है।

function updateDate(value) {
  document.getElementById("date").value = value;
}
<!-- HTML for the initial field -->
<div class="col-sm-auto">
  <input type='date' class='form-control' onchange="updateDate(this.value)" id='default_date' name='default_date' value='' data-toggle="tooltip" data- placement="top" title="The date the shift started." />
</div>
<!-- HTML for the field that it is supposed to be updating -->
<div class="col-sm-auto">
  <input type='date' class='form-control' name='date' id='date' value='' data-toggle="tooltip" data-placement="top" title="The date the shift started." />
</div>

मैंने अपेक्षा की कि वह किसी भी दिनांक फ़ील्ड का मान id = 'दिनांक' के साथ सेट कर सकता है, लेकिन इसने ऐसा कुछ भी नहीं किया है जिसे मैं देख सकूं।

### अधिक कोड ###

यहाँ पृष्ठ पर शेष HTML है। यह अभी भी प्रपत्र फ़ील्ड के प्रारंभिक सेट को अपडेट नहीं करता है। हालाँकि, जैसा कि टिप्पणियों में कहा गया है कि यह 'एड रिस्पॉन्डर जोड़ें' बटन पर क्लिक करके जोड़े गए किसी भी अतिरिक्त फ़ील्ड को अद्यतन करता है।

<!-- HIDDEN DYNAMIC ELEMENT TO CLONE -->
<!-- you can replace it with any other elements -->
<div class="form-group dynamic-element" style="display:none">
    <div class="row">
        <div class="col-md-auto"></div>

  <!-- Replace these fields -->
    <div class="col-sm-auto">
    </div>

    <div class="col-sm-auto">
        <input type='date' class='form-control' name='date' id='date' value='' data-toggle="tooltip" data-placement="top" title="The date the shift started."/>
    </div>

<!--These DIVs are used for additional for fields. I removed the code for ease of troubleshooting-->        
    <div class="col-sm-auto">
    </div>

    <div class="col-sm-auto">
    </div>

    <div class="col-sm-auto">
    </div>

    <div class="col-sm-auto">
    </div>
    <div class="col-sm-auto">
    </div>

    <!-- End of fields-->
    <div class="col-md-auto">
      <button class="btn btn-outline-danger delete1">Delete Row</button>
    </div>
  </div><hr>
</div>

<!-- END OF HIDDEN ELEMENT -->

<div class="container" style="display:inline">
  <form class="form-horizontal" action='<?php echo $_SERVER['PHP_SELF']?>' method='post'>
    <fieldset>
      <!-- Form Name -->
      <legend class="title">Enter Times</legend>

      <!--Default Form Values-->

          <div class="container col-sm-auto border-bottom pb-3 pt-3 bg-info">
            <div class='row'>
                <div class="col-md-auto column1"><h5>Set your default values:</h5>
                </div>

                <div class="col-sm-auto">
                    <input type='date' class='form-control' onchange="updateDate(this.value)" id='default_date' name='default_date' value='' data-toggle="tooltip" data-placement="top" title="The date the shift started."/>
                </div>

                <!--Additional Form fields removed for troubleshooting-->

                <div class="col-sm-auto">
                </div>

                <div class="col-sm-auto">
                </div>

                <div class="col-sm-auto">
                </div>

                <div class="col-sm-auto">
                </div>
            </div>
          </div> 
<!-- End Default Values -->        

          <div class="dynamic-stuff">
            <!-- Dynamic element will be cloned here -->
            <!-- You can call clone function once if you want it to show it a first element-->
          </div>

          <!-- Button -->
          <div class="form-group">
            <div class="row">
              <div class="col-md-12">
                <div class="col-4 mx-auto">
                  <a href="#" class="btn btn-outline-success add-one" role='button'>Add Another Responder</a>
                  <button class="btn btn-outline-primary" type="submit" name="timesubmit" id="timesubmit">Submit Times</button>
                </div>
              </div>
            </div>
          </div>
        </fieldset>
    </form>
</div>


<!--php removed to troubleshoot HTML & JS-->

<script>

    //Clone the hidden element and shows it
    $(document).ready(function(){
        $('.dynamic-element').first().clone().appendTo('.dynamic-stuff').show();
  attach_delete();
});       

$('.add-one').click(function(){
  $('.dynamic-element').first().clone().appendTo('.dynamic-stuff').show();
  attach_delete();
});
//Attach functionality to delete buttons
function attach_delete(){
  $('.delete1').off();
  $('.delete1').click(function(){
    console.log("click");
    $(this).closest('.form-group').remove();
  });
}

//Set Default Variables On Change
    function updateDate(value){
    document.getElementById("date").value = value;
}

//Make Table Rows Clickable
    $(document).ready(function($) {
    $(".table-row").click(function() {
        window.document.location = $(this).data("href");
    });
});

</script>

    
0
  1. आपका कोड काम कर रहा है !!!
    2019-03-28 13: 29: 27Z
  2. मैंने आपके प्रश्न को संपादित किया और आपके द्वारा पोस्ट किए गए उदाहरण कोड से एक कार्यशील स्निपेट बनाया। ऊपर वाला स्निपेट काम कर रहा है जैसा कि आप उम्मीद कर रहे थे, इसलिए यह हो सकता है कि आपके पास कुछ अतिरिक्त कोड है जो आपके प्रश्न के साथ पोस्ट नहीं किया गया है जो एक समस्या पैदा कर रहा है।
    2019-03-28 14: 04: 49Z
  3. हम्म दिलचस्प। मेरा मानना ​​है कि आप @benvc सही हैं। आप लोगों के कहने के बाद यह काम कर रहा है मैंने शूटिंग में थोड़ी और परेशानी की। प्रारंभिक प्रपत्र पहली पंक्ति के साथ लोड होता है और जब मैं फ़ील्ड संपादित करता हूं तो अपडेट नहीं होता है। लेकिन अगर मैं उस फॉर्म का विस्तार करता हूं जो तारीख के लिए मूल्य निर्धारित करता है। मैं अतिरिक्त कोड संलग्न करूंगा ...
    2019-03-28 14: 13: 48Z
  4. मैं जेएस को हटा सकता हूं जो पहली पंक्ति को लोड के रूप में प्रकट करता है। लेकिन मैं नहीं। विचार?
    2019-03-28 14: 54: 29Z
    0 उत्तर                              0                         
स्रोत रखा गया यहाँ