Sending the information entered in a modal to be displayed in a div

Imagine a scenario where you can:

1. Click on one of the divs (1, 2, 3).

2. Trigger a modal window to open.

3. Input text into the modal's text field.

4. Click the save button.

5. Witness that text being displayed in the .item-edit section of the div.

I have various div elements that activate a modal window with an input field. How can I ensure that the text I input gets transferred to the respective div?

I am attempting to send the text to the .item-edit part of the div for submission.

Here is an illustration featuring multiple interactive divs that trigger a modal with text and submit inputs:

input[type=text], select {
                  width: 100%;
                  padding: 12px 20px;
                  margin: 8px 0;
                  display: inline-block;
                  border: 1px solid #ccc;
                  border-radius: 4px;
                  box-sizing: border-box;
               }

               input[type=submit] {
                  width: 100%;
                  background-color: #4CAF50;
                  color: white;
                  padding: 14px 20px;
                  margin: 8px 0;
                  border: none;
                  border-radius: 4px;
                  cursor: pointer;
                  box-sizing: border-box;
               }
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
            <div onclick="document.getElementById('id01').style.display='block'" class="grid-item"><div class="box-number">1</div><div class="item-edit"></div><div class="null-object"></div></div>
           <div onclick="document.getElementById('id01').style.display='block'" class="grid-item"><div class="box-number">2</div><div class="item-edit"></div><div class="null-object"></div></div>
           <div onclick="document.getElementById('id01').style.display='block'" class="grid-item"><div class="box-number">3</div><div class="item-edit"></div><div class="null-object"></div></div>
           
           <div id="id01" class="w3-modal">
             <div class="w3-modal-content">
               <div class="w3-container">
                 <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
                 <p>Name</p>
                 <input type="text" id="fname" name="firstname" placeholder="Your name..">
                 <input onclick="document.getElementById('id01').style.display='none'" type="submit" value="SAVE">
               </div>
             </div>
           </div>
javascripthtmlcssajax

Answer №1

Here is a function that transfers input values to the .item-edit element.

function submitInput(){
    //Retrieve the value from the input field
    var text = document.getElementById('fname').value;
    //Assign the retrieved value to the .item-edit[item] element
    //Item is specified each time the modal is opened.
    document.getElementsByClassName('item-edit')[item].innerHTML = text;
}

I hope this explanation helps!.

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  box-sizing: border-box;
}
<script>
var item = 0;
</script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
 <div onclick="document.getElementById('id01').style.display='block';item=0;" class="grid-item"><div class="box-number">1</div><div class="item-edit"></div><div class="null-object"></div></div>
  <div onclick="document.getElementById('id01').style.display='block';item=1;" class="grid-item"><div class="box-number">2</div><div class="item-edit"></div><div class="null-object"></div></div>
  <div onclick="document.getElementById('id01').style.display='block';item=2;" class="grid-item"><div class="box-number">3</div><div class="item-edit"></div><div class="null-object"></div></div>
  
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <p>Name</p>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
        <input onclick="document.getElementById('id01').style.display='none';submitInput()" type="button" value="SAVE">
      </div>
    </div>
  </div>
<script>
function submitInput(){
var text = document.getElementById('fname').value;
document.getElementsByClassName('item-edit')[item].innerHTML = text;
}
</script>

Answer №2

In this scenario, the text input should only appear in the selected division after clicking on it. You can see a live example here.

By creating two JavaScript functions and making slight adjustments to the HTML, you can tackle the issue at hand.

Show Modal: Reveals the modal (id01) and assigns its data-num attribute according to the clicked div's assigned number.

Submit Modal: Retrieves the input from the modal (id01) and inserts it into the designated div based on the numeric value stored in the data-num attribute. The function also clears the input field.

HTML: Each div with the class item-edit requires an id attribute (e.g., item-edit-1) for differentiation purposes. These numbers will serve as arguments for the showModal functions (e.g., showModal('1')).

<script>
    function showModal(num) {

      document.getElementById('id01').style.display='block';
      document.getElementById('id01').setAttribute('data-num', num);
    };

    function submitModal() {

      var inputText = document.getElementById('fname').value;
      var inputFrom = document.getElementById('id01').getAttribute('data-num');

      document.getElementById('fname').value = "";

      document.getElementById('id01').style.display = 'none';
      document.getElementById('item-edit-' + inputFrom).innerHTML = inputText;
    };
</script>

Utilizing these functions in the HTML:

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div onclick="showModal('1')" class="grid-item"><div class="box-number">1</div><div id="item-edit-1" class="item-edit"></div><div class="null-object"></div></div>
<div onclick="showModal('2')" class="grid-item"><div class="box-number">2</div><div id="item-edit-2" class="item-edit"></div><div class="null-object"></div></div>
<div onclick="showModal('3')" class="grid-item"><div class="box-number">3</div><div id="item-edit-3" class="item-edit"></div><div class="null-object"></div></div>

<div id="id01" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
      <p>Name</p>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
      <input onclick="submitModal()" type="submit" value="SAVE">
    </div>
  </div>
</div>

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

Assigning index values to child rows in AngularJS: a step by step guide

One of my requirements involves assigning index values to child rows. The structure includes group rows with child rows underneath. Currently, I am using ng-repeat along with $index for the children as shown below: HTML code: <table ng-repeat="nod ...

javascriptangularjs

Toggle draggable grid in jQuery

