CODEWITHSUNDEEP
javascriptphpjqueryhtml
wordwannabe
wordwannabe

Reputation: 101

using php in javascript file

I would like to get a form input data and use that to create another event in FullCalendar. In order to achieve this, I used php to get the post data and store it into javascript variable and then used moment.js to convert to the right dateTime format. However, I did this in an HTML file and now I would like to do this in a separate javascript file but it does not work. How can I use external javascript file to achieve the same result?

<html lang="en">
<head>
<meta charset="UTF-8">
    <title>test</title>

    <!-- Stylesheet files-->
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="jquery-ui/jquery-ui.css"/>
    <link rel="stylesheet" href="css/fullcalendar/cupertino/jquery-ui.min.css"/>
    <link rel="stylesheet" href="css/fullcalendar/fullcalendar.css"/>
    <link rel="stylesheet" href="css/dateTimePicker/jquery.datetimepicker.css"/>
    <link rel="stylesheet" href="css/fullcalendar/fullcalendar.print.css" media="print"/>

    <!-- JavaScript files-->
    <script src="js/moment.js"></script>
    <script src="js/moment.min.js"></script>
</head>
<body>
    <!--Calendar-->
    <div id='top'>

        Language:
        <select id='lang-selector'></select>

    </div>

    <div id='print'>
        <button class="printIt">Print</button>  
    </div>

    <!--User input in the form-->
    <div id='userInput'>
        <form action="" method="post">
            Title: <input type="text" id="title" name="title"></input>
            Date and Time: <input type="text" id="datetimePick" name="dateTime"> </input>   
            <input type="submit" value="Submit">
        </form>
    </div>

    <?php
        //Will get the data from the form!
        $myDate =  $_POST['dateTime'];
        $myTitle = $_POST['title'];

    ?>




    <!-- xn-calendar-func.js will select this div to create a calendar-->
    <div id='calendar'></div>

    <script>
        var myTitle = <?php echo json_encode($myTitle);?>;
        var myDate = <?php echo json_encode($myDate); ?>;
        var myFixedDate = moment(myDate).format("YYYY-MM-DDTHH:mm:ss");
        if(myDate != null){
            document.write(moment(myDate).format("YYYY-MM-DDTHH:mm:ss")); //Convert to the ISO8701 format that FullCalendar Accepts!
        }

            $('#calendar').fullCalendar('renderEvent',{
                id: 99,
                title: myTitle,
                start: myFixedDate
             }, true);

    </script>

    <!--JavaScript files-->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/application.js"></script>
    <script src="js/fullcalendar/lib/moment.min.js"></script>
    <script src="js/fullcalendar/lib/jquery.min.js"></script>
    <script src="js/fullcalendar/lib/jquery-ui.custom.min.js"></script>
    <script src="js/fullcalendar/fullcalendar.min.js"></script>
    <script src="js/fullcalendar/lang-all.js"></script>
    <script src="js/xn-calendar-func.js"></script>
    <script src="js/printThis/printThis.js"></script>
    <script src="jquery-ui/jquery-ui.js"></script>
    <script src="js/dateTimePicker/jquery.datetimepicker.js"></script>
</body>

So I want to move script tag inside a body tag to a javascript file (.js)

Upvotes: -1

Views: 132

Answers (1)

Doug
Doug

Reputation: 3312

You would have to continue to use script tags inline to output myTitle and myDate, but other than that you can simply just copy 

var myFixedDate = moment(myDate).format("YYYY-MM-DDTHH:mm:ss");

if(myDate != null){
  document.write(moment(myDate).format("YYYY-MM-DDTHH:mm:ss")); //Convert to the ISO8701 format that FullCalendar Accepts!
}

$('#calendar').fullCalendar('renderEvent',{
  id: 99,
  title: myTitle,
  start: myFixedDate
}, true);

into a new text file, give it a .js extension and add it in a similar manner to the rest of your links at the bottom.

<script src="js/main.js"></script>

Upvotes: 1

Related Questions