I validate my form by changing input type to email. I have this form:
<form class="validation" action="#" method="get">
<div class="form-group">
<input type="email" name="email" value="" class="form-control" id="newsletter" placeholder="Your Email">
<button data-toggle="modal" data-target="#answer" type="submit" value="Sign up Now" data-error="Bruh, that email address is invalid" required ><i class="fa fa-angle-double-right"></i></button>
</div>
</form>
If there's a valid email address on submit, I want a modal to open. I'm using Bootstrap to achieve this. The problem is that the modal opens on submit even when the email is not valid. How can I fix this?
Look type email doesn't work properly if you want to validate any input use jQuery
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and an email address.</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required, email: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
email: true
}
}
});
</script>
</body>
</html>
then you can add the modal for the success
Related
Trying to display a login form which appears after clicking on a button 'Sign In', however the button is not implementing.
Here is what I tried:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#s1").click(function(){
$("form").show();
});
});
</script>
<body>
<form action="f1.py" method="post">
<button id="s1">Sign In</button>
<div>
<label for "lid">ID:</label>
<input type="text" id="logid" required>
</div>
<div>
<label for "psw">Password:</label>
<input type="password" id="psw1" required>
</div>
</form>
</div>
You can try this :
$(document).ready(function()
{
$("#s1").click(function()
{
$("form").toggle(500);
});
});
You didn't hide the form to begin with.
consider this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#s1").click(function(){
$("form").css('display','block');
});
});
</script>
<body>
<button id="s1">Sign in</button>
<form style="display:none;" action="f1.py" method="post">
<button id="s1">Sign In</button>
<div>
<label for "lid">ID:</label>
<input type="text" id="logid" required>
</div>
<div>
<label for "psw">Password:</label>
<input type="password" id="psw1" required>
</div>
</form>
</body>
EDIT: also as mrmonsieur mentioned in comments your closing body tag was wrong
I want to auto submit the form through the function that I call onload but submit button creates an extra parameter, see the URL "http://somewebsite/webapp/file.php?password_new=&password_conf=&action=change".
<html>
<body onload='document.forms[0].submit();'>
<form action="http://somewebsite/webapp/file.php" method="GET" style="display:block">
<p><label for="password_new">New password:</label><br />
<input type="password" id="password_new" name="password_new" value="432"></p>
<p><label for="password_conf">Re-type new password:</label><br />
<input type="password" id="password_conf" name="password_conf" value="432"></p>
<button type="submit" name="action" value="change">Change</button>
</form>
</body>
</html>
<html>
New password:
Re-type new password:
Change
I have a form like this,
<form>
Username: <input type="text" name="usrname" required>
<input type="button" value="Post">
</form>
I want a tooltip to pop-up if the user clicks on the button without entering anything in the textbox.
I know it will work if I change the button to like this - <input type="submit" value="Post">. But I don't want to do that.
Did you mean formaction instead of action?
<input type="text" name="usrname" required formaction="action_page.php">
action is a form tag attribute, not inputs's.
Use HTML5
Try like this it will work :
action attribute specifically for form tag. not input tag
<form action="action_page.php">
Username: <input type="text" name="usrname" required >
<input type="submit" value="Post">
</form>
Use method "POST" in tag, It will work
<form action="action_page.php" method="POST">
Username: <input type="text" name="usrname" required >
<input type="submit" value="Post">
</form>
I figured out how to do this with some jQuery based on an answer from this post.
The following code does exactly what I was looking for,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="myForm">
Username: <input type="text" name="usrname" required id="input">
<input type="button" value="Post" id="button">
</form>
<script>
$('#button').click(function(e) {
if ($('#input').val() === "") {
$('<input type="submit">').hide().appendTo('#myForm').click().remove();
}
});
</script>
</body>
</html>
See here for DEMO
I have a form on a remote server I'm trying to submit data to, example below
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="send" value="Submit" />
</form>
</body>
</html>
I'm trying to auto submit the data like this
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<script type="text/javascript">
document.forms[0].submit();
</script>
</form>
</body>
</html>
It works fine if the first example didn't have a (name="send") name but when it does have a name nothing submits. My question is how would I go about sending the data with a input button that has a name.
Thank you
Note: The answer turned out to be type="hidden" instead of type="submit", in which the second does not allow DOM submission while also submitting that input's value in the GET/POST data. type="hidden" does, and it works here since the button does not need to be physically clicked.
Pick one:
<form name="formname" id="formid" action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="send" value="Submit" />
</form>
<script type="text/javascript">
if (confirm('Ok for "formname", Cancel for "getElementById"')) {
console.log('document.formname.submit()');
document.formname.submit();
} else {
console.log('document.getElementById("formid").submit()');
document.getElementById('formid').submit();
}
</script>
http://jsfiddle.net/userdude/EAmwj/3
Your JavaScript code will get executed as soon as the page is loaded. That is why it gets submitted immediately.
You need to wrap the JS code in a function and let an event call it from the page.
You can use a regular button and set the function for the onclick event of a button.
<html>
<head>
<body>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="button" name="send" value="test2" onclick="doSubmit()" />
<script type="text/javascript">
function doSubmit() {
document.forms[0].submit();
}
</script>
</form>
</body>
</html>
I have a form and when the form is loaded through a browser, I want it to submit the data automatically.
The problem is I wrote a PHP script that will submit it all fine on a test form. My problem is the server I'm trying to submit the data to named the button "submit".
Here is the example form:
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.forms[0].action="submit"
</script>
</body>
</html>
The person that created the form on the other server named it "submit". Is there a workaround until they fix it?
Here is a example of the person's form
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="submit" class="submit" value="Send Data" />
</form>
</body>
</html>
You want to submit the form? Then simply use its submit() method:
document.forms[0].submit();
If the server expects submit to be POSTed, i.e. the button being clicked, you can simply trigger the click() event of the button. Since you cannot access it using its name, I'd use jQuery for it:
$('input[name="submit"]').click();
Instead of:
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.forms[0].action="submit"
</script>
</body>
</html>
Try this:
<html>
<head>
</head>
<form name="MyForm" action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.MyForm.submit();
</script>
</body>
</html>
If I understand your question correctly, the input element has name="submit" and type="submit". They are different things.
So you can also create the same behavior easily.