✔ HTML-Formular - HiddenField als Array mit Ajax (jQuery) weiterverarbeiten

dwex

dwex

Erfahrenes Mitglied
Hallo Leute,

ich stehe schon wieder mal vor einem Ajax-Problem bei dem ich eure Hilfe brauche.

Ich habe ein HTML-Formular welches einige Eingabefelder innerhalb Lables hat.
Ausserdem hat dieses HTML-Formular auch Hiddenfields welche alle den selben Namen haben. Diese HiddenFields stammen aus einem Ajaxuploadscript und betiteln die Dateinamen. Diese HiddenFields werden als auch "dynamisch" erzeugt.
Diese sollen also als Array an mein PHP-Script über das untenstehende JS gesendet werden.
HTML: 
<form id="form2">
  <input type="hidden" name="test[]" value="meine_datei.pdf" />
  <input type="hidden" name="test[]" value="noch_eine_datei.pdf" />
  <fieldset>
    <label class="vorname">
      <input type="text" value="Vorname:" />
      <span class="error">*Bitte geben Sie einen richtigen Vornamen ein.</span> <span class="empty">*Bitte geben Sie Ihren Vornamen ein.</span>
    </label>
    </fieldset>
</form>
Außerdem habe ich folgendes JS in der Datei:
HTML: 
//forms
;(function($){
	$.fn.forms=function(o){
		return this.each(function(){
			var th=$(this)
				,_=th.data('forms')||{
					errorCl:'error',
					emptyCl:'empty',
					invalidCl:'invalid',
					notRequiredCl:'notRequired',
					successCl:'success',
					successShow:'4000',
					mailHandlerURL:'bin/mailhandler.php',
					ownerEmail:'test@test.de',
					stripHTML:true,
					smtpMailServer:'localhost',
					targets:'input,textarea',
					controls:'a[data-type=reset],a[data-type=submit]',
					validate:true,
					rx:{
						".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
						".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
						".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
						".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
						".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
						".message":{rx:/.{20}/,target:'textarea'}
					},
					preFu:function(){
						_.labels.each(function(){
							var label=$(this),
								inp=$(_.targets,this),
								defVal=inp.val(),
								trueVal=(function(){
											var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
											return defVal==''?defVal:tmp
										})()
							trueVal!=defVal
								&&inp.val(defVal=trueVal||defVal)
							label.data({defVal:defVal})								
							inp
								.bind('focus',function(){
									inp.val()==defVal
										&&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
								})
								.bind('blur',function(){
									_.validateFu(label)
									if(_.isEmpty(label))
										inp.val(defVal)
										,_.hideErrorFu(label.removeClass(_.invalidCl))											
								})
								.bind('keyup',function(){
									label.hasClass(_.invalidCl)
										&&_.validateFu(label)
								})
							label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
						})
						_.success=$('.'+_.successCl,_.form).hide()
					},
					isRequired:function(el){							
						return !el.hasClass(_.notRequiredCl)
					},
					isValid:function(el){							
						var ret=true
						$.each(_.rx,function(k,d){
							if(el.is(k))
								ret=d.rx.test(el.find(d.target).val())										
						})
						return ret							
					},
					isEmpty:function(el){
						var tmp
						return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
					},
					validateFu:function(el){							
						el.each(function(){
							var th=$(this)
								,req=_.isRequired(th)
								,empty=_.isEmpty(th)
								,valid=_.isValid(th)								
							
							if(empty&&req)
								_.showEmptyFu(th.addClass(_.invalidCl))
							else
								_.hideEmptyFu(th.removeClass(_.invalidCl))
							
							if(!empty)
								if(valid)
									_.hideErrorFu(th.removeClass(_.invalidCl))
								else
									_.showErrorFu(th.addClass(_.invalidCl))								
						})
					},
					getValFromLabel:function(label){
						var val=$('input,textarea',label).val()
							,defVal=label.data('defVal')								
						return label.length?val==defVal?'nope':val:'nope'
					}
					,submitFu:function(){
						_.validateFu(_.labels)							
						if(!_.form.has('.'+_.invalidCl).length)
							$.ajax({
								type: "POST",
								url:_.mailHandlerURL,
								data:{
									vorname:_.getValFromLabel($('.vorname',_.form)),
									name:_.getValFromLabel($('.name',_.form)),
									strasse:_.getValFromLabel($('.strasse',_.form)),
									ort:_.getValFromLabel($('.ort',_.form)),
									email:_.getValFromLabel($('.email',_.form)),
									phone:_.getValFromLabel($('.phone',_.form)),
									geburtsdatum:_.getValFromLabel($('.geburtsdatum',_.form)),
									eintrittstermin:_.getValFromLabel($('.eintrittstermin',_.form)),
									termin:_.getValFromLabel($('.termin',_.form)),
									stelle:_.getValFromLabel($('.stelle',_.form)),
									fax:_.getValFromLabel($('.fax',_.form)),
									state:_.getValFromLabel($('.state',_.form)),
									message:_.getValFromLabel($('.message',_.form)),
									owner_email:_.ownerEmail,
									stripHTML:_.stripHTML
								},
								success: function(){
									_.showFu()
								}
							})			
					},
					showFu:function(){
						_.success.slideDown(function(){
							setTimeout(function(){
								_.success.slideUp()
								_.form.trigger('reset')
							},_.successShow)
						})
					},
					controlsFu:function(){
						$(_.controls,_.form).each(function(){
							var th=$(this)
							th
								.bind('click',function(){
									_.form.trigger(th.data('type'))
									return false
								})
						})
					},
					showErrorFu:function(label){
						label.find('.'+_.errorCl).slideDown()
					},
					hideErrorFu:function(label){
						label.find('.'+_.errorCl).slideUp()
					},
					showEmptyFu:function(label){
						label.find('.'+_.emptyCl).slideDown()
						_.hideErrorFu(label)
					},
					hideEmptyFu:function(label){
						label.find('.'+_.emptyCl).slideUp()
					},
					init:function(){
						_.form=_.me						
						_.labels=$('label',_.form)

						_.preFu()
						
						_.controlsFu()
														
						_.form
							.bind('submit',function(){
								if(_.validate)
									_.submitFu()
								else
									_.form[0].submit()
								return false
							})
							.bind('reset',function(){
								_.labels.removeClass(_.invalidCl)									
								_.labels.each(function(){
									var th=$(this)
									_.hideErrorFu(th)
									_.hideEmptyFu(th)
								})
							})
						_.form.trigger('reset')
					}
				}
			_.me||_.init(_.me=th.data({forms:_}))
			typeof o=='object'
				&&$.extend(_,o)
		})
	}
})(jQuery)
$(window).load(function(){
	$('#form1').forms({
		//ownerEmail:'test@test.de'

	}),
	$('#form2').forms({
		//ownerEmail:'#'

	})
})
Jetzt gibt es ja innerhalb des JS die Funktion submitFu:function() welche den Datenfeed für die Übergabe an mein PHP-Script macht. Hier habe ich folgendes versucht mit einzubauen:
HTML: 
test:_.getValFromLabel($('.test',_.form)),
damit bekomme ich aber eine leere Variable "test" übergeben. Außerdem habe ich folgendes versucht:
HTML: 
test[]:_.getValFromLabel($('.test[]',_.form)),
Damit geht dann gleich garnichts mehr. Dann ist mir aufgefallen, dass es ja Hidden-Fields sind und keine Label. Jetzt war der nächste versuch.
HTML: 
test:_.document.getElementsByName($('.test[]',_.form)),
Auch das schlug fehl - hier hat mir Firebug dann den folgenden Hinweis gegeben:
TypeError: _.document is undefined

Hat jemand eine Idee wie ich das lösen könnte?
Vielen Dank für euere Hilfe im voraus!
 
Zuletzt bearbeitet:
jQuery hat eigene Methoden um Formulardaten zu sammeln, hier würde sich serializeArray anbieten.
Code: 
test:$('input[name="test[]"]',_.form).serializeArray()

Beachte daß die Datenstruktur etwas anders ist als wenn du das Formular normal sendest.

Normaler Submit:
Code: 
test[0]=meine_datei.pdf
test[1]=noch_eine_datei.pdf

Die vorgeschlagene Variante erzeugt hingegen jenes:
Code: 
test[0][name]=test[]
test[0][value]=meine_datei.pdf
test[1][name]=test[]
test[1][value]=noch_eine_datei.pdf

Es sollte aber trotzdem problemlos mit PHP zu verarbeiten sein.

Brauchst du aber unbedingt die Daten in der Form, wie sie normal gesendet würden, geht das auch:

Code: 
data:$.param({/*hier deine objekt-member*/})+'&'+$('input[name="test[]"]',_.form).serialize()
 
Zuletzt bearbeitet:
Servus abuzze,

vielen Dank für deine Info - an diese Syntax muss ich mich erst noch gewöhnen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück