So I have a form with two fields, one of these fields needs to have information in to successfully display the next page. How would I disable the submit button until that field has some text in it?
Here's the HTML Code;
<div id="content">
<form action="avatarquery.php" method="POST" id="login-form">
<fieldset>
<p>
<label for="login-username">Server Name:</label>
<input type="text" id="login-username" name="name" class="round full-width-input" autofocus />
</p>
<p>
<label for="login-password">Server IP:</label>
<input type="text" id="login-password" name="ip" class="round full-width-input" />
</p>
<input class="button round blue image-right ic-right-arrow" type="submit" id="register" />
</fieldset>
<br/><div class="information-box round">Please Note: Some servers may not work due to their Configs not having Query Enabled.</div>
</form>
If that has to be done using HTML, then in HTML5, you can use
<input type="text" required />
Otherwise in JavaScript, you can try setting an attribute to the input button.
Until the value is "", you can set the attribute
<input type="submit" disabled />
Related
I'm trying to remove the message box and I want to move the e-mail box to the right of the name, so that it all fits into the top bar.
I have tried removing the message box through the html code, but when I do, I get errors and it doesn't function properly.
I assume I have to remove something in the PHP because it's obviously not able to find the missing html code, but as I don't understand PHP I don't know what to remove.
this is the html code for the subscribe button
<div class="subscribe">
<div class="containerContact">
<div id="contactFormContainer">
<div id="contactForm">
<div class="loader"></div>
<div class="bar"></div>
<form action="mail.php" class="contactForm" name="cform" method="post">
<div class="input_boxes">
<p><label for="name">Name</label><span class="name-missing">Please enter your name</span><br />
<input id="name" type="text" value="" name="name" />
</p>
<p>
<label for="e-mail">E-mail</label><span class="email-missing">Please enter a valid e-mail</span><br />
<input id="e-mail" type="text" value="" name="email" />
</p>
<p><label for="message">Message</label><span class="message-missing">Say something!</span><br />
<textarea id="message" rows="" cols="" name="message"></textarea>
</p>
</div>
<input class="submit" type="submit" name="submit" value="Submit Form" onfocus="this.blur()" />
</form>
</div>
<div class="contact"></div>
</div>
</div>
<!-- this is the overlay which hides the rest of the website when the Subscribe button is pressed. -->
<div id="backgroundPopup"></div>
</div>
I can't post more than one link, so here is a text dump to the PHP and CSS for the subscribe button
any help would be much appreciated!!
I'm new to all this, so any help is appreciated.
I have this form I'm trying to style, but can't seem to figure out what the problem is. I need the CTA button to be next to the input field, without changing the html. What am I missing in my css?
HTML:
<div id="newsletter" class="form-wrap">
<p class="form-field">
<label for="newsletter_email">Please enter your email</label>
<input type="text" name="newsletter_email" id="newsletter_email" value="" placeholder="Enter email address"/>
</p>
<p class="form-submit">
<input type="submit" name="newsletter_submit" id="newsletter_submit" value="Get Early Access"/>
</p>
</div>
I have two textbox and one button in a popupbox.
I want to make button exactly below the two textbox ,
wherein in my code it is not happening. Please help
HTML COde :::
<form method="post" action="index.html">
<p><input type="text" name="login" value="" placeholder="Username or Email"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Logine" class="marginleft5"></p>
<!-- <div class="login-help">
<p>Forgot your password? Click here to reset it.</p>
</div> -->
</form>
Use <div> tags for lines, or otherwise use <br/> to break line
I'm still trying to think up how to re-word this title.
Anyways so I have this contact form on my page here: http://leongaban.com/
When you click in name and fill it out you can then tab to the next field email. After entering in email, it is natural for the user to tab again into the message box.
However for some reason my tab selection jumps all the way up to the top of the page and seems to select my portfolio main nav link. A few more tabs and I'm back down into the message textarea.
This of course is not ideal at all, is there a way I can force the tab selections to go in the correct order? ie: Name > Email > Message > Captcha > Submit
My current form (HTML)
<div class="the-form">
<form id="myForm" action="#" method="post">
<div>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div>
<label for="email">Your Email</label>
<input type="text" name="email" id="email" value="" tabindex="1">
</div>
<div>
<label for="textarea">Message:</label>
</div>
<div>
<textarea cols="40" rows="8" name="message" id="message"></textarea>
</div>
<p><em>Hi, what is 2 + 3?</em></p>
<input type="text" name="captcha" id="captcha" />
<div>
<input class="submit-button" type="submit" value="Submit">
</div>
</form>
</div>
</footer>
You have to number your tabindex in the order you'd like them to go.
<input type="text" name="name" id="name" value="" tabindex="1">
<input type="text" name="email" id="email" value="" tabindex="2">
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea>
<input type="text" name="captcha" id="captcha" tabindex="4"/>
<input class="submit-button" type="submit" value="Submit" tabindex="5">
etc.
Right now you have two tabindexes set to 1, so they will go first, as they are the only ones with a defined tabindex.
Try utilizing the tabindex property for your input fields. This will let you control the order in which the user can tab through your page elements.
Example code for this can be found here, though you are already setting a tabindex on the name and email inputs. Just add that property to the rest of your inputs and set them in the order you would like.
I have this template where I customized whats on it BUT i got stuck on the contact page where the contact form upon clicking the button clear OR send button nothing happens. I really don't know much about most of the stuff ALL are from research through net but can't get to fix this. Am I missing something here?
Questions I have in mind:
1. Do I need to put something or create in "action"
2. What do I have to put in "href" to clear or send the form to my email?
Or you have a better idea.
<h2 class="p0">Contact Form</h2>
<form id="contact-form" action="#" method="post" enctype="multipart/form-data">
<fieldset>
<label><span class="text-form">Name:</span>
<input name="p1" type="text" />
</label>
<label><span class="text-form">Email:</span>
<input name="p2" type="text" />
</label>
<div class="wrapper">
<div class="text-form">Message:</div>
<textarea></textarea>
</div>
<div class="buttons"> <a class="button-2" href="#">Clear</a> <a class="button-2" href="#">Send</a> </div>
</fieldset>
</form>
Use real buttons, don't just give them a class called buttons.
In action, put down the name of the server file that will process this form, for example action="contact_form.php". If you would like to send an email, put down action="MAILTO:someone#example.com".
<h2 class="p0">Contact Form</h2>
<form id="contact-form" action="MAILTO:someone#example.com" method="post" enctype="multipart/form-data">
<fieldset>
<label><span class="text-form">Name:</span>
<input name="name" type="text" />
</label>
<label><span class="text-form">Email:</span>
<input name="email" type="text" />
</label>
<div class="wrapper">
<div class="text-form">Message:</div>
<textarea name="message"></textarea>
</div>
<div class="buttons">
<input type="button" value="Clear" onclick="document.getElementById('contact-form').reset()"
/>
<input type="submit" value="Send" />
</div>
</fieldset>
</form>