Add the user's input text to a modal in C# MVC 5

If my status changes, I want to add another text box or text area for additional comments. In the photo provided, this has been implemented but the positioning is not quite right due to issues with the modal.

Below is a snippet of my code where you can take a closer look at (.editView):

<div class="modal fade" id="modalEditMerge" tabindex="-1" role="dialog" aria-labelledby="modalEditMerge" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Edit pipeline</h4>
        </div>
        <div class="modal-body">

            <label class="control-label">Client</label>

            @*@Html.DropDownList("client", (SelectList)ViewBag.ClientID, null, new { @class = "form-control" })*@
            <label class="control-label">Field of Cooperation</label>

            @Html.DropDownList("fco", (SelectList)ViewBag.FCOID, null, new { @class = "form-control" })

            <label class="control-label">HR Value</label>


            @*@Html.LabelFor("HR Value","null", new {})*@
            @Html.TextBox("hrvalue", null, new { @class = "form-control" })

            <label class="control-label">Money Value </label>
            @Html.TextBox("moneyvalue", null, new { @class = "form-control" })

            <label class="control-label">Comment</label>

            @Html.TextBox("comment", null, new { @class = "form-control" })

            <label class="control-label">Status</label>

            @Html.DropDownList("status1", (SelectList)ViewBag.StatusID, null, new { @class = "form-control" })


        </div>
        <div class="modal-footer">
            <button id="EditModalNewMerge" type="button" class="modalEdit">Edit</button>
        </div>
    </div>
</div>

 $(document).ready(function() { 
 $('.editView').click(function() {
        var ID = $(this).data('id');
        $("#status1").change(function () //status1 is for my dropDownList Status
   {
            //hide social worker and sponsor stuff
            val = $(this).val();
            if (val == '11') //if is my Status changed to 'Lost' then
   {
                $('#modalEditMerge').append('<input type="aText" id="aText">');
                //show social worker stuff
            } else {
                alert(val); //show sponsor stuff
            }
        });
        editID = ID;
        $.ajax({
            url: "/MergePipelineStatus/GetDataFromDb",
            contentType: 'application/json;',
            data: JSON.stringify({ id: ID }),
            type: 'POST',
            success: function(result) {
                if (result.id > 0) {
                    $("#status1").val(result.statusID);
                    $("#hrvalue").val(result.hrvalue);
                    //$("#client").val(result.client);
                    $("#fco").val(result.fco);
                    $("#moneyvalue").val(result.moneyvalue);
                    $("#comment").val(result.comment);


                }
            },
            error: function(valid) {
                swal("An error occurred!", "Please try again!", "error");
            }
        });
    });

    function loadAjax(reason) {
        $.ajax({
            url: "/MergePipelineStatus/EditModal",
            contentType: 'application/json;',
            data: JSON.stringify({ id: editID, status: $("#status1").val(), reason: reason }),
            type: 'POST',
            success: function(result) {

                if (result.boolresponse == true) {
                    $('#modalEditMerge').modal('toggle');
                   
                    swal({
                            title: "Successful Edit",
                            text: "You have successfully edited the item!",
                            type: "success",
                            
                        },
                        function(isConfirm) {
                            if (isConfirm) {
                                window.location.href = "/MergePipelineStatus/Index";
                            }
                        });

                } else {

                    swal("Alert!", result.textResponse, "warning");
                }
            },
            error: function(valid) {
                swal("An error occurred!", "Please try again!", "error");
            }
        });
    }
});

The gray fields in the code above are placeholders for sensitive data. The white field should be positioned below the Status in the modal. How can I achieve that?

https://i.sstatic.net/r9fNI.png

Answer №1

It may be worth considering changing the line

$('#modalEditMerge').append('<input type="aText" id="aText">');
to
$('#modalEditMerge .modal-body').append('<input type="aText" id="aText">');

LATEST UPDATE

If you need to ensure that an input element is not added multiple times, you can use a conditional statement like this:

