logo
Tags down

shadow

javascript send textbox value


By : James Thalacker
Date : May 06 2020, 08:12 AM

I'm use java script function that when onclick it display on the modal, and i have another function to make an random reference number. My problem is , it is not displaying on the textbox, It displays null.

My html Table

<table id="ticketTable" class="display table table-hover table-striped">
    <thead>
        <tr>
            <th>Ticket Number</th>
            <th>Created By</th>
            <th>Date & Time Created</th>
            <th>Date & Time Occured</th>
            <th>Error Type</th>
            <th>Details</th>      
        </tr>
    </thead>
</table>

My Working Javascript, here where i display my content if on click, my input textbox "ConvoRef" is null.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function () {   
            loadData();

        function loadData(is_category) {
            var dataTable = $('#ticketTable').DataTable({
                "language": {
                    "emptyTable": "No Transaction"
                },
                ajax: {
                    url: "/Ticket/GetTicket/" + is_category,
                    dataType: "json",
                    retrieve: "true",
                    processing: "true",
                    serverSide: "true",
                    type: "POST",
                    dataSrc: "",
                    data: { is_category: is_category },

                },
                columnDefs: [
                    {
                        targets: [1],
                        orderable: false,
                    },
                ],

                columns: [
                    {
                        data: "TicketNumber",

                    },

                    {
                        data: "UserTicket"
                    },

                    {
                        data: "DateCreated",

                    },
                    {
                        data: "DateOccurence",

                    },
                    {
                        data: "ErrorType"
                    },
                    {
                        data: "TicketNumber",
                                      render: function (data, type, row, meta) {
                    return '<button type="button" class="btn btn-info viewdetails" id="' + data + '">View</button>';
                },

                    },

                ]

            });

            $(document).on('change', '#category', function () {
                var category = $(this).val();
                $('#ticketTable').DataTable().destroy();
                if (category != '') {
                    loadData(category);
                }
                else {
                    loadData();
                }
            });


            $(document).on('click', '.viewdetails', function () {
                var details_id = $(this).attr("id");
                var valueID = $(this).attr("id");

                console.log(details_id);
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/Ticket/ConvoId/" + details_id,
                    contentType: "application/json;charset=utf-8",

                    success: function (data) {
                        dataTable.ajax.reload();
                        var jsonData = JSON.parse(data.data);

                        var html = '';     
                        html += '<hr>';
                        html += '<div class="card mb-2"><div class="card-body mb-2"><div class="row"><div class="col-md-12">';
                        html += '<h3><i class="far fa-envelope"></i>Message</h3>';
                        html += '<div style = "height: auto !important; max-height: 250px !important;; overflow: auto !important;" > ';
                        html += '</div></div>';
                        html += '</div></div></div><hr>';

                        html += '@using (Html.BeginForm("AddConvo", "Ticket", FormMethod.Post, new { enctype = "multipart/form-data" }))
                        {<form><div><div class="mb-2" style="background-color:#EEEEEE; padding:15px;">**My Text where i want to display my function makeid <input type="text" id="ConvoRef" name="ConvoRef">**<strong>Send Message:</strong> <textarea cols="100" rows="3" class="form-control mt-1 mb-1" name="ConvoDetails" id="ConvoDetails" placeholder="Add Response"></textarea></div><strong><text class="mt-5">Upload File:</text></strong><p class="text-danger font-italic"><strong>Note: Check the file before submit</strong></p><input type="file" name="FilePath" id="FilePath"  multiple class="form-control" /><div><input type="submit" class="btn btn-primary btn-sm mt-2 sendButton" type="submit" id="addMessage" value="Send"></div></div></form>}';


                        html += '</div></div></div>';
                        html += ' ';
                        $('#details_info').html(html);
                        $('#detailsModal').modal('show');

                    },

                    error: function () {
                        alert("content load failed.");
                    }
                });

            });
            document.getElementById("ConvoRef").value = makeid(7);

            function makeid(length) {
                var result = '';

                var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                var charactersLength = characters.length;
                for (var i = 0; i < length; i++) {
                    result += characters.charAt(Math.floor(Math.random() * charactersLength));
                }
                var TicketDate = new Date();
                var Tnumber = "T" + TicketDate.getFullYear() + TicketDate.getSeconds() + "-" + result;
                return Tnumber;
            }
        }

        });
</script>
Answer :

You are try to set the value before input is created. Moving document.getElementById("ConvoRef").value = makeid(7); just after $('#details_info').html(html); should will be work.



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • insert line after paragraph word
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org