Website / Enter Button erstellen (CSS?)

[n.t]

Hallo,

bin leider auf dem Gebiet CSS etc. nicht so am start. Ich kann zwar Websites erstellen und kleine Änderungen vornehmen doch hier hab ich grade gar keine Ahnung. Folgendes: auf der Website mygreenings.com/karte existiert eine Suchfunktion ( Am besten selbst mal testen damit es schlüssig wird). Man macht also eine Eingabe - bspw. "Hamburg". Die Eingabe wird allerdings erst angenommen wenn man auf der Tastatur mit Enter bestätigt, was viele verwirrt. Nun muss es doch möglich sein den Enter Befehl via Button auf der Website zu senden, ich weiss nur leider nicht wo ich da anfangen soll. Hat jemand vielleicht eine Idee?

 

[Jesterfox]

Am besten fängt man bei den Basics an, in deinem Fall bei denen zu HTML (und nicht CSS): https://wiki.selfhtml.org/

Im speziellen die Elemente für Formulare: https://wiki.selfhtml.org/wiki/HTML/Formulare

Da gibt es sowohl <Input type="submit"> als auch <button>

 

[FranzvonAssisi]

Bin auf nem Handy und kanns mir nicht anschauen, aber theoretisch solltest du im Quellcode ein Formular für das Eongabefeld finden. (<form ... ></...>)
Da musst du dann einfach ein <input type="submit"/> reinpacken und wenn man da drauf klickt, wird das Formular abgeschickt.

Lg, Franz

So pS: Kann man da noch mehr Restaurants eintragen?
Da fallen mir noch ein paar ein...

 

[blablub1212]

Das ist ein gekauftes Wordpress Theme: https://themeforest.net/user/javothemes also schau erstmal in den Wordpress-Einstellungen nach bevor du da anfängst irgendwas mit HTML/JS/CSS zu machen.

 

[n.t]

Danke erstmal für die ganzen Antworten. Also das ist wohl der ganze Code für das Search Form. Hat einer eine Idee was genau da jetzt geändert werden müsste?

<div class="javo-maps-search-wrap" style="top: 122px;">
	<!-- row -->
	<div class="row text-left filter-address">
	<div class="col-md-3 javo-map-box-title">
		Standort	</div><!-- /.col-md-3 -->
	<div class="col-md-9">
		<div class="row">
			<div class="col-md-5">
				<input id="javo-map-box-location-ac" type="text" class="form-control javo-location-search" value="" placeholder="Geben Sie einen Standort ein." autocomplete="off">
			</div>
			<div class="col-md-7 javo-my-position-geoloc">
				<div class="row">
					<div class="col-md-2 col-sm-2">
						<div class="btn btn-primary admin-color-setting btn-block javo-my-position">
							<i class="fa fa-compass"></i>
						</div>
					</div>
					<div class="col-md-10 col-sm-10 active">
						<div class="javo-radius-slider-label hidden">Radius</div>
						<div class="close">×</div>
						<div class="javo-geoloc-slider noUi-target noUi-ltr noUi-horizontal noUi-connect" style="margin: 15px 0px;"><div class="noUi-base"><div class="noUi-origin noUi-background" style="left: 50%;"><div class="noUi-handle noUi-handle-lower"><div class="javo-slider-tooltip"><span>15&nbsp;km</span></div></div></div></div></div>
					</div>
				</div>
			</div>
		</div>
	</div><!-- /.col-md-9 -->
</div><!-- /.row --><div class="row text-left javo-map-box-category">

	<div class="col-md-3 javo-map-box-title">
		Kategorie	</div><!-- /.col-md-3 -->
	<div class="col-md-9 javo-map-box-field">
		<select name="map_filter[listing_category]" class="form-control javo-selectize-option selectized" data-tax="listing_category" multiple="multiple" tabindex="-1" style="display: none;"></select><div class="selectize-control form-control javo-selectize-option multi plugin-remove_button"><div class="selectize-input items not-full has-options"><input type="text" autocomplete="off" tabindex="0" placeholder="Alle Kategorien" style="width: 96px;" class=""></div><div class="selectize-dropdown multi form-control javo-selectize-option plugin-remove_button" style="display: none; width: 100px; top: 0px; left: 0px;"><div class="selectize-dropdown-content"></div></div></div>
	</div><!-- /.col-md-9 -->

</div><!-- /.row --><div class="row text-left javo-map-box-advance-keyword">
	<div class="col-md-3 jv-advanced-titles javo-map-box-title">
		Keyword	</div><!-- /.col-md-3 -->
	<div class="col-md-9 jv-advanced-fields">
		<span class="twitter-typeahead" style="position: relative; display: inline-block; direction: ltr; width: 100%;"><input type="text" id="javo-map-box-auto-tag" class="form-control tt-input" value="" placeholder="Keyword" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: Raleway, sans-serif; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none; right: auto;"><div class="tt-dataset-tags"></div></span></span>
	</div><!-- /.col-md-9 -->
