0

Currently, I was asked to build a form using ASP.NET MVC where the requirements are:

  1. The form has text boxes for inserting data such as name, gender, and date of birth.
  2. After clicking the submit button, a popup window appears.
  3. All the data from parent window's form transferred to the popup window (child window) with the exact same view from the parent window.
  4. The difference between the parent window and popup window is that the text boxes in popup window have to be disabled while still retaining the data value from parent window, and also, I have to remove the "View" button in the popup window.
  5. There must be only one CSHTML file for both parent and popup windows.(for example, parent.cshtml and popup.cshtml is not allowed)

Here are some pictures to illustrate what I want:

Expected view: Image 1

Here is my code

//Centering the popup window, Code from https://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen
  function popUp(url, title, w, h) {
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;

    var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    var left = ((width / 2) - (w / 2)) + dualScreenLeft;
    var top = ((height / 2) - (h / 2)) + dualScreenTop;
    var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

    // Puts focus on the newWindow
    if (window.focus) {
      newWindow.focus();
    }
  } 
<form method="post">
  <div>
    Name:
    <input type="text" name="textName" id="txt" value="" />
  </div>
  <div>
    Gender:
    <input type="radio" name="gender" value="female" /> Male
    <input type="radio" name="gender" value="male" /> Female
  </div>
  <div>
    DOB:
    <input type="date" name="tanggal" id="txtDate" />

  </div>
  <div id="divSubmit">
    <input type="submit" value="View" id="submit" onclick="popUp('Index.html','Index','900','500'); return false;" />
  </div>
</form>

And here's the resulted view of the code above:

Resulted view: Image 2

Any suggestion and help are much appreciated!

Community
  • 1
  • 1
hehehe
  • 71
  • 1
  • 9
  • 1
    Are you using a View Model? You really just need to bind the model properties to the input elements the same way you would in the main form. Pop ups are still part of the page DOM. – Crowcoder Mar 07 '18 at 13:39
  • Have a look at bootstrap modal pop ups. – Wheels73 Mar 07 '18 at 13:41
  • @Crowcoder Hi, thanks for the suggestion. I have to let you know I'm still new and very inexperienced in ASP.NET MVC, and no, I haven't made a model yet because I thought It will be enough tweaking around using Javascript. I would make sure to search what you have suggested. Thanks again! – hehehe Mar 08 '18 at 03:00

1 Answers1

1

You can add this code after window.open.

newWindow.onload = function () {
    this.document.getElementById('txtPopup').value = document.getElementById('txt').value;
}

Replace txtPopup, you have to put the id of the input of the popup.

mejiajuanbta
  • 176
  • 10
  • hi, I just make a copy of this, and strangely the code won't work now. Are you sure the `newWindow.onload` runs? I tried to debug it, but it immediately skips the `this.document.getElementById('txtPopup').value = document.getElementById('txt').value;` part. – hehehe Apr 06 '18 at 08:19
  • Hi, sorry for taking long to answer. Have you solved the problem? – mejiajuanbta Apr 19 '18 at 02:35