Imagine I have a grid set up using the following code: $( "#dragIt" ).draggable({ grid: [ 15, 15 ] }); Now, there is a checkbox located below the div. Is there a way for me to switch the grid on and off by toggling the checkbox? I've searched the of ...

javascriptjquerydraggable

Click on the div and any elements it contains in the CSS and JavaScript

I want to create a partially transparent overlay that covers an entire web page, similar to the example here: <div id="overlaySplash" onclick="clickHandler(this)"> <div id="insideBox"> [ insert clickable elements here with onclick="dos ...

javascriptcss

Bring in a php array to populate a dataset in JavaScript

I have extracted data and organized it into an array within a .php file. Now, I am looking to visualize this data using d3 methods in another .html file. I want to import this array into the dataset for visualization purposes. Below is a snippet of the c ...

javascriptphphtmlarrays

Using @PathVariable in Spring MVC can cause issues with Ajax functionality

I am facing an issue where I need to incorporate an ajax function on a specific page, but it seems to be not working with @PathVariable in spring mvc. page1.jsp <li><a href="page2/sss">WatchEvent</a></li> 1) It is working pr ...

jqueryajaxjspspring-mvc

Continuously post ajax results in a loop until all of them have been successfully posted

I am pleased with the performance of the code below in displaying content on my initial file. $.ajax({ url : "http://localhost/website/files/userstuff/files/", asynch : false, cache : false, success: function (data) { $(data).find( ...

javascriptjqueryajax

Undetected gap within boundaries

I have a container that contains four div elements. Each inner div has an absolute position and the same size. When I add borders to the inner divs, instead of creating circles, I end up with something that looks like a sliced cake: https://i.sstatic.net/ ...

css

Troubles with IE7 regarding jQuery [clicking and changing events]

My code snippets are designed to loop through cached JSON data on the 1st click function and display any values that exist for a specific id. The 2nd change function captures when elements' values change (e.g., from yes to no). Since these elements a ...

javascriptjqueryjson

Dealing with errors in Angular using dependency injection

I'm encountering an issue while attempting to inject $ http to the factory. I received the following error in Angular 1.6: Circular dependency found: $rootScope <- $http <- $exceptionHandler <- $rootScope <- $route Here is what I have b ...

javascriptangularjs

Issue with useEffect function not loading correctly in Gatsby production environment

I'm currently in the process of building a website with Gatsby.js. Within my component, I've incorporated animations using Gsap within the useEffect function. During debugging, everything works as expected. However, once the site is in productio ...

javascriptreactjsgatsbygsap

What is the method in Plain/Pure Javascript for identifying the available properties and methods of an element object?

Is there a way to uncover all available methods and properties for an element object using only vanilla JavaScript, excluding jQuery? For instance, if I am working with the body object - document.getElementByTagName('body')[0] How can I retrieve ...

javascriptgoogle-chrome

Embed the AJAX response into HTML format

I am facing a challenge with rendering an AJAX response in an HTML structure within a PHP file. The issue is that the AJAX response contains multiple data objects, and each of them needs to be placed in specific locations within the HTML. For example, let ...

javascriptphpjqueryhtmlajax

The bottom margin fails to function as expected

I've been trying to position a loading image at the bottom right of the page, but everything seems to be working except for the margin-bottom. <div id="preload"> <div align="right" style="margin-bottom:40px; margin-right:50px;"> ...

htmlcssalignmentmargin

Extracting the value of an attribute from an XML element and converting it into an HTML unordered list with

Here is an example of an xml file structure: <root> <child_1 entity_id = "1" value="Game" parent_id="0"> <child_2 entity_id="2" value="Activities" parent_id="1"> <child_3 entity_id="3" value="Physical1" parent_id="2"> ...

javascripthtmlxmlxslt

Unable to showcase the elements of an array within the AJAX success callback

$.ajax({ type: "GET", url: 'http://localhost/abc/all-data.php', data: { data1: "1"}, success: function(response) { ...

phpjqueryarraysajax

Exploring the inner workings of a JSON with Ajax and PHP

I'm working on a project that involves a JSON file called items.json. My goal is to create a search box where users can input either the name of an item or its category, and see live search results as they type. Here's what I’m aiming for: If ...

phpjqueryxmlajaxjson

CSS: dropdown with multiple columns

Check out my jsFiddle project here: http://jsfiddle.net/4z2Vx/ My goal is to design a dropdown/menu widget with multiple columns. The picture on the left is from my website, while the one on the right is inside of jsFiddle. Besides the obvious difference ...

htmlcssmenudrop-down-menu

"Accessing your account only requires a simple two-click login process

Why do I need to click the log in button twice for data validation on my forum website? While designing a forum website, I noticed that users have to click the log-in button twice before the system validates and processes the input data. Below is the code ...

javascriptnode.jsreactjs

Sum up all even numbers in an array using JavaScript

I have an array of numbers: [20,40,60,60,20]. The task is to find pairs of two numbers whose sum is divisible by 60. In this array, there are 3 such pairs: (20,40), (40,20), and (60,60). However, when I implemented the code to achieve this, it returned 4 ...

javascriptarraysduplicatesnested-loops

Tips for closing a sidecart by clicking outside of it

I am currently exploring how to implement the functionality of closing my sidecart when I click outside of it. Below is the script I am using: const toggler = document.getElementById('menu-toggle'); const cartWrapper = document.getElementById( ...

javascripthtmlcssbootstrap-4e-commerce