</div><!-- /.row -->
	<div class="javo-maps-advanced-filter-wrap">
		<div class="filter-close">
			<div class="filter-close-inner">
				<span class="glyphicon glyphicon-remove"></span>
			</div>
		</div>
		<div class="row text-left javo-map-box-contract-type">
	<div class="col-md-3 javo-map-box-title javo-map-box-title">
		 	</div><!-- /.col-md-3 -->
	<div class="col-md-9 javo-map-box-field">
		<select name="map_filter[listing_location]" class="form-control javo-selectize-option selectized" data-tax="listing_location" multiple="multiple" tabindex="-1" style="display: none;"></select><div class="selectize-control form-control javo-selectize-option multi plugin-remove_button"><div class="selectize-input items not-full has-options"><input type="text" autocomplete="off" tabindex="0" placeholder="Jede Küche" style="width: 75px;" class=""></div><div class="selectize-dropdown multi form-control javo-selectize-option plugin-remove_button" style="display: none; width: 100px; top: 0px; left: 0px;"><div class="selectize-dropdown-content"></div></div></div>
	</div><!-- /.col-md-9 -->
</div><!-- /.row -->	<div class="row text-left javo-map-box-advance-term">
		<div class="col-md-3 jv-advanced-titles javo-map-box-title">
			Listing Amenities		</div><!-- /.col-md-3 -->
		<div class="col-md-9 jv-advanced-fields">
			<div class="col-md-4 col-sm-6 filter-terms"><label><input type="checkbox" name="jvfrm_spot_map_multiple_filter" value="511" data-tax="listing_amenities" data-title="Listing Amenities" class="">Glutenfrei</label></div><div class="col-md-4 col-sm-6 filter-terms"><label><input type="checkbox" name="jvfrm_spot_map_multiple_filter" value="512" data-tax="listing_amenities" data-title="Listing Amenities" class="">Laktosefrei</label></div>		</div><!-- /.col-md-9 -->
	</div>
			<div class="filter-footer">
			<button class="btn btn-warning admin-color-setting btn-block javo-map-box-btn-advance-filter-apply">
				Zurücksetzen			</button>
		</div>
	</div><!-- /.javo-maps-advanced-filter-wrap -->

	<div class="row javo-map-box-advance-filter-wrap">
		<!-- /.col-md-3 -->
		<!-- /.col-md-2 -->
		
	<div class="col-md-3 col-sm-6">
			<button class="btn btn-warning btn-block" id="javo-map-box-advance-filter">
				<i class="txt-icon glyphicon glyphicon-tasks"></i>
				<span class="txt-advanced"> </span>
				<span class="txt-filter">Filter</span>
			</button>
		</div><div class="col-md-2 col-sm-6">
			<button class="btn btn-default admin-color-setting btn-block" id="javo-map-box-advance-filter-reset">
				<i class="txt-icon glyphicon glyphicon-refresh"></i>
				<span class="txt-reset">Reset</span>
			</button>
		</div><div class="col-md-7 col-sm-12">
			<div class="row">
				<div class="col-md-7 text-left javo-map-box-filter-items"></div>
				<div class="col-md-5 col-sm-12 text-right">
					<span class="javo-map-filter-result-count" data-suffix="Restaurants">995 Restaurants</span>
				</div>
			</div>
		</div></div>
		<!-- /.row -->
</div>

Ergänzung (25. Januar 2017)

Das ist ein gekauftes Wordpress Theme: also schau erstmal in den Wordpress-Einstellungen nach bevor du da anfängst irgendwas mit HTML/JS/CSS zu machen.

hab ich bereits - leider keine option dabei

Ergänzung (25. Januar 2017)

Bin auf nem Handy und kanns mir nicht anschauen, aber theoretisch solltest du im Quellcode ein Formular für das Eongabefeld finden. (<form ... ></...>)
Da musst du dann einfach ein <input type="submit"/> reinpacken und wenn man da drauf klickt, wird das Formular abgeschickt.

Lg, Franz

So pS: Kann man da noch mehr Restaurants eintragen?
Da fallen mir noch ein paar ein...

Man kann da durchaus noch mehr eintragen, befindet sich ja noch im aufbau

 

[r15ch13]

Du koenntest das Plugin Header and Footer Scripts installieren und diesen Schnipsel als Footer Script einfuegen:

jQuery('#javo-map-box-location-ac').parent().append('<div class="btn btn-primary admin-color-setting ">Suchen</div>')
jQuery('#javo-map-box-location-ac').parent().on('click', '.btn', function(e) {
    jQuery('#javo-map-box-location-ac').trigger(jQuery.Event( 'keydown', { keyCode: 13 } ))
})

Das fuegt einen Suchen-Button hinzu. Beim draufklicken sendet er dann einen Enter an das Suchfeld.
So musst du keine Aenderungen am Template machen, die bei einem Update verloren gehen koennten.

 

[n.t]

Danke schonmal für das Script, werd mal schauen wie ich das einbaue.

*edit: funktioniert leider nicht.

 

[n.t]

Keine Idee mehr ?

 

[r15ch13]

Was meinst du "funktioniert leider nicht."? "Geht nicht" ist keine Fehlermeldung...

 

[n.t]

Sorry,

Der Button ist zwar da aber ohne Funktion und es sind noch Schnipsel vom script zu sehen.

 

[r15ch13]

Hast den Schnipsel mit Hilfe des Header and Footer Scripts Plugins eingebunden, oder einfach so in das Template eingefuegt? Ich empfehle die Variante mit dem Plugin, weil du bei einem Update des Theme diese Aenderung verlierst.

 

[n.t]

Also, habs jetzt direkt in das Template eingebunden und jetzt funktioniert es, vielen Dank!

 

[blablub1212]

Nur als Tipp, wenn du ein Template direkt veränderst, dann kannst du es nicht mehr updaten. Daher nutze Child-Themes: https://codex.wordpress.org/Child_Themes. Das ist schnell gemacht und du kannst dich viel freier austoben