Issues With Dialog Input And Fullcalendar

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" />
        </form>
    </div>

    <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" />
        </form>
    </div>

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) {
             event_save=event;
        },
        eventRender: function (event, element) {
            if(event_save!=undefined){
                event=event_save;
            }
            element.attr('href', 'javascript:void(0);');

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

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").removeAttr("value");
                $("#title_input_create").attr({value: " "});
                $("#eventInfos_create").html(" ");
                event_save=eventData;
                console.log("create");
                $("#eventContent_create").dialog('open');
    }

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

                console.log($("#title_input_create"));
                $("#eventContent_create").dialog('open');

Screen of the issue

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

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

to

$("#title_input_create").val("");

Explanation:

See this demo using your original syntax: http://jsfiddle.net/xk1shu9q/3/ . 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.