Issues With Dialog Input And Fullcalendar

- 1 answer

I don't know if the issue is related to fullcalendar or not, probably not, but not 100% sure. I have 2 hiddens forms shown in the first case when an event is clicked and in the other case when I select times to create an event.

These are the two forms (it's the same with 2 less button).

    <div id="eventContent" title="Détail de la tache" style="display:none;">
        <form id="form_infos">
            <label for="title">Titre:</label><input type="text" name="title" id="title_input"/>
            Début: <span id="startTime"></span><br>
            Fin: <span id="endTime"></span><br><br>
            <label for="eventInfos">Description:</label><textarea rows="5" cols="30" name="eventInfos" id="eventInfos"></textarea>
            <input type="submit" value="Enregistrer" class="btn btn-success" />
            <input type="button" value="Copier" id="copier" class="btn btn-success" />
            <input type="reset" value="Supprimer" class="btn btn-danger" />

    <div id="eventContent_create" title="Détail de la tache" style="display:none;">
        <form id="form_infos_create">
            <label for="title_create">Titre:</label><input type="text" name="title_create" id="title_input_create"/>
            Début: <span id="startTime_create"></span><br>
            Fin: <span id="endTime_create"></span><br><br>
            <label for="eventInfos_create">Description:</label><textarea rows="5" cols="30" name="eventInfos_create" id="eventInfos_create"></textarea>
            <input type="submit" value="Enregistrer" class="btn btn-success" />

The issue is just on what is print inside the field title and eventInfos.

Step 1: While none events have been created by select, if I click existing events, the dialog shows and the input are well filled. Then I want to create a new event, so I select a timelapse, the form in dialog shows himself and is well filled empty.

So, the step 1 is ok.

But then comes the step 2, once the event is created, each time I will open a dialog, either it is by clicking an existing dialog or selecting timelapse for creating a new one, then the inputs will be filled all the time with the last created events.

I can't understand why. I hope you will be able to help.

Js side clicking on event

        eventClick: function(event, element) {
        eventRender: function (event, element) {
            element.attr('href', 'javascript:void(0);');

                console.log("open render");
                $("#title_input").attr({value :event.title});
                $("#startTime").html(moment(event.start).format('MMM Do h:mm A'));
                $("#endTime").html(moment(event.end).format('MMM Do h:mm A'));

Js side selecting timelapse

     select: function(start, end,jsEvent) {
                var eventData = {
                    title: "",
                    start: start,
                    end: end,
                    description: ""
                $("#startTime_create").html(moment(start).format('MMM Do h:mm A'));
                $("#endTime_create").html(moment(end).format('MMM Do h:mm A'));
                $("#title_input_create").attr({value: " "});
                $("#eventInfos_create").html(" ");

I'm wonderring if this is not due to element.attr('href', 'javascript:void(0);'); missing on select but I have really no idea. Thanks for your help.

EDIT: Here is the screen of what is happening...the html is fine...but the output didn't seems to correspond


Screen of the issue



You should use .val() to alter the value of the field. Change

 $("#title_input_create").attr({value: " "});




See this demo using your original syntax: . If you click the button without typing into the box, then it will clear the field. However if you type a new value in before you click, the field will then not be cleared.

This is to do with how the DOM works for input elements - .attr() will change the original attribute text in the written HTML, but this is not the same as the current value of the field held in the browser's memory - this is held in a separate value field attached to the element. Altering the .value property on a native DOM element object, or using jQuery's .val() on a jQuery object will modify the current field value, rather than its original value.