Send selected field to mail

i trying to creating html form where field is displayed on select option value

<form id="myForm">
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" name="firstName"><br><br>

        <label for="phoneNumber">Phone Number:</label>
        <input type="tel" id="phoneNumber" name="phoneNumber"><br><br>

        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email"><br><br>

        <label for="selectOption">Select Option:</label>
        <select id="selectOption" name="selectOption">
            <option value="">select for ruin</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select><br><br>

        <div id="conditionalFields">
            <div id="universityField" style="display: none;">
                <label for="university">University:</label>
                <input type="text" id="university" name="university"><br><br>
            </div>

            <div id="textareaField" style="display: none;">
                <label for="textarea">Textarea:</label>
                <textarea id="textarea" name="textarea"></textarea><br><br>
            </div>

            <div id="selectField" style="display: none;">
                <label for="selectOption2">Select Option 2:</label>
                <select id="selectOption2" name="selectOption2">
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                    <option value="E">E</option>
                </select><br><br>
            </div>

            <div id="callField" style="display: none;">
                <label for="callme">callme:</label>
                <input type="text" id="callme" name="callme"><br><br>
            </div>

            <div id="addressField" style="display: none;">
                <label for="address">Address:</label>
                <input type="text" id="address" name="address"><br><br>
            </div>

            <div id="selectOption3Field" style="display: none;">
                <label for="selectOption3">Select Option 3:</label>
                <select id="selectOption3" name="selectOption3">
                    <option value="A1">A1</option>
                    <option value="B1">B1</option>
                    <option value="C1">C1</option>
                </select><br><br>
            </div>

            <div id="callmeField" style="display: none;">
                    <label for="callme">Call Me:</label>
                    <input type="text" id="callme" name="callme"><br><br>
                </div>
        </div>

        <input type="submit" value="Submit">
    </form>

When select with id = “selectOption” option value = “1” is selected Field with id =“universityField” is shown, option value = “2” is selected Field with id=“textareaField” is shown, option value = “3” selected Field with id=“selectOption2” is shown.

I was wondering how could i send only the activate field in mail, let say when option value = “1” is selected i want to send id=“universityField” field value, if option value = “2” is selected i want to send id=“textareaField” field value only

I use follwing code to send mail to client:

$name = $university = $phone;
     
        if (isset($_POST['submit'])) {
            $fm_name = $_POST['firstName'];
            $fm_university = $_POST['university'];
            $fm_phoneNumber = $_POST['phoneNumber'];
           
            $name = quote_input($fm_name);
            $university = quote_input($fm_university);
            $phone = quote_input($fm_phoneNumber);
          

            if (empty($fm_name)) {
                $quoteErr = "Name is Required.";
            }

            elseif (empty($fm_university)) {
                $quoteErr = "university is Required.";
            }
            
            elseif (empty($fm_phoneNumber)) {
                $quoteErr = "Phone No. is Required.";
            }
            
            else{
                $headers = 'From: <owner mail >' . "\r\n";
                $headers .= "Name : " . $name . "\r\n";
                $headers .= "university : ". $university . "\r\n";
                $headers .= "Phone : ". $phone . "\r\n";
                $mailto = "sendmemail@gmail.com";
                $sub = "Get in touch with us";
                mail($mailto,$sub,$headers);
                $quotesuccess = "Your message has been sent! We will contact you shortly.";
                
                echo $headers;
            }
        }

            function quote_input($data) {
                $data = trim($data);
                $data = stripslashes($data);
                $data = htmlspecialchars($data);
                return $data;
            }

so i want to send mail with above code with activate field only, how can i do that

1 Like

so… if the posted selectOption is 1…

You add that field to your mail body.

Which part are you having trouble with?

You can call a javascript function using onchange where the function would then control the show/hide of your different form sections. For example I will call the function optionAction and it would be applied to your select input like this. Note I changed your displayed option names in this example to match the actions.

<label for="selectOption">Select Option:</label>
<select id="selectOption" name="selectOption" onchange="optionAction(this)">
    <option value="">select for ruin</option>
    <option value="1">University</option>
    <option value="2">Text Message</option>
    <option value="3">Select Option 2</option>
    <option value="4">callme</option>
    <option value="5">Address</option>
    <option value="6">Select Option 3</option>
