I am using Skeleton right out of the box, and doing a very simple landing page.
I am using the form style provided on their website sample (http://getskeleton.com/#forms):
<!-- The above form looks like this -->
<form>
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test#mailbox.com" id="exampleEmailInput">
</div>
<div class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
<label class="example-send-yourself-copy">
<input type="checkbox">
<span class="label-body">Send a copy to yourself</span>
</label>
<input class="button-primary" type="submit" value="Submit">
</form>
<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->
<!-- Note: The class .u-full-width is just a utility class shorthand for width: 100% -->
But I am not seeing where I control where the form is sent to upon submit.
Can someone explain how I can send a form using Skeleton?
Sorry for the stupid question, but I am lost.
Thanks,
Melvins
I believe that they're just giving you the layout html and css. You need to provide either an action attribute (action='myurl') or id (id='myform') to the form element. Here's a simple example just using the action attribute:
<p>Click 'Submit' to send the input name to 'myform.php'</p>
<form action="myform.php">
Name: <input type="text" name="name">
<input type="submit">
</form>
Better, you can use jQuery or javascript to set up an event handler that will detect a click on the button and send your form input data wherever you like:
$( "#myform" ).submit(function( event ) {
alert( "name data sent to myform.php" );
$.post( "myform.php" );
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Click 'Submit' to send the input name to 'myform.php'</p>
<form id="myform">
Name: <input type="text" name="name">
<input type="submit">
</form>
Related
#{
ViewData["Title"] = "Login";
}
<h1>#ViewData["Title"]</h1>
<div class="container">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember">Remember me
</label>
</div>
**<script>function openWin() {
window.open("https://localhost:7257/Home/Stocks");
}</script>
<form>
<button type="submit" class="btn btn-primary" value="Login" onclick="openWin()">
Login
</button>
</form>
<script>function openWin() {
window.open("https://localhost:7257/Home/Signup");
}</script>
<form>
<button type="submit" class="btn btn-primary" value="Sign up" onclick="openWin()">
Sign up
</button>
</form>**
</form>
</div>
After executing this code block the page that is similar to photo can be displayed but my problem is how should I change these 2 buttons functions so that they can pop up different locations like it is written in the bold area.
If there is any related page similar to this issue, you can share as comment.
It looks like you've named both functions openWin(). When you click the button it's finding the the top function and never makes it to the second one since it thinks it found what it was looking for. JS runs from top to bottom in order so as soon as it finds the first function it will stop.
You need to change one of the function names when you declare it, such as openWin() and openWin2().
I would also recommend that you move all of your JS code to a single <script> tag in order to avoid errors in the future.
I have a code that submits form by clicking <input type="submit">, and I want to change my form to submit when label, which is outside of the form, is clicked.
What should I do?
Here's my code:
<div class="join">
<p>Join</p>
<span>Join to access all features of the site!</span>
</div>
<form action="join/joinf" method="POST" class="joinform">
<div class="left">
<p>ID<span class="required"> *required</span></p>
<p>PW<span class="required"> *required</span></p>
</div>
<div class="right">
<p><input type="text" name="id" id="id" required>
<p><input type="password" name="pw" required></p>
</div>
<input type="submit" id="formsub" value="join">
</form>
<label for="formsub"><button>join-label</button></label>
Try using Jquery click element, set id for label .
$('#LabelId').click(function(e) {
e.preventDefault();
$("#formsub").submit();
});
To turn off autocompletion in HTML I use:
<input type="text" name="foo" autocomplete="off" />
But this forces me to specify autocomplete="off" in every input field of my application. Is it possible to define autocomplete="off" in a CSS style?
You can just apply it to the form tag.
Using CSS you cannot achieve it. You can use client side script for example using Jquery
$('input').attr('autocomplete','off');
If you are not using Jquery or scripting language then you have to stick to HTML only.
As TeT Psy said you can apply it in form tag like
<form id="Form" runat="server" autocomplete="off">
you can disable all the autocompletes using form
<form id="Form1" runat="server" autocomplete="off">
U can use autocomplete="off" attribute on form tag. Like
<form id='test' autocomplete="off">
<input ...
<input ..
...
</form>
You can set it on form element if you wants to set autocomplete: off for all input elements of form. And if wants to make it on for some selected input you can apply autocomplete: on on that input.
.form {
padding: 30px 0;
width: 300px;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form action="#" class="form" autocomplete="on">
<div class="form-group">
First name:<input type="text" class="form-control" name="fname">
</div>
<div class="form-group">
Last name:<input type="text" class="form-control" name="lname" autocomplete="off">
</div>
<div class="form-group">
E-mail: <input type="email" class="form-control" name="email">
</div>
<input type="submit">
</form>
No you can't do this using css, but there are 2 other ways to do it:
1- you can apply it for the form
<form autocomplete="off" >
<input type="text" name="name">
<input type="text" name="mail">
</form>
2- you can handle it using js
var eles = document.getElementsByTagName('input');
for(i=0; i<eles.length; i++){
eles[i].setAttribute("autocomplete", "off");
}
https://jsfiddle.net/ng1mb77m/1/
I am experiencing a issue detecting if the submit button was clicked. I was give the following form by a CSS designer:
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control span12">
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-controlspan12 form-control">
</div>
Sign In
<div class="clearfix"></div>
</form>
I would like submit the captured information by clicking on the Sign In CSS button. I am used to the usual:
<input type="Submit" value="Sign-In>
button, but not this is different, I am stuck. Any assistance will be appreciated.
try to change
Sign In
with
<button type="submit" class="btn btn-primary pull-right">Sign In</button>
Furthermore you need to set an action attribute on your form element
Give your form and ID = "myform" And try below:
Sign In
ttI know this is a lame question but in order to do it right i need your help.
this is my html code
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
</form>
<div style="width:100%; font-size:14px;text-align:center;">Click here to subscribe
</div>
<div class="subscribe">
</div>
and here is the fiddle
http://jsfiddle.net/V8RB2/
how can i associate the "Click here to subscribe" text and the button with this form?
If i understood you correctly, you want to submit the form when the link is clicked. To do this, you'll have to use JavaScript.
A quick way of doing it is by telling the form to submit itself in the onclick attribute of the link.
<a onclick="form1.submit()" href="#">Click here to subscribe</a>
What happens is, that when the link is clicked, you trap its onclick event and then you tell form1 to submit itself.
The easiest way would make this a button within the form and use CSS to style it however you want.
<input type="submit" id="button1" class="button1" name="subscribe" value="Click here to subscribe!" />
Then to style:
form input.button1 {
style here
}
The below will work.
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
Click here to subscribe
</form>
Change your link's href to:
href="javascript:document.forms['form1'].submit()"
Or add that as an onClick attribute.
Updating with a technique to route around disabled javascript.
<script>document.write('Click here to subscribe</div><div class="subscribe">');</script><noscript><input type="submit" value="submit"></noscript>