span class after submit

[timmah1]

We have a form

<div class="element">
<div class="option-container">
<span class="title  " style="color:#26ADE4;font-family:Arial;font-size:2.2em;font-weight:bold;">Contact us</span></div>
</div>
<div class="element">
<div class="option-container"><div class="paragraph  " name="element[]" id="element[]" style="color:#000000;font-family:Verdana;font-size:0.8em;font-weight:normal;width:300px;">To contact us, use the form below.<br>We will get back to you as soon as possible.</div></div>
</div>
<div class="element">
<label id="label-element-7" class="label" style="color:#4DBCE9;font-family:Trebuchet MS;font-size:1.2em;font-weight:normal;">
<span class="labelelementvalue">Email</span>
<span class="required">*</span></label>
<div class="errormessage" id="errormessage-element-7"></div>
<div class="option-container">	<input class="af-inputtext af-email af-formvalue  " type="text" name="element[]" id="element[]" value="" style="color:#000000;font-family:Verdana;font-size:0.8em;font-weight:normal;width:260px;border-style:solid; border-color:#dcdcdc;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border-width:1px;padding:5px;"></div>
</div>
<div class="element">
<label id="label-element-8" class="label" style="color:#4DBCE9;font-family:Trebuchet MS;font-size:1.2em;font-weight:normal;">
<span class="labelelementvalue">Textarea</span></label>
<div class="errormessage" id="errormessage-element-8"></div>
<div class="option-container">
<textarea class="af-textarea af-formvalue  " name="element[]" id="element[]" style="color:#000000;font-family:Verdana;font-size:0.8em;font-weight:normal;width:300px;border-style:solid; border-color:#dcdcdc;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border-width:1px;padding:5px;" rows="6"></textarea></div></div>

 

Now, when this is submitted, our script grabs the values and sends the values through an email

 

What we need to do, is grab every value that is in the <span class>

 

This form is built dynamically, and then pulled from the database, so each <span class> value will be different.

 

Each span class will have the name "labelelementvalue".

 

What I need to accomplish is that when the form is submitted, how do I go about grabbing everything that is between

<span class="labelelementvalue"></span>

and displaying it?

 

I know this has to deal with javascript and php, so I'm not sure where to post this.

 

Thanks in advance

[smerny]

why not use an actual form?

[Jessica]

I have the same question as smerny. I know how you would do this but only using jQuery, so unless you want to use that I can't help, just curious why?

[timmah1]

This is an actual form

 

echo "<form id=\"myForm\" action=\"\" method=\"post\" data-ajax=\"false\">";
echo "<input type=\"hidden\" name=\"formid\" value=\"$formid\">";
echo stripslashes(html_entity_decode($formget->sources));
echo "<input type=\"submit\" value=\"Submit Form\" name=\"submitButton\" />";
echo "</form>";

 

These are custom built forms, that any of our customers can build themselves, then input into a database. Then when they are pulled out of the db, if puts whatever labels they created, and now I just need to be able to get the span class name once it's submitted

[timmah1]

Here's what the send function is if that helps

$query = "SELECT recipients,formname FROM appforms WHERE id='$formid'"; 
                                            $result = mysql_query($query); 
                                            if($result == false) 
                                            { 
                                               user_error("Query failed: " . mysql_error() . "<br />\n$query"); 
                                            }
                                            $row = mysql_fetch_assoc($result);    
                                            $recpt = $row['recipients'];
                                            $formn = $row['formname'];  
                                            $surname = 'Mobile App Form'; 
                                            $email = 'noreply@lfa.co'; 
                                        
                                        	$header = "From: ". $surname ."  <" . $email . ">"; 
                                        
                                        	$ip = $_SERVER['REMOTE_ADDR'];
                                        	$httpref = $_SERVER['HTTP_REFERER'];
                                        	$httpagent = $_SERVER['HTTP_USER_AGENT'];
                                        	$today = date("F j, Y, g:i a");    
                                        
                                        	$recipient = $recpt;
                                        	$subject = $formn;
                                        	
                                            for($i=0; $i < count($_POST['element']); $i++){
                                              $vars = ($_POST['element'][$i] . "\r\n ");
                                              $mailbody .=  $vars;
                                            }

[Jessica]

This is the same problem you were on before, right?

 

How does the information get into the <span> in the first place?

[timmah1]

The information gets put into the span class when they make the form.

 

So if they put a text field for email, Email will be put into the span class

Same  thing if they put a textarea and label it Comments, comments will be in the span class

 

This can be done with jquery, or with anything that will pull the info out.

 

I really appreciate any help you can give me

[Jessica]

So when they label it, you are saving that label somewhere. You would just retrieve it from your storage.

 

If you're saving their custom form as one big element, you should be breaking it up into each individual element and saving it in your database in a relational manner.

[timmah1]

The form is saved like this in the database

<div class="element">
<div class="option-container">
<span class="title  " style="color:#26ADE4;font-family:Arial;font-size:2.2em;font-weight:bold;">Contact us</span></div>
</div>


<div class="element">
<div class="option-container"><div class="paragraph  " name="element[]" id="element[]" style="color:#000000;font-family:Verdana;font-size:0.8em;font-weight:normal;width:300px;">To contact us, use the form below.<br>We will get back to you as soon as possible.</div></div>
</div>


<div class="element">

<label id="label-element-3" class="label" style="color:#4DBCE9;font-family:Trebuchet MS;font-size:1.2em;font-weight:normal;">
<span class="labelelementvalue">Email</span>
<span class="required">*</span></label>

<div class="errormessage" id="errormessage-element-3"></div>

<div class="option-container">
<input class="af-inputtext af-email af-formvalue  " type="text" name="element[]" id="element[]" value="" style="color:#000000;font-family:Verdana;font-size:0.8em;font-weight:normal;width:260px;border-style:solid; border-color:#dcdcdc;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border-width:1px;padding:5px;"></div>
</div>


<div class="element">

<label id="label-element-4" class="label" style="color:#4DBCE9;font-family:Trebuchet MS;font-size:1.2em;font-weight:normal;">
<span class="labelelementvalue">Textarea</span></label>

<div class="errormessage" id="errormessage-element-4"></div>

<div class="option-container">
<textarea class="af-textarea af-formvalue  " name="element[]" id="element[]" style="color:#000000;font-family:Verdana;font-size:0.8em;font-weight:normal;width:300px;border-style:solid; border-color:#dcdcdc;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border-width:1px;padding:5px;" rows="6"></textarea></div></div>

 

We did not build the way this works, just trying to modify it. Everything works the way we need it to except that part with the span class

[Jessica]

in jQuery it would be $(".labelelementvalue").innerHTML(); Look up the jQuery docs if you need help getting started using jQuery.

[AyKay47]

in jQuery it would be $(".labelelementvalue").innerHTML(); Look up the jQuery docs if you need help getting started using jQuery.

 

1. there are multiple elements that need to be grabbed, your method will only grab the last element.

 

$(".labelelementvalue").each(function(i,e) {

    alert(i + ': ' $(this).text()); // or $(this).html()

});

 

is what you want (above is pseudo code)

 

2. .innerHTML() is not a jquery function, use either .text() of .html();

[Jessica]

Man I need coffee.

[timmah1]

Thank you AyKay47.

 

To be honest, I have no idea how to use that.

How would I know what it's grabbing?

Can you echo out what it grabbed?

 

I know I sound like a moron, but I haven't the first clue with jQuery

[AyKay47]

Thank you AyKay47.

 

To be honest, I have no idea how to use that.

How would I know what it's grabbing?

Can you echo out what it grabbed?

 

I know I sound like a moron, but I haven't the first clue with jQuery

 

the code I provided will alert the grabbed text for each span.

[timmah1]

the code I provided will alert the grabbed text for each span.

 

I understand that, but how would I incorporate that into this

for($i=0; $i < count($_POST['element']); $i++){
      $vars = ($_POST['element'][$i] . "<br> ");
      $mailbody .=  $vars;
//jQuery results here//
      echo $mailbody;
    }

 

Isn't an alert mean it's like a popup and shows me what it has?

 

Like I said, I have no idea how jQuery works, and I'm reading up on the docs, and I'm still lost.

[AyKay47]

I came into this thread late, so I can't say that I know exactly what you are trying to do.

But you don't want to intermingle php and js like that, if you want to grab certain values from the DOM, use DOM

[Jessica]

Alternatively, you could use a regex on the entire form. That would work in PHP and may be the solution.