I tried the code mentioned in this question
my code:
$('.form_contact')
.each(function() {
$(this).data('serialized', $(this).serialize())
})
.on('change input', function() {
$(this)
.find('button:reset, button:submit')
.attr('disabled', $(this).serialize() == $(this).data('serialized'));
})
.find('button:reset, button:submit')
.attr('disabled', true);
And it works perfectly on text input and textarea and select.
But when I upload a picture for example with the following input:
<form class="form_contact" action="/admin/edit-post-logic.php" enctype="multipart/form-data" method="POST">
<input type="file" name="avatar" accept="image/png, image/jpeg">
<button disabled="" class="button_reset_form" type="reset">ביטול שינויים</button>
<button disabled="" class="button_submit_form" type="submit" name="submit">שמירה</button>
</form>
The image appears and everything is fine, but the buttons do not become active and remain disabled, does anyone have any idea what can be done to make it work?
Serialize does not convert the file input's value so it will be ignored. So your check will not get the value. So you need to add another check for the file input.
So you can check it directly $(input[type="file"]).val()
$('.form_contact')
.each(function() {
$(this).data('serialized', $(this).serialize())
})
.on('change input', function() {
$(this)
.find('button:reset, button:submit')
.attr('disabled', $(this).serialize() == $(this).data('serialized') && !$('input[type="file"]').length);
})
.find('button:reset, button:submit')
.attr('disabled', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form_contact" action="/admin/edit-post-logic.php" enctype="multipart/form-data" method="POST">
<input type="file" name="avatar" accept="image/png, image/jpeg">
<button disabled="" class="button_reset_form" type="reset">ביטול שינויים</button>
<button disabled="" class="button_submit_form" type="submit" name="submit">שמירה</button>
</form>
Related
I'm trying to complete or submit an input on enter press instead of clicking a submit button. Is this possible purely through a directive? Or must I add some JS?
Here's my input:
<input type="text" ng-model='main.input' placeholder='some text' required=''/>
Use ng-keyup native directive on the input and fire up ng-submit on the form:
<form ng-submit="submitFunc()">
<input type="text" ng-model='main.input' placeholder='some text' required='' ng-keyup="$event.keyCode == 13 && submitFunc()"/>
</form>
You can use ng-submit to submit your form on enter button click. See the example below,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.enterText = this.text;
$scope.text = '';
}
};
}
]);
</script>
<div ng-app="submitExample">
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{enterText}}</pre>
</form>
</div>
I don't know if this is a bug or if this behavior is intended, and if it is intended I can't figure out why. If I have a form with a single input and disabled submit button, in IE11/Edge I can focus the input and hit enter and the form will be submitted. If there are two inputs, the form is not submitted.
In Firefox and Chrome, this works as I would expect, and the form submit event is not triggered on either example while the button is disabled.
One input (jsfiddle)
HTML:
<form>
<input type="text" id="stuff" />
<button type="submit" disabled>submit</button>
</form>
JS:
$('form').on('submit', function() {alert('form submitted');});
$('button').on('click', function() {alert('button clicked');});
$('input').on('input', function() {
if ($('#stuff').val().trim())
$('button').prop('disabled', false);
else
$('button').prop('disabled', true);
});
Two inputs (jsfiddle)
HTML:
<form>
<input type="text" id="stuff1" />
<input type="text" id="stuff2" />
<button type="submit" disabled>submit</button>
</form>
JS:
$('form').on('submit', function() {alert('form submitted');});
$('button').on('click', function() {alert('button clicked');});
$('input').on('input', function() {
if ($('#stuff1').val().trim() && $('#stuff2').val().trim())
$('button').prop('disabled', false);
else
$('button').prop('disabled', true);
});
Why does the form with two inputs work correctly in IE11/Edge but not the form with one input?
i'm not a very good programmer at all but i need a little help with a webpage i'm making.
Here's what I have for a form:
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
What I want it to do is if I put in the name Fred and press submit Button, it will go to a certain page. Any other name will link to another page or popup with an error saying, "tough luck!" or something like that.
Sorry, I couldn't find anything this specific on the web anywhere. I'm sure it's simple, I'm just confused with how this works. Thank you!
using front-end only, i'd be using javascript or jquery. meaning you don't need a form element inside it.
<script>
$("#submitButton").click(function(){
window.location.replace("enter url here")
})
</script>
you can do it with JS/jQuery:
HTML
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name" id="name">
<input type="submit" id="submit-button" value="Submit">
</form>
JS
$("#submit-button").click(function(){
if ($("#name").val() == "Fred")
location.href = "goodurl";
else
location.href = "badurl";
});
There are 2 options to solve this problem.
To use JavaScript for input value's validation and depending on it to redirect user
To use server side language to check the passed value
The first option will be easier for you I guess.
You can do something like:
Name: <input type="text" name="name">
<input type="button" value="Submit" onClick="redirect();">
<script type="text/javascript">
function redirect() {
var value = document.getElementsByName('name')[0].value;
if (value == 'Fred') {
window.location.href='http://url1';
} else {
window.location.href='http://url2';
}
}
</script>
Links: 'url1' and 'url2' must be replaced with your URLs
Just add the following code in your HTML file and try it out:
<script type="text/javascript">
function handleSubmit() {
var name = document.input.name.value;
if(name == 'Fred') {
location.href = "http://www.google.com";
} else if (name == 'Jack') {
location.href = "http://www.yahoo.com";
} else {
alert("Tough Luck");
}
}
</script>
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="button" value="Submit" onclick="handleSubmit();">
</form>
I want to use a text input as a link when user hits enter.
for instance user types "stacks" to the input area and when user hits enter, it directs user to "lookup/stacks".
How can I do this?
Thanks.
I have this code but it does not work.
<form class="ui icon input" role="form" action="/lookup/">
<input type="text" placeholder="Ara...">
<i class="search link icon"></i>
</form>
Here's a quick idea to update the form's URL whenever the input changes, although I haven't tested it. The hidden submit button means the enter key works as you intend. I think you should also follow Alex's idea for a server-side backup just in case a visitor has javascript disabled.
<form class="ui icon input" role="form" action="/lookup/">
<input type="text" placeholder="Ara..." id="input_lookup">
<i class="search link icon"></i>
<input type="submit" style="position: absolute; left: -9999px"/>
</form>
<script type="text/javascript">
// if "change" doesn't work then maybe "keyup"?
document.getElementById("input_lookup").addEventListener("change", function(){
this.form.setAttribute("action", "/lookup/" + this.value);
});
</script>
You can do it with jQuery .submit().
Here's the example given on jQuery's page:
<form id="target" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
</form>
<div id="other">
Trigger the handler
</div>
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
You could use PHP to do this..
Here is a basic example, you could expand on this later if needed.
1st page..
HTML:
<form action="url.php" method="post">
<input name="url" id="url" type="text">
<input type="submit" name = "submit" value="submit">
</form>
2nd page - url.php (must be called depending on form action url)
<?php
$url = $_POST['url'];
header('Location: ' . $url);
?>
This question already has answers here:
Multiple submit buttons in an HTML form
(27 answers)
Closed 9 years ago.
I have two submit buttons, a back submit button and a next submit button, when the user is in a text input and press enter, it takes them backwards... I think this is because enter evokes the back submit button instead of the next submit button.
<form action="" method="post">
<input type="submit" name="GOTO1" value="back" />
<input type="text" name="value1" />
<input type="submit" name="GOTO3" value="next" />
</form>
So when you are instead of the text field, and press enter it executes the first submit button, how can I change that...
Go the jQuery route...(untested).
// Prevent default on form on page load
// or on "enter"
$('form').disable();
// OR....
// Disable the ENTER key altogether on the form inputs
$('form').find('.input').keypress(function(e){
if (e.which == 13) // Enter key is keycode 13
{
return false;
}
});
$('input[type="submit"]').on('click', function() {
var btn = $(this).val();
if(btn == 'back')
{
// do this to go back, code here
}
else
{
// do this to go to next, code here
}
return false;
});
very simple workaround
<script>
function myFunction()
{
}
function myFunction2()
{
}
</script>
</head>
<body>
<form action="" method="post">
<input type="submit" name="GOTO1" value="back" onclick="myFunction2()"/>
<input type="text" name="value1" />
<input type="submit" name="GOTO3" value="next" onclick="myFunction()" />
</form>
Not neat but it works on the onclick number reference.
Hope this helps...
Use
<input type="button" ... >
You should not have more than one submit per form, since ENTER should trigger it.
To know more about it, you can take a look at this: https://stackoverflow.com/a/469084/955143