if (val == '11')
    {
        if (!$('#modalEditMerge .modal-body #aText').length)
            $('#modalEditMerge .modal-body').append('<input type="aText" id="aText">');
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to get the boxes in the final row to show up

Exploring new territories in web design, I'm currently working on achieving the layout shown below: Box Layout I've encountered an issue where the last row of 4 boxes in the middle section is not appearing as intended. Once this row is successfu ...

Having trouble executing `npm start` command

After running npx create-react-app and then npm start, I encountered an error message https://i.sstatic.net/Uj5EC.png. Despite following the suggested solutions, the error persists. Any idea why this is happening? ...

Why doesn't the WordPress Genesis child-theme inherit the parent CSS styles?

I am new to using the Genesis framework and I find myself confused about its child themes. The Genesis theme comes with its own stylesheet, but in order to use Genesis, you need to install a child theme. However, the child themes I have come across (such ...

Transforming the MVC model attribute into an HTML attribute

Is there a way to include model attributes in the HTML input tag? Code [Required] [StringLength(20)] public string Username { get; set; } [Required] [StringLength(20)] [DataType(DataType.Password)] public string Password { get; set; } Expected Output: ...

excessive memory usage in a simple react-native application

My experience with creating my first react native app has been more challenging than I initially expected. I'm having trouble understanding what I might be doing wrong. Initially, the app is simple, fetching data through Redux. componentWillMount() ...

Enhance your form input-group in Bootstrap-4 by adding a stylish border and background-color through validation

I'm working on a form using Bootstrap 4 and I need to display validation errors. Specifically, I want the text field with an input-group for the password to have the same styling as the Username field when there is an error (i.e., red border and backg ...

Tips for refreshing views with Angular JS

I am looking to refresh all the views displayed on my page. The layout consists of a Header, Footer, and Body view. Within the Header view, there is a dropdown menu where users can choose their preferred language. Upon selecting a language, I want all the ...

I'm encountering an issue where the database table in Postgres is not updating correctly while working with Node

Currently, I am working on a CRUD application where I can successfully read and delete data from the database table. However, I have encountered an issue when trying to update specific data for a particular route. Every time I attempt to update the data in ...

Is it possible for me to create a nested component without having to make a new file

What I desire: Home.vue <template> <div> <p>{{message}}</p> <ChildComponent/> </div> </template> <script setup> import { ref, defineComponent } from 'vue'; let message = r ...

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expan ...

Is there a way to bring together scrolling effects and mouse movement for a dynamic user

If you want to see a scrolling effect, check out this link here. For another animation on mouse move, click on this link(here). Combining both the scrolling effect and the image movement might seem challenging due to different styles used in each templat ...

retrieving the current value of a variable from a jQuery function

I've done my best to keep things simple. Here's the HTML code I've put together: <div id="outsideCounter"><p></p></div> <div id="clickToAdd"><p>Click me</p></div> <div id="in ...

Encountering a 404 error while attempting to retrieve data from Node.js within a React.js application despite the server being operational

This is my first time delving into the world of back-end development, and it's quite challenging for me. The tech stack I'm using includes React.js, Node.js, express.js, and mysql. However, when I try to fetch the result of a query, I keep runnin ...

Can an infowindow be automatically closed based on specific criteria?

Show the infowindow only when hovering over the marker. It should disappear when moving the mouse away from the marker. The infowindow should stay open only if you click on the marker, and can be closed by clicking the close button on the infowindow. ...

Creating a progress bar with a mouse listener in React Material Design

I encountered an issue while working with React and React Material-UI components. Here is what I'm trying to achieve: 1) When the user clicks a button in my component, I want to add a mousemove listener to the page and display a ProgressBar. 2) As ...

javascript: extracting class name from HTML elements

To extract class names from an HTML code using JavaScript, I can utilize the following method: var cPattern = new RegExp(/class[ \t]*=[ \t]*"[^"]+"/g); var cMatches = data.match(cPattern); However, the above code returns an array with values li ...

How well are DOM Mutation Observers supported across different web browsers?

I attempted to search for a solution by Googling, but was unsuccessful in finding an answer. Does anyone know if there is a compatibility matrix available for this feature that works across all browsers? In case someone is interested in the answer, here ...

Enable a single flex item to wrap across multiple lines

I have an HTML code snippet that needs to be styled using Flexbox. Specifically, I want to re-order the elements and create a 'line break' before the last item. How can I utilize Flexbox so that most flex items are treated as atomic units, but on ...

As the background image shifts, it gradually grows in size

I'm attempting to create an interesting visual effect where a background image moves horizontally and loops seamlessly, creating the illusion of an infinite loop of images. Using only HTML and CSS, I've run into an issue where the background ima ...

Having difficulty leveraging the full capabilities of the Jquery.load() function

I'm currently facing an issue where the results I want to display to the user are not filtering properly based on their selection. I've been using GET on the same page (users.php?rid=) to process this, but for some reason, it seems to be loading ...