PHP,Javascript, select and alert

Question

Hello I am new to Javascript and currently trying to update another developers code. I have a very simple 4 question for with a mix of checkboxes and text fields.

My first piece of Javascript works: it says if there is no info typed in postsitesurvey then alert that it must be filled out. The next step I am stuck on. The employee has 2 visible options and 1 hidden. Were parts left over? I want it that if he checks yes then the next field which is the Left with field must be filled out and if not yes then he can go ahead and submit the form. Any help would be appreciated.

echo "<form id=\"myForm\" name=\"myForm\" method=\"post\" action=\"edit.php?
action=upbill2\" onsubmit=\"return validateForm()\">";
echo "<table width=\"100%\" border=\"0\" cellspacing=\"5\" cellpadding=\"0\" 
class=\"table2\">";

echo "<div class=\"col-sm-6\">";
echo "<b>Post Site Survey</b>";
Echo "&nbsp&nbsp&nbsp";
echo "<textarea style=\"width:70%\" name=\"postsitesurvey\" 
id=\"postsitesurvey\" value=\"$postsitesurvey\" />";
echo $postsitesurvey;
echo "</textarea>";
echo "</div>";

echo "<div class=\"col-sm-6\">";

echo "<b>Was There Equipment Left Over?</b>";
Echo "&nbsp&nbsp&nbsp";
echo "<input name=\"eq_left\" type=\"checkbox\" id=\"eq_left_yes\" 
value=\"1\"";
if ($eq_left == "1") { echo " checked=\"checked\" "; }
echo "/> &nbsp&nbsp&nbspYes ";

Echo "&nbsp&nbsp&nbsp";

echo "<input name=\"eq_left\" type=\"checkbox\" id=\"eq_left_no\" 
value=\"2\"";
if ($eq_left == "2") { echo " checked=\"checked\" "; }
echo "/> &nbsp&nbsp&nbspNo ";
echo "</div>";

echo "<input name=\"eq_left\" type=\"checkbox\" id=\"eq_left_empty\" 
value=\"\" style=\"display:none;\" checked";
if ($eq_left == "") { echo " checked=\"checked\" "; }
echo "</div>";

echo "<div class=\"col-sm-6\">";
echo "<b>Left with?</b>";
Echo "&nbsp&nbsp&nbsp";

echo "<input style=\"width:45%\" name=\"eq_poc_\" type=\"text\" 
id=\"eq_poc\" value=\"$eq_poc\" placeholder=\"Name of customer\"";

echo "</div>";
echo "&nbsp&nbsp&nbsp or";
Echo "&nbsp&nbsp&nbsp";
echo "<input name=\"eq_poc\" type=\"checkbox\" id=\"chkNo\" value=\"MCS\"";
if ($eq_poc == "MCS") { echo " checked=\"checked\" "; }
echo "/> &nbsp&nbsp&nbspMCS";

echo "</div>";

echo "<br>";

echo "<div class=\"col-sm-12 text-center\">";
echo "<input name=\"st_id\" type=\"hidden\" id=\"st_id\" value=\"3\" />";
echo "<input name=\"job_id\" type=\"hidden\" id=\"job_id\" value=\"$job_id\" />";
echo "<input type=\"submit\" name=\"Submit\" value=\"Submit\" class=\"btn btn-primary\"/>";
echo "</div>";
echo "</table>";
echo "</form>";
}

----JAVASCRIPT----

