How can i use coordinates provided in a form to position an element using jquery

I am using jquery to create an element, i would then like the user to input the x and y values of the desired position of the element, and then click a button so the element would then appear at that position. This is a rough code of how the page is setup. want #newelement to appear in a new position after the forms are filled and the button is clicked.

<!DOCTYPE html>   
<html>   

<head>  
    <title>  
        Create div element using jQuery 
    </title> 

    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 

    <style> 
        #parent { 
            height: 300px; 
            width: 600px; 
            background: green; 
            margin: 0 auto; 
        } 
        #newElement { 
            height: 100px; 
            width: 100px; 
            margin: 0 auto; 
            background-color: red;
            position: absolute;
        } 
    </style> 
</head>  

    <div id= "parent"></div> 

    <br><br> 

    <!-- Script to insert div element -->
    <script>  
        function insert() { 
            $("#parent").append('<div id = "newElement">A ' 
                + newdiv </div>'); 
        } 


    </script>  
 <button onclick="insert()">  
        insert 
    </button> 

    <form id="form1">
  <b>First Name:</b> <input type="text" name="positionX">
    <br><br>
  <b>Last Name: </b><input type="text" name="positionY">

  <input type="submit" value="Submit">
</body>   

</html>

1 answer

  • answered 2019-05-15 03:38 twomarktwo

    Using the "top" and "left" style attributes can be used if you want to position the top left corner of the new div relative to the top left corner of the parent

    i.e. something like

    <!DOCTYPE html>
    <html>
    
    <head>
      <title>
        Create div element using jQuery
      </title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
      <style>
        #parent {
          height: 300px;
          width: 600px;
          background: green;
        }
        
        #newElement {
          height: 100px;
          width: 100px;
          background-color: red;
          position: absolute;
        }
      </style>
    </head>
    
    <body>
      <div id="parent"></div>
    
      <!-- Script to insert div element -->
      <script>
        function insert() {
          // Get the X and Y from the form elements
          var x = parseInt($("[name='positionX'").val());
          var y = parseInt($("[name='positionY'").val());
          var newElement = $('<div id="newElement">newdiv</div>').css({top: y, left:x});
          $("#parent").append(newElement);
        }
      </script>
      <button onclick="insert()">  
            insert 
        </button>
      <form id="form1">
        <b>X:</b><input type="text" name="positionX" />
        <br />
        <b>Y:</b><input type="text" name="positionY" />
        <input type="submit" value="Submit" />
      </form>
    </body>
    
    </html>