First of all, is this possible?
I have a reset button in my form and I want to get the text in the input before clicking on the reset button.
<form action="Pros.php" method="post">
<div class="form-group">
<label for="ordID">Email address:</label>
<input type="text" class="form-control" id="ordID">
</div>
<button type="reset" class="btn btn-default">Submit</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
If this is possible, how can I do it?
Thank you.
You can use onreset event handler
function myFunction() {
var m = document.getElementById('ordID').value;
console.log(m)
}
<form action="Pros.php" method="post" onreset="myFunction()">
<div class="form-group">
<label for="ordID">Email address:</label>
<input type="text" id="ordID">
</div>
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Yes, use javascript/jQuery to grab the contents of the input field(s) before you clear them. Here's a basic example:
$('#btnReset').click(function(){
var ordID = $('#ordID').val();
alert(ordID);
$('#ordID').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="Pros.php" method="post">
<div class="form-group">
<label for="ordID">Email address:</label>
<input id="ordID" type="text" class="form-control" />
</div>
<button id="btnReset" type="reset" class="btn btn-default">Reset</button>
<button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>
</form>
Related
How can I access the HTML elements of this form using plain JS or preferably jQuery? I want to access input fields (username, password) and button (login). I'm clueless since these elements don't have "ID" and class is also the same for some.
I'm working on a Chrome extension.
<form data-bind="submit: login">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" data-bind="value: loginEmail">
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" data-bind="value: loginPassword">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log In</button>
<button data-bind="click: logout" class="btn btn-default">Log Out</button>
</div>
</form>
Use the attribute selector
console.log('email',$('[data-bind="value: loginEmail"]'));
console.log('password',$('[data-bind="value: loginPassword"]'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form data-bind="submit: login">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" data-bind="value: loginEmail">
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" data-bind="value: loginPassword">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log In</button>
<button data-bind="click: logout" class="btn btn-default">Log Out</button>
</div>
</form>
You can use querySelecor(https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), for example like this:
document.querySelector('input[data-bind="value: loginEmail"]');
document.querySelector('input[data-bind="value: loginPassword"]');
You could use the input[type='password'] selector like this:
$('body').find("input[type='password']");
I thought Data-Parsley is supposed to stop form submit when errors are found. When I submit the following form, I briefly see the errors caught by data-parsley, but then the form action goes through. What am I missing here?
<div id="registerreg" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Register...</h4>
</div>
<div class="modal-body">
<form action="<?php echo 'register_success.php'; ?>" method="POST" name="registration_form" id="registration_form" class="margin-bottom-0">
<div class="form-group">
<label>First Name:</label>
<input type="text" id="first" name="first" class="form-control input-lg" placeholder="First Name" required />
</div>
<div class="form-group">
<label>Last Name:</label>
<input type="text" id="last" name="last" class="form-control input-lg" placeholder="Last Name" required />
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control input-lg" placeholder="Email Address" id="emailreg" name="emailreg" onkeyup="checkvalid()" data-parsley-trigger="change" required />
<div id="emailwarning" style="color:red;"></div>
</div>
<div class="form-group">
<label>Password: (At least 6 charactors with 1 number)</label>
<input type="password" id="passwordreg" name="passwordreg" class="form-control input-lg" placeholder="Password" data-parsley-minlength="6" data-parsley-pattern="/^[a-zA-Z0-9., ]*[0-9]+[a-zA-Z0-9., ]*$/" title="Passwords must be at least 6 characters long, contain at least one uppercase letter (A..Z), at least one lower case letter (a..z), and at least one number (0..9)"/>
</div>
<div class="form-group">
<label>Repeat Password:</label>
<input type="password" name="confirmpwd" id="confirmpwd" class="form-control input-lg" placeholder="Repeat Password" data-parsley-equalto="#passwordreg" data-parsley-error-message="The entered text does not match the password field."/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="registerbutton" class="btn btn-primary" onclick="return regformhash(this.form, this.form.passwordreg);" value="Register" >
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('#registration_form').parsley();
</script>
The onclick event in the submit button is overriding data parsley functions. Removing the onclick event from the submit button and letting data parsley fire the events solved the problem.
changed ...
<input type="submit" id="registerbutton" class="btn btn-primary" onclick="return regformhash(this.form, this.form.passwordreg);" value="Register" >
to...
<input type="submit" id="registerbutton" class="btn btn-primary" value="Register" >
and ...
$('#registration_form').parsley();
to....
$('#registration_form').parsley().on('form:success', function() {
var form = document.getElementById('registration_form');
var passwordreg = form.passwordreg;
return regformhash(form, passwordreg);
});
I am implementing reCaptcha in my website, but i could not validate recaptcha on form submit. The form is getting submitted even if the recaptcha is not clicked. How to check whether the captcha is valid/checked or not The code snippet is :
<div class="form-group">
<div class="input-group">
<input id="mailid" type="email" placeholder="Enter Your Email" class="form-control input-md" required>
</div>
<br>
</div>
<div class="g-recaptcha" data-sitekey="site-key" id="recaptcha"></div> <br>
<div class="btn-group">
<button type="submit" class="btn btn-primary" id="Button1" /><h5>submit</h5>
<button type="submit" class="btn btn-link" id="cancelbtn" /><u>cancel </u>
</div>
</form>
NOTE : We are not using php in the application.
I've a form but it doesn't pass the parameters 'url' and 'USERNAME' to the next page. Is there something wrong?
I must use <button> instead of <input> for styling issues.
Here is the form:
<form action="/confirmation/index.php" method="post" class="form-wrap">
<div class="loader-wrap">
<div class="loader-txt">
</div>
</div>
<div class="field-set url-field">
<input type="text" name="url" data-placeholder="Your Website URL" maxlength="50" class="validate">.
<button name="url_btn" type="button" class="btn url-btn">Scan My Site!</button>
</div>
<div class="field-set email-field">
<input type="text" name="USERNAME" data-placeholder="Your E-mail" maxlength="50" class="validate">
<button name="email_btn" type="button" class="btn email-btn" style="width:174px;font-size:15px;">Send me Results!</button>
</div>
</form>
email_btn should be of type="submit" instead of type="button", so rather:
<button type="submit">Send me the results</button>
see here:
http://www.w3schools.com/tags/tag_button.asp
This should work with a submit Button!
(The extra php is to show that it works!)
<?php
if (isset($_POST['submitted'])) {
echo "form submitted";
}
?>
<form action="index.php" method="post" class="form-wrap">
<div class="loader-wrap">
<div class="loader-txt">
</div>
</div>
<div class="field-set url-field">
<input type="text" name="url" data-placeholder="Your Website URL" maxlength="50" class="validate">.
<button name="url_btn" type="button" class="btn url-btn">Scan My Site!</button>
</div>
<div class="field-set email-field">
<input type="text" name="USERNAME" data-placeholder="Your E-mail" maxlength="50" class="validate">
<button name="email_btn" type="button" class="btn email-btn" style="width:174px;font-size:15px;">Send me Results!</button>
<button name="submitted" type="submit">Send me the results</button> //Submit Button
</div>
</form>
<form class="form-asd" role="form">
<h2>REGISTER</h2>
<hr />
EmailAddress:
<input class="form-control" type="text" id="email" required/>
<br />
Password:
<input class="form-control" type="password" id="Password" required />
User Type
<input style="width: 2.2em;height:1.3em" id="ContributorRdb" type="radio" name="choose" value="Contributor" required/>Contributor
<input style="width: 2.2em;height:1.3em" id="CategoryRdb" type="radio" name="choose" required/>
<select class="btn btn-default dropdown-toggle" id="Select" disabled="disabled">
<option selected="selected" disabled="disabled">type</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<br/
<input class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>
</form>
<script>
$(document).ready(function () {
$('#Register').click(function () {
alert("this is submitted");
});
})
</script>
This above form works well without tag type= submit but when i modify the button to input class="btn btn-lg btn-sucess" id="Register" value="Sign up" type="submit" this form stops working so is there any way to use type ="submit" in this input tag.
I can imagine that the form doesn't work.
Form attributes
Wrong: <form class="form-asd" role="form">
This should contain action and method.
Good: <form class="form-asd" role="form" action="" method="post">
Submit button
Wrong: <input class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>
Should contain the type
Good: <input type="submit" class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>
jQuery (not sure if you even include the library)
Wrong: $('#Register').click(function () {
Never asume that users always click the button (you can also use the enter key)
Good: $('form').submit(function () { (I would use a class or id in the form tag)
jQuery 2
You don't prevent the default action, so your form will be submitted always.
You can add something like return false; or event.preventDefault(); in the jQuery callback.
Why not just submit the form, if that is what are you trying to attain. You can do this inside your document ready function like..
$('.form-asd).submit();
Or if this is the only form in your document then you can target the form using the form element selector like
$('form').submit();
Hope it helps :=)
you can do a following change to the code to make it work.
<input class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>
to
<input type="button" class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>
but definitely you should use the best practices suggested in the previous answer.
I think you must set action for the form <form class="form-asd" role="form" action='youraction'> and you can call document.forms[0].submit() in javascript, It will submit form.
Hope this help!