Search code examples
javascriptphpjqueryformsform-fields

Passing Form Field Data Only If Data Is Entered In Another Field In Same Form


I have a 'Phone Number' field in my web form.

I also have a 'hidden' form field which contains a unicode phone icon [&#9742].

Entering a phone number is optional for my site visitors.

So... if they chose not to enter a number in the phone number field of the form, I do not want the icon to be shown on the uploadResults.php page.

I only want the icon to appear if they enter data into the phone number field.

I have no idea how to achieve this. But I have included a stripped down version of the form, and the result [php] page in my question.

Any help would be greatly appreciated, as I will need to incorporate this same type of function in a few different areas of my site.

Thanks in advance.

Here is the form page code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>The Form</title>

    <style>

    .container { margin-top:50px; margin-left:40px; }
    .fieldTitle { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; }
    .phoneIcon { margin-bottom:10px; display:none;} /* This field hidden in form */
    .phoneNumber { margin-top:10px; width:200px; height:25px; font-family:Arial, Helvetica, sans-serif; font-size: 12pt; }
    .submitButton { margin-top:30px; font-family:Arial, Helvetica, sans-serif; font-size: 12pt; }

    </style>

    </head>
    <body>

    <form action="uploadResults.php" method="post" enctype="multipart/form-data">

    <div class="container">

    <div class="fieldTitle">Phone Number:</div>

    <div><input class="phoneIcon" name="phoneIcon" id="phoneIcon" value="&#9742;" readonly/></div>

    <div><input class="phoneNumber" name="phoneNumber" id="phoneNumber" autocomplete="off"/></div>

    <div><input class="submitButton" type="submit" name="submit" value="Submit"></button></div>

    </div>

    </form>

    </body>
    </html>

And here is the uploadResults.php page code:

    <?php ob_start(); ?> 

    <!DOCTYPE html>
    <html>
    <head>
    <title>Upload Results</title>

    <style>

    body{margin:0;}
    .numberWrapper {margin: 100px 0px 0px 30px; }
    .phoneIcon {font-size: 20px;}
    .phoneNumber {font-family:Arial, Helvetica, sans-serif; font-size:12pt;}

    </style>

    </head>
    <body>

    <div class="numberWrapper">
    <span class="phoneIcon"><?php $phoneIcon = ($_POST['phoneIcon']); echo  $phoneIcon;?>&nbsp;</span>
    <span class="phoneNumber"><?php $phoneNumber = ($_POST['phoneNumber']); echo  $phoneNumber;?></span>
    </div>


    </body>
    </html>

    <?php echo ''; (ob_get_contents()); ?>

Solution

  • You can check below mentioned solution

    <?php if($_POST['phoneNumber'] != NULL || $_POST['phoneNumber'] != ''): ?>
          <div class="numberWrapper">
        <span class="phoneIcon"><?php $phoneIcon = ($_POST['phoneIcon']); echo  $phoneIcon;?>&nbsp;</span>
        <span class="phoneNumber"><?php $phoneNumber = ($_POST['phoneNumber']); echo  $phoneNumber;?></span>
        </div>
    <?php endif; ?>