Custom fields value set with Javascript disappears

Support
#1

Hi!

We’ve added a javascript datepicker (GitHub - qodesmith/datepicker: Get a date with JavaScript! A datepicker with no dependencies.) to input a value in a snipcart-input text field’s child element (a dynamically rendered <input field).

However, when checkout proceeds. The value set with Javascript gets cleared! :frowning: When a live user inputs something via the browser, this value is remembered.

You can try for yourself by adding this product to your basket and try to select a date while checking out. Kaasplank (test) - Studio Smaak

Please help us out :pray:
Thanks!

1 Like
Custom delivery date
#2

HI @jonaspottie, thanks for reaching out!

Does this happen with a regular <input type="text"> field?
Also, have you tried with the browser native date picker?
<input type="date">

It is a bit difficult for us to diagnose problems with external scripts, so any information you can add helps.

Thanks!

#3

Hi @nelitow!

We added an extra fieldset with a snipcart input (id=“ophaalmoment”) to the billing section. Additonaly we’ve added a link which activates the javascript plugin.

<billing section="bottom">
<fieldset class="snipcart-form__set">
        <div class="snipcart-form__field">
            <snipcart-label class="snipcart__font--tiny" for="ophaalMoment">
                Afhaalmoment in de winkel (Markt 16, Oedelem) 
            </snipcart-label>
            <snipcart-input name="ophaalMoment" id="ophaalmoment"></snipcart-input>  
        </div>
      <a href="javascript:AddDatePicker()" id="kiesdatum" class="button secondary">Kies een datum</a>
</fieldset>
</billing>

Upon clicking the link, the AddDatePicker() function is executed. It adds a datepicker component to the rendered input which we can find by using the first input child .

To be sure, the rendered input value is set an extra time.

<script> 
/* OPTIE 3 datepicker met js-datepicker: https://github.com/qodesmith/datepicker#readme*/
      
      function AddDatePicker(){
        // zoek de juiste inputbox
        let firstInputChildIDValue = $("#ophaalmoment input:first-child").attr('id');
        
        // zet de inputbox als vereist
        $('#'+ firstInputChildIDValue).prop('required',true);
 
        // de vroegst mogelijke datum om op te komen halen
        var firstpossibledate = new Date();
        firstpossibledate.setDate(firstpossibledate.getDate() + 2);
        console.log("firstpossibledate "+ firstpossibledate )
        
        try {
        const picker = datepicker('#'+ firstInputChildIDValue, {
          startDay: 1, 
          minDate: firstpossibledate,
          disabler: date => (date.getDay() === 1), // Disabled every Monday
          customDays: ['Zo', 'Ma', 'Di', 'Woe', 'Do', 'Vr', 'Za'],
          customMonths: ['Jan', 'Feb', 'Maa', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          onSelect: (instance, gekozendatum) => {
		// Do stuff when a date is selected (or unselected) on the calendar.
              	$('#'+ firstInputChildIDValue).val("afhalen op "+ gekozendatum);
		}
        });  
        console.log("kalender toegevoegd aan de input met ID:"+ firstInputChildIDValue );
        }
        catch (e) {
        console.log("kalender toevoegen niet gelukt");
        }
        finally {
        $('#'+ firstInputChildIDValue).focus();
        }    
      };
</script>

I hope this gives you some insight into our problem.

Thanks!

#4

Hi @jonaspottie.

The issue here is that we use VueJS for the cart, and setting the value of the input field with jQuery does not trigger an update in our data binding between the input field and the value in the Vue component, something that manually typing in the input field does trigger.
So what we need to do is make the value update, and after that trigger input event, so that our internal variable is also updated.
We can do that in the line where you set the value you got from the date picker, by changing it to:
$("#" + firstInputChildIDValue).val("afhalen op " + gekozendatum)[0].dispatchEvent(new Event('input'))
From my tests it worked perfectly.

Let me know if you have further questions.

Thanks!

1 Like
#5

This is great! I have been trying something with “change” event instead and was wondering what other types I could have missed.

1 Like