Pass a JavaScript variable in a HTML form action

Question

I am working on a JS program where I have form action. How can I pass a JS variable named event.title in URL which is called. Currently the URL is /register . I want to make it as /register/some_name . Thank you.

Code :

 eventRender: function(event, element, view){
            element = $(element);
            if(event.holiday){
                var date = moment(event.date).format("YYYY-MM-DD");
                $(view.el[0]).find(".fc-day[data-date="+date+"]").html("<span>" + event.title + "</span>").addClass("holiday");
                return false;
            } else {
                element.find('.fc-time').hide();
                element.css("min-height", "30px").css("border-width", "0px").css("margin-bottom", "2px");
                var text;
                var operator;
                element.addClass("course"+ event.id).addClass("event"+ event.id);
                if(event.quantity == 1){
                    operator = " Termin";
                } else if (event.quantity > 1){
                    operator = " Termine";
                }
                if(event.backgroundColor == "#fa3e54"){
                    text ='<form method="POST" action="/register/${event.title}"> <div class="coursename">'+event.title +'</div>' +
                        '<div class="course-date">Kurs nicht mehr buchbar</div></form>';
                } else {
                    var register = '<div class="anmelden"><input type="hidden" name="token" value="'+event.id + ',' + event.date + ',' + event.time + ',' + event.quantity + '' + operator+'"><input type="submit" class="btn-u pull-right" value="Anmelden"></div></form>';
                    text ='<form method="POST" action="/register/${event.title}"> <div class="coursename">'+event.title +'</div>' +
                        '<div class="course-date">Termine: '+ event.date + '</div>' +
                        '<div class="course-time">Uhrzeit: '+ event.time + '</div>' +
                        '<div class="coursequantity">Kursdauer: ' + event.quantity + ' ' + operator + '</div>' + register;
                    element.find(".fc-content").append('<form method="POST" action="/register/${event.title}">'+register+'</form>');
                }
}

Answer 1

I think only your string concatenation in the action="..." from the <form> s is wrong

Change

text ='<form method="POST" action="/register/${event.title}"> <div class="coursename">'+event.title +'</div>' +

to:

text ='<form method="POST" action="/register/'+event.title +'"> <div class="coursename">'+event.title +'</div>' +

so

eventRender: function(event, element, view){
            element = $(element);
            if(event.holiday){
                var date = moment(event.date).format("YYYY-MM-DD");
                $(view.el[0]).find(".fc-day[data-date="+date+"]").html("<span>" + event.title + "</span>").addClass("holiday");
                return false;
            } else {
                element.find('.fc-time').hide();
                element.css("min-height", "30px").css("border-width", "0px").css("margin-bottom", "2px");
                var text;
                var operator;
                element.addClass("course"+ event.id).addClass("event"+ event.id);
                if(event.quantity == 1){
                    operator = " Termin";
                } else if (event.quantity > 1){
                    operator = " Termine";
                }
                if(event.backgroundColor == "#fa3e54"){
                    text ='<form method="POST" action="/register/'+event.title +'"> <div class="coursename">'+event.title +'</div>' +
                        '<div class="course-date">Kurs nicht mehr buchbar</div></form>';
                } else {
                    var register = '<div class="anmelden"><input type="hidden" name="token" value="'+event.id + ',' + event.date + ',' + event.time + ',' + event.quantity + '' + operator+'"><input type="submit" class="btn-u pull-right" value="Anmelden"></div></form>';
                    text ='<form method="POST" action="/register/'+event.title +'"> <div class="coursename">'+event.title +'</div>' +
                        '<div class="course-date">Termine: '+ event.date + '</div>' +
                        '<div class="course-time">Uhrzeit: '+ event.time + '</div>' +
                        '<div class="coursequantity">Kursdauer: ' + event.quantity + ' ' + operator + '</div>' + register;
                    element.find(".fc-content").append('<form method="POST" action="/register/'+event.title +'">'+register+'</form>');
                }
}