function validateForm() {
var x = document.forms["myForm"]["postsitesurvey"].value;
if (x == "") {
    alert("Post site survey must be filled out");
    return false;
}

PHP echoes by default. Having this many echo statements in your code, especially with having to backslash all your quotes, is making your life way more difficult than it has to be. — tadman
– tadman, Commented Aug 4, 2017 at 20:05
@kojow7 Until you open a <?php tag it's just text that gets displayed. A file with test in it will echo just that when run with php test.php — tadman
– tadman, Commented Aug 6, 2017 at 1:40
@tadman It perhaps is just semantics, but anything outside of <?php and ?> tags is not considered PHP. Anything inside of those tags is considered PHP code and is not echoed by default. — kojow7
– kojow7, Commented Aug 6, 2017 at 4:42
@kojow7 It's been convention since forever to drop your PHP mode and go back to echo mode when including large blocks of largely raw HTML. The default mode, whatever it's called, is to echo content. — tadman
– tadman, Commented Aug 7, 2017 at 0:12

Benni · Accepted Answer · 2017-08-04 23:07:42Z

I removed the distracting stuff, you can copypaste to your question, I will then delete this post...

<?php
    $checked_1 = ($eq_left == "1")   ? 'checked="checked"' : '';
    $checked_2 = ($eq_left == "2")   ? 'checked="checked"' : '';
    $checked_3 = ($eq_left == "")    ? 'checked="checked"' : '';
    $checked_4 = ($eq_poc  == "MCS") ? 'checked="checked"' : '';
?>


<form id="myForm" name="myForm" method="post" action="edit.php?action=upbill2" onsubmit="return validateForm()">

    <b>Post Site Survey</b>
    <textarea name="postsitesurvey" id="postsitesurvey" value="$postsitesurvey" />
        <?=$postsitesurvey?>
    </textarea>

    <b>Was There Equipment Left Over?</b>
    <input name="eq_left" type="checkbox" id="eq_left_yes" value="1" <?=$checked_1?>/>
    <input name="eq_left" type="checkbox" id="eq_left_no" value="2" <?=$checked_2?>/>
    <input name="eq_left" type="checkbox" id="eq_left_empty" value="" style="display:none;" <?=$checked_3?>/>

    <b>Left with?</b>
    <input name="eq_poc_" type="text" id="eq_poc" value="$eq_poc" placeholder="Name of customer"/>
    <b>or</b>
    <input name="eq_poc" type="checkbox" id="chkNo" value="MCS" <?=$checked_4?>/><b>MCS</b>

    <input name="st_id" type="hidden" id="st_id" value="3" />
    <input name="job_id" type="hidden" id="job_id" value="<?=$job_id?>" />
    <input type="submit" name="Submit" value="Submit" class="btn btn-primary"/>
</form>

kojow7 · Accepted Answer · 2017-08-05 18:03:41Z

I think something like this would work for you. I changed your checkboxes to radio buttons and removed the eq_left = "". You also had two fields with the name "eq_poc". You cannot do this. I removed one, but you may want to consider a different option or explain what you are trying to do a bit better.

I have also added a toggleHide() function to show or hide the customer name field.

Alert messages can be annoying, so I removed them and added a <div> to put error messages on the page in red color.

One other thing to note is that I added the required attribute to your textarea. This allows the browser to inform the user that they haven't filled in a required field. Doing it this way, however, will not show the error message on the page in red. So, depending how you want to implement it, you may want to remove the required attribute.

The following code below will work by itself, once you are happy with it, remove the two lines at the top that are for testing and see if it works with variables passed from your other code.

<?php

        //The two lines below are for testing purposes only. Once you are done testing, you can remove them to implement it with the rest of your code.
        $eq_left = "1";
        $eq_poc = "";

    $checked_yes = ($eq_left == "1")   ? 'checked="checked"' : '';
    $checked_no = ($eq_left == "2")   ? 'checked="checked"' : '';
?>
<html>
<script>

function toggleHide() {
        var equipment_left = document.getElementById('eq_left_yes').checked;

        if (equipment_left){
            document.getElementById('leftwith').style.display = 'block';
        }
        else {
            document.getElementById('leftwith').style.display = 'none';
        }

}

function validateForm() {
        var message = "";
        var postsitesurvey = document.getElementById('postsitesurvey').value;
        if (postsitesurvey == "") {
            message = "Post site survey must be filled out";
        }
        else if (equipment_left && eq_poc == ""){
            var equipment_left = document.getElementById('eq_left_yes').checked;
            var eq_poc = document.getElementById('eq_poc').value;
            message = "Customer name must be filled in";
        }

        if (message != ""){
            document.getElementById('message').textContent = message;
            return false;
        }


        return true;
}
</script>
<style>
.formfield {
        font-weight: bold;
}
#leftwith {
        display: none;
}
#message {
        color: red;
}
</style>
</body>
<form id="myForm" name="myForm" method="post" action="edit.php?action=upbill2" onsubmit="return validateForm()">

<div class="formfield">Post Site Survey</div>
<textarea name="postsitesurvey" id="postsitesurvey" value="$postsitesurvey" required="required"  /><?php echo $postsitesurvey ?></textarea>

<div class="formfield">Was There Equipment Left Over?
        <input name="eq_left" type="radio" id="eq_left_yes" value="1" onclick="toggleHide()" <?php echo $checked_yes ?> /> Yes
        <input name="eq_left" type="radio" id="eq_left_no" value="2" onclick="toggleHide()" <?php echo $checked_no ?> /> No
</div>

<div class="formfield" id="leftwith">
Left with?
<input name="eq_poc_" type="text" id="eq_poc" value="<?php echo $eq_poc ?>" placeholder="Name of customer"/>
</div>
<input name="st_id" type="hidden" id="st_id" value="3" />
<input name="job_id" type="hidden" id="job_id" value="<?php echo $job_id ?>" />
<div id="message"></div>
<input type="submit" name="Submit" value="Submit" class="btn btn-primary"/>
</form>
<script>
        toggleHide();
</script>
</body>
</html>

Collectives™ on Stack Overflow

PHP,Javascript, select and alert

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related