✔ Form Elemente im bestehnden HTML ersetzen?

[packman]

Hallo Leute,

Ich habe eine HTML/PHP Seite. Die beinhaltet ein Formular, nun möchte ich eine bestehende Dropdown-Liste, durch einen klick auf ein bild / text-link / oder ähnliches, mit einem anderen HTML-Element ersetzen, in meinem Fall durch ein Texfeld. Die schon ausgefüllten Elemente im Formular sollten die eingegebenen Werte nicht verlieren.

Da dachte ich mir solche Fälle löst man doch mit Javascript, leider hab ich davon wenig Ahnung.

Es wäre sehr hilfreich wenn mir jemand ein kleines codeschnippsel posten würde, das einfach ein Form-Element ersetzt ohne das die ganze seite neu geladen wird.

Mein Formular (hab den PHP code entfernt)

<form name="user" method="post" action="" >
	user name <input name="t_uname" type="text" value="" />
	<br />
	vorname <input name="t_vname" type="text" value="" />
	<br />
	nachname <input name="t_nname" type="text" value="" />
	<br />
	<!-- Dieses Dropdown Menu soll mit einem Klick auf enen link / Button / bild oder so.. durch ein Textfeld ersetzt werden können -->
	berechtigung
	<select name="so_priv">
		<option value="0"> --Brerechtigung auswählen-- </option>
		<option value="1"> Gast </option>
		<option value="2"> Admin </option>
	</select>
	<br />
	<input name="s_send" type="submit" value="Hinzufügen">
	<br />
</form>

 

[con-f-use]

Ich für meinten Teil würde den unerwünschten Teil in einen Container (z.B. ein <div>-Tag) packen und diesen Container dann verstecken, während ich das andere Objekt sichtbar mache.

<form name="user" method="post" action="" >
    user name <input name="t_uname" type="text" value="" />
    <br />
    vorname <input name="t_vname" type="text" value="" />
    <br />
    nachname <input name="t_nname" type="text" value="" />
    <br />
    <!-- Dieses Dropdown Menu soll mit einem Klick auf enen link / Button / bild oder so.. durch ein Textfeld ersetzt werden können -->
    berechtigung
    <div id="wegdamit">
        <select name="so_priv">
            <option value="0"> --Brerechtigung auswählen-- </option>
            <option value="1"> Gast </option>
            <option value="2"> Admin </option>
        </select>
    </div>
    <div id="herdamit" style="display:none;">
        <textarea>Ich bin die Ersetztung!</textarea>
    </div>
    <!-- Button, der die Ersetzung einleitet -->
    <input type="button" value="Ersetzten!" onclick="
        document.getElementById('wegdamit').style.display = 'none';
        document.getElementById('herdamit').style.display = 'block';
    " />
    <br />
    <input name="s_send" type="submit" value="Hinzufügen">
    <br />
</form>

Siehe auch Document Object Model (DOM).

 

[packman]

Danke für den Tipp ich habs nun ähnlich gelöst, nur fehlt mir jetzt eine funktion nämlich sollte ich den Wert vom unaktiven Element löschen oder wenigstens auf null setzen damit ich es mit php abfangen kann.

	<form name="user" method="post" action="" >
		user name <input name="t_uname" type="text" value="" />  <br />
		vorname <input name="t_vname" type="text" value="" />  <br />
		nachname <input name="t_nname" type="text" value="" />  <br />
		berechtigung
		<div id="wegdamit" style="display:block;">
			<select name="so_priv" id="so_priv">
				<option value="0"> --Brerechtigung auswählen-- </option>
				<option value="1"> Gast </option>  <option value="2"> Admin </option>
			</select>
		</div>
		<div id="herdamit" style="display:none;">
			<input name="t_priv" type="text" value="" />  <br />
		</div>
		<!-- Button, der die Ersetzung einleitet -->
		<input type="button" value="Ersetzten!" onclick="
		if(document.getElementById('wegdamit').style.display == 'block'){
			document.getElementById('wegdamit').style.display = 'none';
			document.getElementById('herdamit').style.display = 'block';
			//hier Wert von:  ---document.getElementById('wegdamit')--- löschen oder auf null setzen
		}
		else{
			document.getElementById('wegdamit').style.display = 'block';
			document.getElementById('herdamit').style.display = 'none';
			//hier Wert von:  ---document.getElementById('herdamit')--- löschen oder auf null setzen
		}
		" />
		<br />
		<input name="s_send" type="submit" value="Hinzufügen">  <br />
	</form>

 

[con-f-use]

Versuchs mal mit "firstChild.value= null" nach dem "getElementById"

 

[packman]

Danke! das wars..

Nochmal der vollständige code:

	<form name="user" method="post" action="" >
		user name <input name="t_uname" type="text" value="" />  <br />
		vorname <input name="t_vname" type="text" value="" />  <br />
		nachname <input name="t_nname" type="text" value="" />  <br />
		berechtigung
		<div id="wegdamit" style="display:block;">
			<select name="so_priv" id="so_priv">
				<option value="0"> --Brerechtigung auswählen-- </option>
				<option value="1"> Gast </option>  <option value="2"> Admin </option>
			</select>
		</div>
		<div id="herdamit" style="display:none;">
			<input name="t_priv" type="text" value="" />  <br />
		</div>
		<!-- Button, der die Ersetzung einleitet -->
		<input type="button" value="Ersetzten!" onclick="
		if(document.getElementById('wegdamit').style.display == 'block'){
			document.getElementById('wegdamit').style.display = 'none';
			document.getElementById('herdamit').style.display = 'block';
			document.getElementById('wegdamit').firstChild.value= null;
		}
		else{
			document.getElementById('wegdamit').style.display = 'block';
			document.getElementById('herdamit').style.display = 'none';
			document.getElementById('herdamit').firstChild.value= null;
		}
		" />
		<br />
		<input name="s_send" type="submit" value="Hinzufügen">  <br />
	</form>