autopopulate another form once submit

Question

devinodaniel 0 Light Poster

13 Years Ago

Hello!

I have what I think is semi-easy. I just can't figure it out.

<html>
<body>
<div id="container">

//scan in barcode here
		<div id="repairID">
			<table>
			   <tr>
			      <td>
			      Scan ID: 
			      </td>
                              <td>
			<form method="post" name="editRepairForm" action="https://example.com/IDEdit.do" target="frame1">
		    	<input name="scanId" id="scanId" value="" />
		    	<input name="fromLaunchScreen" id="fromLaunchScreen" type="hidden"/>
		    	<input type="submit" id="SubmitForEdit" style="display:none;"/>
			</form>
			      </td>
			   </tr>
			</table>
		</div>

//First row of results
<div id="outerdiv">
<iframe name="frame1" id="inneriframe"></iframe>
</div>

</body>
</html>

Okay so here is what I'm looking for. I'll be scanning a barcode into the top div. Then the result will be displayed in the iframe named "frame1".

Here the issue: I need for the next time I scan a barcode for the site to auto populate another DIV with "frame2" in it, then show the results in there. Then.. the next scan auto-populate another div with "frame3" in it and the results show there.. and so on.

There must be an easy way to do that.. right? I'm sorta new to Javascript so go easy on me! :)

Thanks in advance

html-css javascript

3 Contributors
8 Replies
218 Views
5 Days Discussion Span
Latest Post 13 Years Ago Latest Post by devinodaniel

urtrivedi 276 Nearly a Posting Virtuoso

13 Years Ago

on submit you can go on appending content to outerdiv by keeping currentframeno variable. everytime user submit, increment your currentframeno by one and append

document.getElementById("outerdiv").innerHTML=document.getElementById("outerdiv").innerHTML+"<iframe name='frame"+currentframeno+"' id='frame"+currentframeno+"'>your content</iframe>"

vibhaJ 126 Master Poster

13 Years Ago

I think you need ajax.Reason is below.
let you have a result in frame-1.
Once you submit form page is refreshed.
So even your next target is frame2, your frame1 data will be cleared because of second form submit.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

devinodaniel 0 Light Poster · Answer 1 · 2011-04-21T10:08:19+00:00

Maybe this could help. What I'm really looking for here first is how can I make the target of the form change after I submit once.

For instance.. when page first loads it would be 'frame1'. After submitting, the NEXT time I submit it targets 'frame2', then 'frame3' in numerical succession for indefinite amounts.

Help at all?

:/ I've tried getting the GetFormElementByID.target but I don't really know what to do with it next. lol

devinodaniel 0 Light Poster · Answer 2 · 2011-04-25T01:25:33+00:00

on submit you can go on appending content to outerdiv by keeping currentframeno variable. everytime user submit, increment your currentframeno by one and append
document.getElementById("outerdiv").innerHTML=document.getElementById("outerdiv").innerHTML+"<iframe name='frame"+currentframeno+"' id='frame"+currentframeno+"'>your content</iframe>"

Thank for your help! I think we're on the right track with this. I've got another example that may be more clear. I'm looking to change the target of the form, not change the iframe name or id. Something like this:

Each time an object is scanned, the results show up inside the next iframe.. so it creates kind of a list.

<!DOCTYPE html>
<head>
</head>
<body>
<div id="container">
<div id="scanID">
		
		
			     <form method="post" id="auditRepairForm" name="auditRepairForm" action="https://example.com.com" target="changeTarget()">
		    	  <input name="scanID" id="scanID" value="12345678" onFocus="this.value=''" />
		    	  <input name="fromLaunchScreen" id="fromLaunchScreen" type="hidden"/>
		    	  <input type="submit" id="SubmitForEdit" style="display:none;"/>
			      </form>
		</div>
		
<div class="outerdiv">
<iframe name="frame1" class="inneriframe"></iframe>
</div>

<div class="outerdiv">
<iframe name="frame2" class="inneriframe"></iframe>
</div>
<div class="outerdiv">
<iframe name="frame3" class="inneriframe"></iframe>
</div>
<div class="outerdiv">
<iframe name="frame4" class="inneriframe"></iframe>
</div>
<div class="outerdiv">
<iframe name="frame5" class="inneriframe"></iframe>
</div>
<div class="outerdiv">
<iframe name="frame6" class="inneriframe"></iframe>
</div>
<div class="outerdiv">
<iframe name="frame7" class="inneriframe"></iframe>
</div>
<div class="outerdiv">
<iframe name="frame8" class="inneriframe"></iframe>
</div>
<div class="outerdiv">
<iframe name="frame9" class="inneriframe"></iframe>
</div>
<div class="outerdiv">
<iframe name="frame10" class="inneriframe"></iframe>
</div>

</div>

</body>
</html>

devinodaniel 0 Light Poster · Answer 3 · 2011-04-25T03:32:06+00:00

I had a friend help me from another site and he came up with this. It seems close but still on submit only submits to frame 1 every time.

<script type="text/javacript">
var count = 2;
function submit() {
    setTimeout(function () {
         // this will get executed AFTER the form submits
         document.getElementById("the_form").target = "frame" + count;
         count += 1; // increase the counter so next time is frame3;
    }, 1);
    return true;
}
</script>
<form id="the_form" onsubmit="return submit();" target="frame1">
..etc..
</form>

devinodaniel 0 Light Poster · Answer 4 · 2011-04-25T07:49:22+00:00

I'm beginning to think this is impossible and no one knows how to do it! I'm getting to the point I would pay someone to help me.

Anyone?!?

urtrivedi 276 Nearly a Posting Virtuoso · Answer 5 · 2011-04-25T10:09:58+00:00

its good that you used count variable not you must keep it as hidden in the form

here is html form code

<INPUT TYPE=HIDDEN id=currentframeno name=currentframeno value=<?php echo ($_POST['currentframeno'])+1 ?>>

then initialise it in javascript as

count = <?php echo $_POST['currentframeno']?>;

devinodaniel 0 Light Poster · Answer 6 · 2011-04-25T22:00:50+00:00

I can't for the life of me get it to work that way. lol thank you everyone for your help. I'm trying a different technique as my last and final attempt. Using this code a new div is populated with every submit but I can't figure out how to get a new iframe with a unique name on it to populate and change the target of the form to match that.

I've also attached a working site so that it's easier to visualize what I'm struggling with. I've removed the actual urls in form action because it's on a secure access site only available from within an internal network.

http://spectacledesigns.com/test/

thank you again for your opinions and time!

<script type="text/javascript" language="javascript">

    function createDiv()
    {
        var divTag = document.createElement("div");
        
        divTag.setAttribute("align","center");
      
        divTag.style.margin = "0px auto";
     
        divTag.className ="outerDiv";
        
        divTag.innerHTML = "<iframe id=iframe name=frame1 class=inneriframe>This HTML Div tag created using Javascript DOM dynamically.</iframe>";
        
        document.body.appendChild(divTag);
}
</script>