genest formulier

Status
Niet open voor verdere reacties.
D

droogers

Gebruiker
Lid geworden
27 jun 2001
Berichten
173
Ik heb een formulier waarmee een ideal betaling gedaan kan worden.
Nu wil ik deze onderbrengen in een genest formulier. Ik las dat dit kon met behulp van een ID optie in het form. Het werkt echter niet helemaal goed. Het formulier is wel goed zichtbaar maar als ik op de knop 'Betalen' klik gebeurt er niets.
Dit is de formuler code:
HTML: 
<form id="main-form" action="/main-action" method="post"></form>
<form id="content_ideal1" class="form-horizontal" style="display: inline;" title="iDEAL2" action="https://*******/?option=com_ccidealplatform&amp;view=ccideal&amp;layout=content_redirect" method="post" name="content_ideal"></form>
<div class="ccidealplatform_content_plugin_title" style="text-align: center;">iDEAL</div>
<p>
	<input form="content_ideal1" name="extra_textfield_title_label" type="hidden" value="Form" />
	<input id="extra_textfield_title" form="content_ideal1" maxlength="100" name="extra_textfield_title" type="hidden" value="iDEAL2" />
</p>
<div class="ccidealplatform_content_plugin_image"><img src="components/com_ccidealplatform/assets/images/select_iDEAL.jpg" alt="" /></div>
<div class="ccidealplatform_content_plugin_fieldset">
	<div class="idealcontent">
		<div class="control-group">
			<label class="ccidealplatform_content_plugin_labels">Kies bedrag: €</label>
			<label class="ccidealplatform_content_plugin_labels">
				<input id="amount_by_user" class="ccidealplatform_content_plugin_fields" onkeyup="ajaxFunction(this.form,'amount_by_user',1)" form="content_ideal1" name="total" type="text" value="" /> <span id="ajaxDivname1" style="display: none; float: right;"><img src="components/com_ccidealplatform/assets/images/cross.png" alt="" width="16" height="16" /></span><span id="ajaxDivname11" style="display: none; float: right;"><img src="components/com_ccidealplatform/assets/images/tick.png" alt="" width="16" height="16" /></span></label>
		</div>
		<div class="control-group">
			<label class="ccidealplatform_content_plugin_labels">Collectedoel</label>
			<label class="ccidealplatform_content_plugin_labels">31-5-2020</label>
			<input form="content_ideal1" name="cont_extn" type="hidden" value="31-5-2020" />
			<input form="content_ideal1" name="hidden_order_number" type="hidden" value="3665cac48499d41a" />
		</div>
		<div class="control-group">
			<div class="submit-container">
				<button id="content_plugin_submit1" class="btn btn-success" onclick="return submitbutton(this.form,1, 1)" name="submit" type="submit">Betalen</button>
			</div>
		</div>
	</div>
</div>
<p>
	<input form="content_ideal1" name="itemid" type="hidden" value="1934" />
	<input id="path" form="content_ideal1" name="path" type="hidden" value="https://*******/" />
	<input form="content_ideal1" name="id" type="hidden" value="" />
	<input form="content_ideal1" name="extn" type="hidden" value="Content_plugin" />
	<input form="content_ideal1" name="task" type="hidden" value="idealRedirect" />
	<input id="hidden_org" class="inputbox required" form="content_ideal1" name="hidden_org" type="hidden" value="" />
	<input form="content_ideal1" name="myMenuItemID" type="hidden" value="1934" />
</p>

Als ik de code inspecteer in Chrome dan zie ik deze foutmelding:
HTML: 
Uncaught TypeError: Cannot set property 'noValidate' of null
    at Object.e.submitform (core.js?a11037cc413bac4f412d3eef891cd6a6:1)
    at Object.e.submitbutton (core.js?a11037cc413bac4f412d3eef891cd6a6:1)
    at window.submitbutton (core.js?a11037cc413bac4f412d3eef891cd6a6:1)
    at HTMLButtonElement.onclick (test11:540)
 
Die meldingen uit de console hebben betrekking op je JavaScript code.

Bestaat de functie submitbutton() eigenlijk wel?
Heb je anders een voorbeeldsite die we kunnen bekijken?
 
Het zou misschien wel eens kunnen omdat je twee formuliergroepen hebt, wat een dwarsligger is.
 
Het formulier met id content_ideal1 werkt los prima. Het probleem is dat de geneste versie niet werkt
 
Laat eens zien wat je dan precies aanpast, en waarna het niet meer werkt?
 
