Link to home
Start Free TrialLog in
Avatar of error2013
error2013

asked on

NodeJs Submit from that's on another page

I am trying to write some code where I have the ParentPage.html and ChildPage.html

On ChildPage.html I have a form:

<form>
  First name:<br>
  <input type="text" name="firstname" value="">
  <br>
  Name:<br>
 
  <input type="submit" value="Submit">
</form> 

Open in new window



Both pages are on my localhost.

I need to add some code on ParentPage.html that with hit the submit button on ChildPage.html

Can this be done using NodeJs? If so how?
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

That is HTML which says it's going to be in a web browser.  You're missing the 'action' attribute of the <form> which tells the browser where to send the information.  NodJs may host the page but it is not used to create the page.  On this page https://www.w3schools.com/html/html_forms.asp , look for The Submit Button and read about the  'action' attribute.
Avatar of error2013
error2013

ASKER

Well, that would be the normal way to do this but I cannot because the form submits to itself.

The form page is on: http://127.0.0.1/ChildPage.html and it's action is action="ChildPage.html"

I'm using electron so I am using Nodejs and general javascript
Please explain what this means
I need to add some code on ParentPage.html that with hit the submit button on ChildPage.html
First - I am assuming that "with hit the submit button" should be "will hit the submit button"
Second - when you talk about parent page and child page - can you explain exactly how this manifests? Are we talking about an iframe'd child page inside a parent?
Are we talking about a child that submits to a parent?

I am assuming you are talking about an iframe - in which case you can call a function in the child page - providing the parent and child originate from the same source / protocol / port

Parent (note script uses jQuery - not shown)
  <div><button class="btn btn-primary">Submit child</button></div>
  <iframe src="t3060-iframe.html"></iframe>
<script>
$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    var target = $('iframe')[0];
    target.contentWindow.submit();
  });
});
</script>

Open in new window

Child
<form action="reflect.php" id="myform">
  Your Name <input name="name" type="text">
</form>
<script>
function submit()
{
	document.getElementById('myform').submit();
}
</script>

Open in new window


Working sample
here
Great way of doing this!

Only issue is that I cannot change the code in the child page so:

<script>
function submit()
{
	document.getElementById('myform').submit();
}
</script>

Open in new window


wouldn't be there.

I would have to just target it saying Form->submit as the form submit button has no id.

Can this be done?
Assuming you have a form with id myform then you could do this
var target = $('iframe')[0]
var doc = target.contentDocument || target.contentWindow.document;
doc.getElementById('myform').submit();

Open in new window


NOTE: This will only work if the child is on the same URL / PROTOCOL / PORT as the parent - otherwise you can't do the above.
The url is the same and the port too but the form has no id or class.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial