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();
});
Related
I'm on Home/Index. I have the following HTML:
<form id="frmCode" style="display: inline-block">
<input type="text" name="ConfirmationCode"/>
<input type="button"/>
<img src="~/Images/loading.gif" id="notificationLoading"/>
</form>
For some reason, if I have the cursor in the ConfirmationCode input and I press the Enter key, the form submits, and redirects to http://localhost:62500/?ConfirmationCode= . The thing is, I've read about this behaviour and I understood it might be somewhat intended behaviour depending on browser and whatnot. But I have this other form,
<form id="frmLogin" class="form-horizontal" role="form">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="col-sm-8">
<input type="text" name="MailOrUsername" title="Te poți loga introducând mail-ul sau numele de utilizator" data-val="true" data-val-required="De ce apeși aiurea? Bagă ID." class="form-control" placeholder="Mail sau ID" />
</div>
<div class="col-sm-8">
<input type="password" name="Password" title="Introdu parola asociată contului tău" data-val="true" data-val-required="Bagă parola." class="form-control" placeholder="Parola" />
</div>
<input type="checkbox" name="RememberMe" />
<span title="Bifând căsuța asta rămâi autentificat și după ce închizi browserul">Ține-mă minte</span>
<input type="button" onclick="login()" id="btnLogin" style="margin-top: 7px; margin-bottom: -5px" value="Intră" class="btn btn-info" />
<input type="button" onclick="login_hide()" />
<img src="~/Images/loading.gif" id="loginLoading" />
</form>
which doesn't have this behaviour, and nothing happens when I press the Enter key.
The form submits because you hace only 1 input in your form (no additional data needs to be entered).
Change you first form to :
<form id="frmCode" style="display: inline-block">
<input type="text" name="ConfirmationCode"/>
<input type="text" name="ConfirmationCode2"/>
<input type="button"/>
<img src="~/Images/loading.gif" id="notificationLoading"/>
</form>
and the form will not submit when you press Enter
If you want to disable the submition functionality of the form you can add the onsubmit event handler like this:
<form id="frmCode" style="display: inline-block" onsubmit="return false;">
<input type="text" name="ConfirmationCode"/>
<input type="button"/>
<img src="~/Images/loading.gif" id="notificationLoading"/>
</form>
You need to set the type of the button you want to use to submit your form to submit.
<input type="submit" ...>
<form id="frmLogin" class="form-horizontal" role="form">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="col-sm-8">
<input type="text" name="MailOrUsername" title="Te poți loga introducând mail-ul sau numele de utilizator" data-val="true" data-val-required="De ce apeși aiurea? Bagă ID." class="form-control" placeholder="Mail sau ID" />
</div>
<div class="col-sm-8">
<input type="password" name="Password" title="Introdu parola asociată contului tău" data-val="true" data-val-required="Bagă parola." class="form-control" placeholder="Parola" />
</div>
<input type="checkbox" name="RememberMe" />
<span title="Bifând căsuța asta rămâi autentificat și după ce închizi browserul">Ține-mă minte</span>
<input type="submit" onclick="login()" id="btnLogin" style="margin-top: 7px; margin-bottom: -5px" value="Intră" class="btn btn-info" />
<input type="button" onclick="login_hide()" />
<img src="~/Images/loading.gif" id="loginLoading" />
</form>
More infos on the input element and on control types.
That is the usual browser behaviour, when a user presses enter when using a form.
The form will submit and as there is no action attribute in your form tag, it will go back to the current URL (with any of the form fields/values attached) ?ConfirmationCode=
As mentioned in 'Ubiquitous Developers' comment; your are using html buttons <input type="button"/> and not the html submit button <input type="submit" />. This will not have the default behaviours of the submit button.
Its probable that the writer of the script you had, didn't want to use the default behaviours of html forms. Instead using javascript to decide how the form will behave.
I think that they use some javascript to prevent the submission of the form like this;
How to prevent ENTER keypress to submit a web form?
The first form is a simple form which follows the default browser rules. The rule is pressing enter means clicking the submit button.
<input type="button"/>
above is not a valid submit button, so the browser submits the form.
In the second case the scenario is diffrerent.
<input type="submit" onclick="login()" id="btnLogin" style="margin-top: 7px; margin-bottom: -5px" value="Intră" class="btn btn-info" />
here this is a valid submit button and so in pressing enter key, the browser clicks the button and this button instantly calls the JavaScript function "login()". Now it must be in the code that it does something that prevents the form from submission. may be something like "return false;". So the form doe snot submit.
You can try this. it works
<form method="post" action="yourpage.html">
<input type="text" name="name" class="inputbox" />
<button type="submit" id="btn1">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(".inputbox").on('keyup', function (e) {
if (e.keyCode === 13) {
$("#btn1").click();
}
});
</script>
I would like to make this form below
<form enctype="application/x-www-form-urlencoded" action="http://cpanel.gateway245.com/auth" method="post">
<p class="element">
<label for="email">Email address</label>
<br/>
<input type="text" name="email" id="email" value="" placeholder="E-mail">
</p>
<p class="element">
<label for="password">Password</label>
<br/>
<input type="password" name="password" id="password" value="" placeholder="Password">
</p>
<input type="submit" name="submit" id="submit" value="Login">
</form>
So that when a link is clicked the form shows I have seen some websites with login forms like this is it possible to be done in html under div menu ui?
Showing/hiding content can't be done in HTML alone - you'll need JavaScript to handle the click event.
This is a rudimentary example to get you on the right track. Many, many, many more examples are on SO already.
CSS
#ttt { display: none; }
HTML
Click to show form
<form id="ttt"> ... </form>
JavaScript
function show(target){
document.getElementById(target).style.display = 'block';
}
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>
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 />
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>