Dit is de werkende (niet geneste) versie
HTML: 
<form class='form-horizontal' title='iDEAL2' action='https://hervormdijsselstein.nl/?option=com_ccidealplatform&amp;view=ccideal&amp;layout=content_redirect' method='post' id='content_ideal1' name='content_ideal' style="display:inline;"><div class='ccidealplatform_content_plugin_title' style='text-align: center;'>iDEAL2</div>
<input type='hidden' name='extra_textfield_title_label' value='Form' /><input type='hidden' name='extra_textfield_title'  id='extra_textfield_title' value='iDEAL2' maxlength='100' />
<div class='ccidealplatform_content_plugin_image'><img src='https://hervormdijsselstein.nl/components/com_ccidealplatform/assets/images/select_iDEAL.jpg' alt='' /></div><div class='ccidealplatform_content_plugin_fieldset'><div class='idealcontent'>
<div class='control-group'><label  class='ccidealplatform_content_plugin_labels'>Kies bedrag: €</label><label class='ccidealplatform_content_plugin_labels'><input type='text' name='total' onkeyup="ajaxFunction(this.form,'amount_by_user',1)" onblur="ajaxFunction(this.form,'amount_by_user',1)" id='amount_by_user' class='ccidealplatform_content_plugin_fields' value=''/>
<span id='ajaxDivname1' style='display:none;float:right;'><img src='https://hervormdijsselstein.nl/components/com_ccidealplatform/assets/images/cross.png' width='16' height='16' alt='' /></span><span id='ajaxDivname11' style='display:none;float:right;'><img src='https://hervormdijsselstein.nl/components/com_ccidealplatform/assets/images/tick.png' width='16' height='16' alt='' /></span></label></div><div class='control-group'><label class='ccidealplatform_content_plugin_labels'>Collectedoel</label><label class='ccidealplatform_content_plugin_labels'>pastoraat 31-5-2020</label>
<input type='hidden' name='cont_extn' value='pastoraat 31-5-2020' />

<input type='hidden' name='hidden_order_number' value='3665cac48499d41a' /></div>
<div class='control-group'>
<div class='submit-container'><button type='submit' name='submit' onclick='return submitbutton(this.form,1, 1)' id='content_plugin_submit1' class='btn btn-success'>Betalen</button></div></div></div></div>
<input type='hidden' name='itemid' value='1934'/>
<input type="hidden" name="path" id="path" value='https://hervormdijsselstein.nl/' />
<input type='hidden' name='id' value=''/>

<input type='hidden' name='extn' value='Content_plugin' />
<input type='hidden' name='task' value='idealRedirect'/><input id="hidden_org" type="hidden" name="hidden_org" class="inputbox required" value=""/>
<input type='hidden' name='myMenuItemID' value='1934'/>
</form>
 
Maar wat is het verschil tussen beide code?
Ik snap dat je geholpen wilt worden, maar zorg dat je dan ook wat logische opbouw in je code hebt, en laat zien wat er anders is.

Want in beide codes zie ik weinig overeenkomsten dat het echt zoeken naar een speld in een hooiberg is.
Veel formuliervelden zijn onder andere anders.
 
De code in berichtje #1 begint (ingekort) met
Code: 
<form id="main-form" action="..." method="post"></form>
<form id="content_ideal1" action="..." method="post"></form>

Dit zijn 2 lege formulieren omdat </form> het einde van een formulier is.

Een <form> in een <form> heb ik nooit eerder gezien en dit zal waarschijnlijk niet goed werken.
Een "genest formulier" op een website is één formulier maar door de vormgeving lijkt het een genest formulier.

Zo te lezen gaat het om vormgeving en daarvoor kan het beste de maker van de website worden geraadpleegd.
 
Ik heb inderdaad een form toegevoegd aan het begin.
Ergens had ik gelezen dat je een genest form kon maken door bij <input het volgende in te vullen: form="content_ideal1"
Dit heb ik gedaan zoals je op de eerste post kunt lezen. Helaas werkt dit niet. :(
Hier vindt je de voorbeeldcode:
HTML: 
<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" value="Save" form="sub-form" />
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>
 
Laatst bewerkt:
Ik zie geen genestte form, maar een opgestapelde.
Daar zal het wel fout gaan.
 
@droogers Wat php4u aangeeft is mogelijk. Ik heb geen idee of dit op jouw website bruikbaar is.
Code: 
<form id="main-form" action="..." method="post">
     hier staan input's van bovenste formulier
</form>
<form id="content_ideal1" action="..." method="post">
     hier staan input's van onderste formulier
</form>
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan