Submitting html-form data and iframe input simultaneously

Question

I have a page ( index.html ) with a form. On submit the data is posted to a php-file which then stores said data in a (temporary) xml-file, however, I also have a number of iframes which also contain forms. At first, I was planning on simply posting the input-data from the iframes to a seperate php file but I encountered several problems:

-I have several iframes, but I don't have a fixed amount since the user is supposed to be able to delete/ add iframes. Therefore I can't just tell iframe 1 to send its data to php-file no. 1, iframe 2 to send its data to php-file no.2 etc.., I need a flexible solution.

-I tried to submit all iframe inputs to ONE php file and was hoping it'd work since the xml-file this php-file sends the data to is only updated and not completely overwritten. As you might guess, this did not work.

-Another problem I encountered is that the user may go back and edit whatever he entered into the iframe. The data should only be saved once he clicks on the save button in the html-file to prevent that.

I also tried submitting the data via JavaScript, as people in similar questions suggested, but that did not work out for me. So I guess what I would like, is a suggestion as to how I should go about this. How can I send all the data once the "main" save button is clicked, it doesn't matter if the data goes to several php files. The solution shouldn't depend on a fixed amount of elements as that amount is not always the same.

Here's the iframe-html:

<form method="POST" action="php/iframe.php">

    <label>Your thoughts:</label>
    <input type="text" name="header">

    <label>Suggestions:</label>
    <textarea type="text" name="textbox"></textarea>

    <input type="button" value="submit">
</form>

(It's basically the same for all Iframes). Please let me know if you need any additional information. Edit: I read that submitting forms at the same time may cause interference, I know that much

Edit:

Relevant index.html:

<form method="post" action="main.php">

    <div id="firstSection"
       <label>First input</label>
       <input type="text" name="input[]">
       <button type="button" onclick="openIframe1()">Read more</button>
    </div>
    <div id="secondSection"
       <label>Second input</label>
       <input type="text" name="input[]">
       <button type="button" onclick="openIframe2()">Read more</button>
    </div>

    <button type="submit" value="submit"></button>

</form>

    <div class="iframe">
        <button type="button" class="close">Close</button>
        <iframe src="iframe1.html"></iframe>

    </div>
    <div class="iframe">
        <button type="button" class="close">Close</button>
        <iframe src="iframe2.html"></iframe>

    </div>

Why have iFrames. You can add DIVS with form input and have ONE submit button. You cannot NOT use JavaScript if you need to submit more than one form. "but that did not work out for me." is not a useful comment — mplungjan, Nov 17 '17 at 08:21
I didn't write the html-code, I'll see if maybe I can change that and I was following the answer from this post https://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button but I didn't submit them, probably because I tried to send them to the same php file, but I elaborated on that in my question — A.S.J, Nov 17 '17 at 08:23
What code would you like to see exactly? In order to keep it minimal, yet complete, I need to know that — A.S.J, Nov 17 '17 at 08:27
1. script that inserts/deletes an iframe. 2. enough html to show the issue. click `<>` to create a snippet assuming the insertion is all client side — mplungjan, Nov 17 '17 at 08:28
I suggest you use jQuery and clone the former iFrame contents into divs and put those divs INSIDE the form tag, then whatever lives in there will be sent to the server — mplungjan, Nov 17 '17 at 08:46
I added the relevant code. The code I have up until now is not so much the problem, the problem is that I can't figure out how to save the data in a way that works for my case while still using the iframes. I realize that using div's instead would be way easier to handle — A.S.J, Nov 17 '17 at 08:46

score 1 · Accepted Answer · answered Nov 17 '17 at 08:23

1

Define an array of your iframe inputs in the main page as hidden element, on click submit in the main page loop through the iframe by getting the datas and append to your hidden element from where you can now post that to your back end.. try this: Access jQuery data from iframe element

answered Nov 17 '17 at 08:23

JSking

399
1
4
18

try to access the iframe one after the other(for loop) each time, collect the input values and append to hidden form.. submit the hidden form at last – JSking Nov 17 '17 at 08:25
try to access the iframe one after the other(for loop) each time, collect the input values and append to hidden form.. submit the hidden form at last – JSking Nov 17 '17 at 08:25
@mplungjan you do know that Ekumahost has enough rep to comment, right? – RAZERZ Nov 17 '17 at 10:34
Not when I made the comment – mplungjan Nov 17 '17 at 10:46

Submitting html-form data and iframe input simultaneously

1 Answers1