</select>

At the bottom of the page you would write some JS starting with the function name.

<script>		
function optionAction(x) {

}
</script>

Inside this you will be able to get the value that was sent by the function call using x.value, so if you were to add an alert() tag with this inside i.e. alert(x.value); you would see a popup each time you select a different option.

Now in JS you can write IF conditions much like you would in php, so you could write.

if (x.value == 1) {
//do something
}

In this case you want to do a show/hide so if the value does not match the defined value, we would hide the section so we would use } else { so the logic looks like this.

if (x.value == 1) {
	//show
} else {
	//hide 
}

Now its a matter of having JS change the CSS attribute on the sections you’ve defined by their IDs. You said universityField would be the first option (1) so you can identify that in JS like so.

document.getElementById("universityField")

… and define the css with .style.display = "block"; OR .style.display = "none".

if (x.value == 1) {
  document.getElementById("universityField").style.display = "block";
} else {
  document.getElementById("universityField").style.display = "none";
}

Do this with the rest of your sections.

As far as processing the the form, you should define the method the data is to be sent to your <form tag.

<form id="myForm" method="post">

and you should add a name other than submit to your submit button to identify the specific form action of this button and in turn processing code to handle it. I will call it submitform.

<input type="submit" name="submitform" value="Submit">

The processing section would then be wrapped in an IF looking for this name.

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submitform'])) {

I wouldn’t create variables for each of your post values but you certainly can run $_POST through your function to trim values up and redefine them to the same keys.

foreach($_POST as $field => $value):
	$_POST[$field] = quote_input($value);		 
endforeach;

You can then write IF conditions for each of the “shown” required inputs i.e. name, phone, email and option. Note: university is not required if it is a show/hide section.

I would NOT use } else { statements. As you have defined the variable $quoteErr to each error message, the message will be over written by the next SO I would define them in reverse order so they will match your form order, so if nothing is entered NAME would show.

if(empty($_POST['selectOption'])){	
	$quoteErr = "Select Option is Required.";
}	 

if (empty($_POST['email'])) {
	$quoteErr = "Email is Required.";
}

if (empty($_POST['phoneNumber'])) {
	$quoteErr = "Phone No. is Required.";
}

if (empty($_POST['firstName'])) {
	$quoteErr = "Name is Required.";
}

You can also do individual checks based on the selected option. For example

	if($_POST['selectOption'] == 1 && empty($_POST['university'])){	
		$quoteErr = "University is Required.";
	}

Then the email section of processing would be wrapped in a single condition saying if empty error continue, like so

if(empty($quoteErr)){
//email section
}

Within this I would compose the message starting with known text and required inputs. Something like.

$msg = 'The following message was sent by '.$_POST['firstName'].' through our contact form.'. "\r\n\r\n";
$msg .= 'Name : ' . $_POST['firstName'] . "\r\n";
$msg .= 'Phone : ' . $_POST['phoneNumber'] . "\r\n";
$msg .= 'Email : ' . $_POST['email'] . "\r\n";

Then you could add other fields based on the selected option.

if($_POST['selectOption'] == 1){				 											
	$msg .= 'University : ' . $_POST['university'] . "\r\n";
}
if($_POST['selectOption'] == 2){				 											
	$msg .= 'Text Message : ' . "\r\n" . $_POST['textarea'] . "\r\n";
}
if($_POST['selectOption'] == 3){				 											
	$msg .= 'Select Option 2 : ' . $_POST['selectOption2'] . "\r\n";
}
if($_POST['selectOption'] == 4){				 											
	$msg .= 'Call Me : ' . $_POST['callme'] . "\r\n";
} 
if($_POST['selectOption'] == 5){				 											
	$msg .= 'Address : ' . $_POST['address'] . "\r\n";
}
if($_POST['selectOption'] == 6){				 											
	$msg .= 'Select Option 3 : ' . $_POST['selectOption3'] . "\r\n";
}

Then double check that you are using appropriate headers and apply the $msg to the mail() call.

mail($mailto,$sub,$msg,$headers);

You may find that this show/hide is not exactly what you want like the “Call Me” option might be shown all the time and use a checkbox to communicate that you would like to be called. Anyway, hope this helps.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.