I'm creating a register form which requires a 'check if username available' button.
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<div id="availablity">
<input type="text" name="name" value="<?php _e("Username") ?>" style="float: left;"/>
<span id="availability_status" style="float: left;">icon here</span>
<input type="submit" name="check" value="<?php _e("Check") ?>" style="float: left;"/>
<div style="clear: both;"
</div>
<input type="text" name="mail" value="<?php _e("E-Mail") ?>" id="" class="input" />
<input type="submit" value="<?php _e("Register") ?>" id="register" />
<p class="statement"><?php _e("A password will be e-mailed to you.") ?></p>
</form>
The button, on line 5, contains text that is translatable, hence the value will change. The code works, when 'Check' is clicked an extra query named 'check' is submitted, and clicking 'Submit' the 'check' is disregarded. Is there any way I can change the text while keeping a default value (possibly '1'). Currently, all I can do server side is check if a query named 'check' was submitted and not bother with it's value.
Instead of an <input>, where the value is exactly the same as the text on the screen, use a <button> where the text on the screen can be anything you want.
In other words, change
<input type="submit" name="check" value="<?php _e("Check") ?>"
style="float: left;"/>
to
<button type="submit" name="check" value="1" style="float: left;">
<?php _e("Check") ?>
</button>
so that it will always have the value 1, no matter the text! (Of course you can use whatever value you want.)
Related
I have a page that displays some info about a project in a "container", within that container there are some different fields along with 2 buttons that access different pages. I am having an issue getting the buttons to line up horizontally, how can I get this done? I am thinking it has something to do with the way the forms are rendered, is there a better way than forms? can you style forms with css doing like
display: inline
This is the first time I have messed around with HTML, here is my code thanks:
<div class="project-container">
<label class="boldLabel">Project ID:</label>
<span><?php echo $pId; ?></span><br>
<label class="boldLabel">Project Owner:</label>
<span><?php echo $pName; ?></span><br>
<label class="boldLabel">Project Description:</label>
<span><?php echo $pDesc; ?> </span><br><br>
<label class="boldLabel">Project Due Date:</label>
<span><?php echo $dDate; ?> </span><br>
<form action="delete.php" method="GET">
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<button class="buttonDelete" type="submit" name="delete">Delete Project</button>
</form>
<form action="update.php" method="GET">
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<input type="hidden" name="pName" value="<?php echo $pName; ?>">
<input type="hidden" name="pDesc" value="<?php echo $pDesc; ?>">
<input type="hidden" name="dDate" value="<?php echo $dDate; ?>">
<button class="buttonUpdate" type="submit" name="update">Update Project</button>
</form>
</div>
</div>
You don't need any 2 forms on your file. You just need 1 general form tag that handles both process (delete and update). These process can be managed throught Javascript functions and events.
Note: The problem about the 2 buttons not being aligned horizontally is because you have certain elements on different form tags. You could do some extra work with css but having 2 forms in one file is normally avoided by developers unless this could be the only way to a certain process.
I fixed the code. You can see the snippet working here:
function buttoncheck(action)
{
//$("project-container").load("process.php", {action: action});
// This is an example of how you could "call" process.php
}
<form action="process.php" method="post">
<div id="project-container" class="project-container">
<label class="boldLabel">Project ID:</label>
<span><?php echo $pId; ?></span><br>
<label class="boldLabel">Project Owner:</label>
<span><?php echo $pName; ?></span><br>
<label class="boldLabel">Project Description:</label>
<span><?php echo $pDesc; ?> </span><br><br>
<label class="boldLabel">Project Due Date:</label>
<span><?php echo $dDate; ?> </span><br>
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<input type="hidden" name="pName" value="<?php echo $pName; ?>">
<input type="hidden" name="pDesc" value="<?php echo $pDesc; ?>">
<input type="hidden" name="dDate" value="<?php echo $dDate; ?>">
<button class="buttonDelete" type="button" name="delete" onClick="buttoncheck(0)">Delete Project</button>
<button class="buttonUpdate" type="button" name="update" onClick="buttoncheck(1)">Update Project</button>
</div>
</form>
And in the "process.php" file
<?php
$action=$_POST['action'];
// To Update
if($action=1){
// update code here
}
if($action=0){
// delete code here
}
You can check how to refresh div content, onclick function, css manage in this links:
Load jquery method
Load Jquery method 2
onclick function
button css design process
I have a form that I'm using within Twitter Bootstrap 3. The form posts data to a mysql database and the placeholder values are echoed from the database. I have used a <textarea> input in the 'bio' field but for some reason the placeholder text behaves differently here. I can't drop a cursor and edit a particular word like I can with the other fields. Why is this?
<div class="form-group">
<form class="" action="" id="edit_profile" method="post">
<label>
Name
</label>
<input id="user_name" name="user_name" type="text" placeholder="<?php echo $user_name ; ?>" value="<?php echo $user_name ; ?>" class="form-control input-md" required="">
</div>
Email
</label>
<input id="user_email" name="user_email" type="text" placeholder="<?php echo $user_email; ?>" value="<?php echo $user_email; ?>" class="form-control input-md" required="">
</div>
Bio
</label>
<textarea style="width:100%" value="<?php echo $bio; ?>" placeholder="<?php echo $bio; ?>" name="bio"></textarea>
</div>
<input type="hidden" name="user_id" value="<?php echo $_SESSION['user_session'] ?>">
<button type="submit" class="btn btn-small btn-green pull-right" id="submit">
Save
</button>
</form>
Textarea-text does not go in the value= it goes between the <textarea><?php echo $bio; ?></textarea> tags.
<textarea placeholder="This is a placeholder">This is the actual text</textarea>
You cannot have a value= on a <textarea> since it will stay the same regardless of what you put inside the <textarea> and therefore won't change anything regardless of what you type. (Try removing the "This is the actual text" in the example)
I have a new login page which is not submitting. :(
If I click the button and the required fields are not entered, it fires me back the errors, but as soon as they're filled and I try to submit it does nothing.
The page is live at https://www.safewise.co.nz/trainwise/login
The code
<form action="login.php" method="post" name="logForm" id="logForm" class="styled_form">
<?php if(isset($redirectURL) && !empty($redirectURL)) { ?><input type="hidden" id="redirect" name="redirect" value="<?php echo $redirectURL; ?>" /><?php } ?>
<div>
<p id="login-title">Login</p>
<input name="userEmail" type="email" class="validate[required]" id="userEmail" placeholder="Email"<?php if(isset($enteredEmail) && !empty($enteredEmail)){echo ' value="'.$enteredEmail.'"';} ?> required /><span class="form_hint">Email Address</span>
<input name="userPwd" type="password" class="validate[required]" placeholder="Password" id="userPwd" required /><span class="form_hint">Password</span>
<div class="login-checkbox"><input type="checkbox" name="remember" id="remember" style="vertical-align:middle;" /> <label for="remember">Remember Me</label></div>
<p><input name="doLogin" type="submit" id="doLogin" value="Continue" class="form-button" /></p>
<div id="forgot"><p>Register</p><p>Forgotten Password?</p>
</div>
</form>
<div id="forgotPass" class="reveal-modal">
<div class="modal-header"><h3>Forgot Password</h3></div>
<div class="modal-body" style="text-align:center;">
<form action="login.php" method="post" name="forgotForm" id="forgotForm" >
<p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
<p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john#example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
The weird thing is as soon as I remove this code it works.
<div id="forgotPass" class="reveal-modal">
<div class="modal-header"><h3>Forgot Password</h3></div>
<div class="modal-body" style="text-align:center;">
<form action="login.php" method="post" name="forgotForm" id="forgotForm" >
<p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
<p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john#example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
Any suggestions?
Where is that div located in the page? It is incorrect to have a form inside a form. And so your code may work when you remove the div above because you've taken out the second form.
Consider having them as two separate entities instead of nested.
Are these forms nested? You cannot have nested forms. You can have multiple forms in a page, just as long they're not nested.
Here's some ref on it http://www.w3.org/MarkUp/html3/forms.html
I was missing a closing div
<div id="forgot">
<p>Register</p>
<p>Forgotten Password?</p>
Needs a closing div at end
<div id="forgot">
<p>Register</p>
<p>Forgotten Password?</p>
</div>
This is my first post so be gentle :)
I have a form which I am updating a bit of information in multiple selections on the page.
I'm using datepicker to populate the box and I want to use the refresh icon to update a table with the new date info and fire off some other scripts too.
The issue is that the following code
<div class="control-group">
<form name="form2" action="<?php echo editFormAction;?>">
<label class="control-label" for="process_app_form_sent">Application Form Sent</label>
<div class="controls">
<div class="date datepicker input-append">
<input id="process_app_form_sent" name="process_app_form_sent" type="text" placeholder="Click to enter date" class="input-medium date"> <span class="add-on"><i class="icon-th"></i></span>
<button type="submit" class="add-on input-append"><i class="icon-refresh"></i>
</button>
<input name="member_id" type="hidden" id="member_id" value="<?php echo $row_members['member_id']; ?>" />
<input name="type" type="hidden" id="type" value="1" />
</div>
</div>
</form>
<!--end form-->
</div>
The last box with the refresh icon in it isn't sitting right. Any ideas?
As screen grab image:
You can always make the div outside position:relative and the button position absolute and then place it exactly where you want it using top: & left:
I have done textareas before but this one is just killing me. The text area is showing the html code and is not css'ed properly. So in the actual window I get the code for the textarea's element and it shows the rest of my code in it as well, instead of rendering it. Without the textarea tag everything works peachy.
<article>
<form method="POST" name="form9" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="firstName">First Name <sup>*</sup></label>
<input type="text" id="firstName" name="firstName" required />
<label for="lastName">Last Name <sup>*</sup></label>
<input type="text" id="lastName" name="lastName"/>
<label for="wrstyle">Writing Style <sup>*</sup></label>
<textarea placeholder="Please, briefly describe your writing style." type="text" id="wrstyle" name="wrstyle"</textarea>
<label for="submit" class="centerit" title="Click here to register your account">
<input type="submit" name="submit" value="Sign Up" />
</label>
<p class="notice"><sup>*</sup> denotes a required field.</p>
</form>
</article>
You don't close opening tag of the textarea (you are missing >):
http://jsfiddle.net/Bvk92/
It's also worth noting that <textarea> has no type attribute.
You forgot to close tag of text area .......
<article>
<form method="POST" name="form9" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="firstName">First Name <sup>*</sup></label>
<input type="text" id="firstName" name="firstName" required />
<label for="lastName">Last Name <sup>*</sup></label>
<input type="text" id="lastName" name="lastName"/>
<label for="wrstyle">Writing Style <sup>*</sup></label>
<textarea placeholder="Please, briefly describe your writing style." type="text" id="wrstyle" name="wrstyle"></textarea>
<label for="submit" class="centerit" title="Click here to register your account">
<input type="submit" name="submit" value="Sign Up" />
</label>
<p class="notice"><sup>*</sup> denotes a required field.</p>
</form>
</article>