Submitt Postdaten über Javascript schicken.

[Joe]

Hallo alle,

ich möchte gerne ein Submittbutton anzeigen lassen wenn man im folgenden Select Feld etwas auswählt.
http://tutorialzine.com/2010/11/better-select-jquery-css3/
Alle Codedateien dazu sind in dem Tut aufgeführt.
Ich hab eben bloss keine Idee wie ich bei Auswahl den Submit-Button (Form Post) hinbekomme.

Eine weitere speziellere Frage ist wie man die Selectfelder die auf droppen auch nebeneinander anordnen kann. Also erst 4 nach unten und dann rechts daneben wieder 4 usw. Geht das und wenn ja wie?

Mein Code (Anzeige der Select-Options in einer ForSchleife:

<div id="page">
	<h1>Your Product</h1>

	<form method="post" action="">

    	<!-- We are going to use jQuery to hide the select element and replace it -->

		<select name="fancySelect" class="makeMeFancy">

        	<!-- Notice the HTML5 data attributes -->
			
			
	        <option value="0" selected="selected" data-skip="1">Bücher Zeitschriften</option>
			<?php
			if (0!=count($ArtundAnzahl)) {
				foreach($ArtundAnzahl as $IsItem => $value){
					echo "<option value=\"$j\" data-icon=\"img/products/$Grafi[$IsItem].png\" data-html-text=\"$IsItem&lt;i&gt;x$value&lt;/i&gt;\">$IsItem</option>";
				}
			}
			?>
        	<!-- Beispielzeilen
			<option value="2" data-icon="img/products/ipod.png" data-html-text="iPod &lt;i&gt;in stock&lt;/i&gt;">iPod</option>
            <option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air&lt;i&gt;out of stock&lt;/i&gt;">MacBook Air</option>
            <option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station&lt;i&gt;in stock&lt;/i&gt;">iMac Station</option>
			-->
        </select>
    </form>

</div>

Die Demo zu dem Select ist hier:
http://demo.tutorialzine.com/2010/11/better-select-jquery-css3/select-jquery.html

Vielen Dank fürs helfen,
Gruss Joe.

 

[threadi]

Die einfache Variante:
Füge in deinen HTML-Code auch einen input-submit-Button ein den Du per CSS ausblendest.

<input type="submit" id="sendenbutton" name="senden" value="Senden" style="display: none;" />

Per JavaScript musst Du dann nur den display-Wert auf "block" setzen und schon ist der Submit-Button zu sehen.

document.getElementById("sendenbutton").style.display = "block";

Die ausführliche (und sauberere Variante) wäre, wenn Du per JavaScript den Button erzeugst und in den HTML-Code einfügst. Die wichtigen Keywords für dich sind: document.createElement und appendChild().

Und zur zweiten Frage:
Ein <select>-Element kann man leider nicht wirklich einheitlich in allen Browsern stylen, somit auch nicht die Auswahlfelder nebeneinander anordnen. Die einzige Möglichkeit die Du hier hättest wäre selbst ein DropDown-Feld mit CSS und JavaScript zu definieren - dann hättest Du diese Möglichkeit.

 

[Joe]

Ok nen normales Submitt hab ich nun hinbekommen allerdings ist das eher funktionell als elegant

<div id="page">

	<form method="post" action="main.php?section=bibliothek">

    	<!-- We are going to use jQuery to hide the select element and replace it -->

		<select name="fancySelect" class="makeMeFancy">

        	<!-- Notice the HTML5 data attributes -->
			
			
	        <option value="0" selected="selected" data-skip="1">Bücher Zeitschriften</option>
			<?php
			if (0!=count($ArtundAnzahl)) {
				foreach($ArtundAnzahl as $IsItem => $value){
					echo "<option value=\"$IsItem\" data-icon=\"img/products/$Grafi[$IsItem].png\" data-html-text=\"$IsItem&lt;i&gt;x$value&lt;/i&gt;\">$IsItem</option>";
					$Senddata=true;
				}
			}
			?>
        	<!-- Beispielzeilen
			<option value="2" data-icon="img/products/ipod.png" data-html-text="iPod &lt;i&gt;in stock&lt;/i&gt;">iPod</option>
            <option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air&lt;i&gt;out of stock&lt;/i&gt;">MacBook Air</option>
            <option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station&lt;i&gt;in stock&lt;/i&gt;">iMac Station</option>
			-->
			
        </select>
		<?php
		if ($Senddata==true) {
			echo "<input type='submit' style='font-family: Verdana; font-size: 8pt' name='formaction2' value='Lesen'>";
		}
		?>
    </form>
</div>

Mit if ($Senddata==true) { wollte ich eigentlich ereichen das der Submitt Button erst erscheint wenn eine Option aus Der Dropdownbox gewählt wurde. Hätte vermutet das an dieser Stelle im JScript der Button erzeugt werden müsste:

li.click(function(){

			selectBox.html(option.text());
			dropDown.trigger('hide');

			// When a click occurs, we are also reflecting
			// the change on the original select element:
			select.val(option.val());

			return false;
		});

Gut Hauptsache es wird erstmal etwas gesendet.. den Style muss ich eh noch insgesamt überall ausarbeiten.

Und zur zweiten Frage:
Ein <select>-Element kann man leider nicht wirklich einheitlich in allen Browsern stylen, somit auch nicht die Auswahlfelder nebeneinander anordnen. Die einzige Möglichkeit die Du hier hättest wäre selbst ein DropDown-Feld mit CSS und JavaScript zu definieren - dann hättest Du diese Möglichkeit.

Also für mich als JS Halblaie siehts danach aus das die Selectboxen selbst gestylt sind. Ich nahm nun an man könnte die <Select> Elemente an einem Div ausrichten und sie so zum automatischen ausrichten zwingen. Quasi nach einer bestimmten Div-Höhe zb Height 300px springen alle weiteren <select> nach rechts.

Danke für deine Antwort

 

[threadi]

Meine Antwort beinhaltete keinen PHP-Code. Du hast den Button jedoch nur eingebunden wenn im PHP-Code eine Variable enthalten ist. Das meinte ich überhaupt nicht. So kann das auch nicht wirklich ohne Absenden des Formulars funktionieren.

Formularelemente wie <select> werden von jedem Browser anders dargestellt. Der IE nutzt dafür seit jeher die in Windows eingebetteten Formular-Styles die über CSS so gut wie gar nicht beeinflusst werden könnten. <select>-Elemente kann man daher nicht einheitlich stylen, auch wenn es bei dir in deinem Browser vlt. gut aussieht.