Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

James Ingmire
James Ingmire
11,901 Points
Posted by James Ingmire
James Ingmire
11,901 Points

How to show the submit button once user has entered his/her name and email. PHP or Javascript?

Hi, I wish to show the submit button, in this case an arrow image, however only when both input text fields are filled in.

Something like this http://jsfiddle.net/m9R89/1/ however this only works once the user has clicked away from the box not while they are typing in the box.

Was wondering is there a simpler php solution as makes sence to use php as already using it in the same file. 

if ($name == " ANY VALUE " OR $email == " ANY VALUE ") {
        SHOW DIV;
        exit;
    }

Any help would be much appreciated as not up this stage in my learning just yet, thanks.

2 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi James,

There may be many ways of accomplishing this, but I would use jQuery to detect each keyup event - and on each event, check if the length of the value from all desired input fields > 0, then display the submit button - by un-hiding it. Here is a CodePen showing what I'm trying to describe.

Hope this helps,

Cheers

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Genius, thanks a lot matey :)

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

What do I need to put in the head tag please sir. i have put the js code in the head as such:

<script type="text/javascript" src="slide/js/forms.js"></script>

but not yet working, do i need to load a jquery page inside the head to enable it to work, thank you very much!

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Feel free to fork / modify my pen to suit your needs. I updated it to work with the names you chose for id and class.

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Sory just edited my post, worked it out, sorry for pestering you. please can you see my new comment. lol. thank you v.much.

Also do i need to link the js code to my style sheet, how does the js code know how to target the css file.

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Ok, sorry sorry a new comment: I have added 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

to head, however it breaks my layout as iam using other js code. Can you please help. This is my head without the script above.

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=1024">
    <title><?php echo $pageTitle; ?></title>
    <link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/>
    <!--STYLESHEETS -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" />
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <link rel="stylesheet" href="css/slide.css" type="text/css" />
    <!-- END: STYLESHEETS -->
    <!-- MEDIA QUERIES -->
    <link rel="stylesheet" type="text/css" href="css/ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />
    <link rel="stylesheet" type="text/css" href="css/iphone.css" media="only screen and (max-device-width: 480px)" />
    <!-- END: MEDIA QUERIES -->
    <!-- JAVASCRIPT -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="slide/js/jquery.js"></script>
    <script type="text/javascript" src="slide/js/jquery.cycle.all.min.js"></script>
    <script type="text/javascript" src="slide/js/scripts.js"></script>
    <script type="text/javascript" src="https://filemasbayu.googlecode.com/files/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript" src="js/myWidgetlarge.js"></script>

    <script type="text/javascript" src="slide/js/forms.js"></script>

    <!-- END: JAVASCRIPT -->
</head>
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Sorry James, I don't know. Looking at the HTML, nothing stands out as being a problem - with minor exception that you're already including jQuery at the top of the JS section. I don't know what, if any, side effects will result from including jQuery twice.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Robert you are a true legend thanks you very much, I worked it out, just the order of scripts needed changing. The deadline is tomorrow for this work so much appreciated, you have given me at least a few hours more sleep: This is the new arrangement incase anyone wonders.

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=1024">
    <title><?php echo $pageTitle; ?></title>
    <link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/>
    <!--STYLESHEETS -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" />
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <link rel="stylesheet" href="css/slide.css" type="text/css" />
    <!-- END: STYLESHEETS -->
    <!-- MEDIA QUERIES -->
    <link rel="stylesheet" type="text/css" href="css/ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />
    <link rel="stylesheet" type="text/css" href="css/iphone.css" media="only screen and (max-device-width: 480px)" />
    <!-- END: MEDIA QUERIES -->
    <!-- JAVASCRIPT -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="slide/js/jquery.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="slide/js/jquery.cycle.all.min.js"></script>
    <script type="text/javascript" src="slide/js/scripts.js"></script>
    <script type="text/javascript" src="https://filemasbayu.googlecode.com/files/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript" src="js/myWidgetlarge.js"></script>
    <script type="text/javascript" src="slide/js/forms.js"></script>
    <!-- END: JAVASCRIPT -->
</head>