How to set focus the focus to a specific form input
<? foreach($words as $word): ?>
<form data-word="<? print $word['Word']['en_words'] ?>">
<input autofocus type="text"/>
<input type="submit" value="Check"/>
</form>
<? endforeach; ?>
Related
How can i change the color of the input box in red if there's an error when i hit the SUBMIT button?
<form method="post" action="" ">
<h3>Add users</h3>
<div class="form-group <?php echo (!empty($error_user) || ($error_taken)) ? 'has-error' : ''; ?>">
<strong>Username: *</strong>
<input type="text" name="username" value="<?php echo $username; ?>" />
<span class="error"><?php echo $error_user; ?></span><br/>
<span class="error"><?php echo $error_taken; ?></span><br/>
</div>
<div class="form-group <?php echo (!empty($error_name)) ? 'has-error' : ''; ?>">
<strong>Name: *</strong>
<input type="text" name="name" value="<?php echo $name; ?>" />
<span class="error"><?php echo $error_name; ?></span> <br/>
</div>
<div class="form-group <?php echo (!empty($error_pass)) ? 'has-error' : ''; ?>">
<strong>Password: *</strong>
<input type="text" name="password" value="<?php echo $password; ?>" />
<span class="error"><?php echo $error_pass; ?></span> <br/>
</div>
<input type="submit" name="submit" value="Add">
</form>
You can use simple CSS
.form-group.has-error input {
border: 1px solid red;
}
You can handle that with javascript or jquery sending POST request with ajax
and before that you can create error handling function
You have two different CSS options.
First use:
.has-error input{
border: 1px solid red;
}
.has-error .error{
color:red;
}
Second:
.has-error>input{
border: 1px solid red;
}
.has-error>.error{
color:red;
}
just apply any of the CSS and you will be fine. The second one will find input and class error just into the class has-error. If there will be another <div> covering them then it will not work.
If you want to live check for errors and display it and change colors etc then you have to use AJAX
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 am working on my school work and I am trying to add subtitles when user upload video to webpage. The source code was created earlier and I only added code at row 12 -18.
<div class="form-group">
<input type="checkbox" id="inputCheck" name="enhancement">
<label for="inputCheck"> Add subtitles(text): </label>
<form id="post" accept-charset="UTF-8" name="post" method="post" action="/application/controllers/media.php">
<textarea rows="5" cols="85" name="blogentry" form="post"></textarea>
<input class="button" type="submit" value="Submit">
</form>
</div>
I tried this code alone and it works, so it saved subtitles to file on server. But when I added it to this source code it doesn't work. I know it doesn't work because there is "form in form". Please kindly I need your help. I don't know how to transfer this two forms to just one form. I am new in HTML and I don't know how to do it.
<form action="<?php echo base_url();?>media/upload" class="form-horizontal" enctype="multipart/form-data" method="post" id="form1">
<div class="form-group">
<select name="gender" class="form-control hide-scroll" size="<?php echo sizeof($gender_list);?>">
<?php foreach($gender_list as $key => $gender):?>
<option <?php if($key==0) echo 'selected="selected"';?> value="<?php echo $gender['gender_name'];?>"><?php echo $gender['gender_name'];?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="inputFile" class="col-sm-2 control-label input-sm m-bot15">Add file:</label>
</div>
<div class="form-group">
<input type="checkbox" id="inputCheck" name="enhancement">
<label for="inputCheck"> Add subtitles(text): </label>
<form id="post" accept-charset="UTF-8" name="post" method="post" action="/application/controllers/media.php">
<textarea rows="5" cols="85" name="blogentry" form="post"></textarea>
<input class="button" type="submit" value="Submit">
</form>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info col-sm-12"><i class="glyphicon glyphicon-arrow-up"></i> Upload</button>
</div>
</form>
You don't need two forms there. You need only one form on client-side and script, which adds subtitles to DB/file if $_POST['inputCheck'] == true - on server-side. You only need to reorganize server-side script.
On client-side you only need to remove internal 'form' tag.
On server-side you need to move script from '/application/controllers/media.php' to 'media/upload'. That's all.
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.)