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:
Related
I have some basic bootstrap and HTML code that I am trying to plug into an application. My code below places the text box on one row but then has the button and ActionLink directly under the text box. I am attempting to put all 3 of these features on one row across the page.
It is as if the page is columned off and the text box is programmed to take up 100% of the first column width. I can try to change that but would prefer the text box to stay at its current width.
Please note: I attempted to put the button directly next to the text box but it is still getting pushed under it, which is why I think the page is columned off and the textbox is taking up 100% of the first column.
#using (Html.BeginForm("Index", "Person", FormMethod.Get))
{
<form asp-action="Index" method="get">
<div class="row">
<div class="form-actions no-color col-md-12">
<p>
Find by name: <input type="text" class="form-control" id="txtSearch" name="searchString" value="#ViewBag.CurrentFilter" />
<input type="submit" value="Search" class="btn btn-default" /> |
#Html.ActionLink("Back to List", "Index")
</p>
</div>
</div>
</form>
}
New Code:
<form class="form-inline">
<div class="form-group">
<label for="txtSearch">Find by name:</label>
<input type="text" class="form-control" display="inline-block" id="txtSearch" name="searchString" />
<input type="submit" value="Search" class="btn btn-default" /> |
</div>
#Html.ActionLink("Back to List", "Index")
</form> <br />
create an inline form with bootstrap classes, edited out the razor code, you'll have to put that back in
<form class="form-inline">
<div class="form-group">
<label for="txtSearch">Find by name:</label>
<input type="text" class="form-control" id="txtSearch" name="searchString" />
</div>
<input type="submit" value="Search" class="btn btn-default" /> |
Back To List
</form>
The problem is that the class "form-control" of your fisrt input text. Its display is block. If you want to stay the width of the text. Set the display to inline-block and set the width.
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 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>
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!!
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 />