I put slider into form but found it doesn't send it's value as get parameter
https://jsfiddle.net/dimskraft/284x06da/3/
Neither slider id not slider value appear in action url. Why and how to fix?
One way to fix it would be to have a hidden input field in the form and update its value based on slider's change event.
Here, I have added input field with name input1 so you would see that in the final URL. Also, you can assign its initial value with value attribute. I have given value="0"
https://jsfiddle.net/fhp81qyb/
$( "#slider" ).slider({
change: function( event, ui ) {
$('#input1').val(ui.value);
}
});
<input type="hidden" name="input1" id="input1" value="0"></input>
Slider is not a form element; hence it is not included in the form data.
Example: https://jsfiddle.net/Twisty/qfbgh0z4/5/
HTML
<form action="http://localhost" method="get" target="_blank">
<div id="slider"></div>
<input type="hidden" name="slider-value" id="slider-value" value="0" />
<input type="submit" value="Submit">
</form>
JavaScript
$(function() {
$("#slider").slider({
slide: function(e, ui) {
$("#slider-value").val(ui.value);
}
});
});
Related
First of all I already saw this: Don't include empty parameters when submitting form
But in form you can have not only input but also select for example and what if someone have Javascript disabled? Isn't there a better way to hide empty parameters?
Let's say I have a form like this:
<form asp-controller="Vehicles" asp-action="Index" method="get" >
<p>
<select asp-for="Length" asp-items="Model.Lengths">
<option value="">All</option>
</select>
Brand: <input type="text" asp-for="Search">
<input type="submit" value="Filter" />
</p>
</form>
Now if I picked length from select box and clicked filter, I have this url in the browser window:
https://localhost:44358/Vehicles?Length=15&Search=
but I want this:
https://localhost:44358/Vehicles?Length=15
or if I only searched brand without picking length I want to have this:
https://localhost:44358/Vehicles?Search=Mercedes
Is there some helper tag like adding to form hide-empty="true" or something like that? Any ready to use element or just simple solution for this simple problem?
If you insisit on achieving this requirement, you could try to disable the input which is empty. For disabled field, it will not generate the query string.
Try something like :
<form asp-controller="Vehicles" asp-action="Index" method="get">
<p>
Brand: <input type="text" id="Search" name="Search">
<input type="submit" value="Filter" onclick="return DisableNullFields();"/>
</p>
</form>
#section Scripts{
<script type="text/javascript">
function DisableNullFields() {
$('input').each(function(i) {
var $input = $(this);
if ($input.val() == '')
$input.attr('disabled', 'disabled');
});
}
</script>
}
I want disable the default change event of the input number. I don't want to remove the arrows, I just want to customize the value the user will see in input:
https://codepen.io/vendramini/pen/gNbVoe
<form id="myform">
<input class="number-padding" type="number" required pattern="[0-9]{2}" />
<input type="submit" />
</form>
(function($) {
$("#myform").submit(e => {
e.preventDefault();
alert("form sent!");
return false;
});
$(".number-padding").on("change", function(e) {
e.preventDefault();
if ($(this).val() < 10) {
$(this).val("0" + $(this).val());
}
return false;
});
})(jQuery);
Just tell me if is possible to do it without create a mega input component from scratch or get a entire framework to only do this. Thanks!
Edit:
The best reference I found was react-numeric-input but I don't use React. I accept jQuery libs that does the same thing.
Just add the read only attribute to the input tag and you are good to go
<input class="number-padding" type="number" required pattern="[0-9]{2}" value='5' readonly="readonly" />
I have the following code to submit a form. If I use the event listener function name as submit, the form does not get submitted. If I use any other name, it will. Should not I use any HTML5 keyword like submit in JavaScript as function name? In this case submit is a HTML5 keyword which can be used as a type of any INPUT element.
<form onsubmit="submit()">
<input type="email" name="email" />
<input type="submit"/>
</form>
function submit() {
var f = $('form').serialize();
alert(f);
}
You're already using jQuery here so a more elegant solution to the whole problem would be:
// HTML
<form name="my-form">
<input type="email" name="email" />
<input type="submit"/>
</form>
Then have a separate JS file:
//Js
$(document).ready(function(){
$('form[name="my-form"]').submit(function(e){
var f=$(this).serialize();
alert(f);
});
});
This also gives you extra options to prevent the form from submitting cleanly; add this at the end of the submit(){ } function.
e.preventDefault();
Update
As the OP pointed out the original question was whether the function name submit() can be used as the onsubmit attribute in a form.
This answer suggests that it cannot, as carrying out the following:
document.form['my-form'].submit();
Would be a valid way to trigger submission of the form; thus that method name can't then be included in the HTML. I am searching now for a better source to confirm this for sure I have found a similar source on Mozilla Developer Network which confirms the code above but doesn't explicitly define that the keyword submit cannot be used.
You know, there is another way to do this. You could separate your html from javascript enritelly.
<form id="form">
<input type="email" name="email" />
<input type="submit"/>
</form>
//Rest of your code
<script>
$(function() {
$('#form').submit(function() {
var f = $('#form').serialize();
// do your stuff
return true; // return false to cancel form action
});
});
</script>
In a form which contains only a
<input id="fileInput" name="BugReport" type="file" />
input field, I would like to disable the Submit button if the file input is empty (no file was chosen yet). Is there a recommended way to do this?
Add the required attribute to the input. It'll only work in browsers that support it, so you should have a JavaScript alternative (<form onSubmit="if(document.getElementById('fileinput').value == '') return false;"> or something along those lines).
Checking for whether the file input's value should always work.
if (document.getElementById("fileInput").value == "") .....
the true path of the file will be obfuscated for security reasons, but the value should always return something when a file is selected.
You can do it with JavaScript. The following code assumes you have given an id of "s" to the submit button of the form:
document.getElementById("fileInput").onchange = function() {
if(this.value) {
document.getElementById("s").disabled = false;
}
}
Obviously, you'll need to have the submit button disabled to start off. For example:
<input type="submit" id="s" disabled>
With this the best way is to have Javascript validate all the inputs as they are changed. So as the input gets changed (you can use the on change event) in Javascript enable or disable the button depending.
<input id="fileInput" name="BugReport" type="file" onchange="validateForm()"/>
This should call the javascript button which will check the input is it has a valid file and if so enable the submit button.
You can do this using jQuery
<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script>
$(function () {
$('#submit').attr("disabled", true);
$('#fileInput').change(function () {
if ($('#fileInput').val().length == 0)
$('#submit').attr("disabled", true);
else
$('#submit').attr("disabled", false);
});
});
</script>
<input id="fileInput" name="BugReport" type="file" />
<input id="submit" type="submit" />
hope this helps
yeah, you can add something like:
<input type="submit" onclick="if (window.getElementById('fileInput').value == '') return false" />
or start with a disabled submit button and enable it when the file input is clicked and the value is different than the empty string.
check this jsbin to see what the value of a file input is (its a 'fakepath' and the name of the file)
If you are using HTML5 just add required inside input tag:
<input type='file' required />
Example:
<form>
<input type='file' required />
<button type="submit"> Submit </button>
</form>
I'm trying to add a search box to my page that will direct users to the search result page on a different site. I have the action and all of the other required data in hidden fields, to ensure it's posting correctly.
The problem is that they tack on extra data to the search term, making it an advanced search type of field. So instead of being searchTerm=X, it's expecting searchTerm=Locale(en):FQE=(KE,None,11)MY_SEARCH_TERM:And:LQE=(AC,None,8)fulltext$
How can I add that extra data around my search term, without having to hit an intermediate page to do the concatenation?
Here's what I have so far:
<form action="http://vendors.address/searchresult.do" method="post">
<input type="hidden" name="type" value="search">
<input type="hidden" name="sort" value="DateDescend">
<input type="text" name="queryId">
</form>
And I need something that can result in this type of thing:
<form action="http://vendors.address/searchresult.do" method="post">
<input type="hidden" name="type" value="search">
<input type="hidden" name="sort" value="DateDescend">
<input type="hidden" name="queryId" value="Locale%28en%2C%2C%29%3AFQE%3D%28KE%2CNone%2C11%29MY_SEARCH_TERM_HERE%3AAnd%3ALQE%3D%28AC%2CNone%2C8%29fulltext%24">
</form>
Any help would be appreciated.
You could use Javascript to do this with a hidden search field. In jQuery, it would be something like:
$("input[name='queryId']").keyup(function() {
$("#hiddenField").val("Locale%28en%2C%2C%29%3AFQE%3D%28KE%2CNone%2C11%29" + $(this).val() + "%3AAnd%3ALQE%3D%28AC%2CNone%2C8%29fulltext%24");
});
But it would break with no JS.
Edit: Yea, beat to it, didn't refresh for the answers.
You can use JavaScript to do the concatenation before the form is submitted. There are a couple ways to do this but here is the recommended approach:
Since I don't see a submit button I'm assuming you counting your users to hit the enter key to submit the form so you will need to listen to the onSubmit event and concatenate the extra info before the post is sent to server.
Give the form element an id:
<form action="..." method="post" id="searchForm">
and give the text input field an id:
<input type="text" name="queryId" id="queryId">
Add this script block after the form
<script>
document.getElementById("searchForm").onSubmit = function(){
var queryField = document.getElementById("queryId");
queryField.value = "prepend_data" + queryField.value + "append_data";
return true;
}
</script>
Or of you can use JQuery (please do) you can drop this anywhere:
<script>
$(function(){
$("#searchForm")
.submit(
function(){
$("#queryId).val("prepend_data" + $(this).val() + "append_data");
}
);
});
</script>
Hope that helps
Two things I can think of:
1. Just put the locale and stuff in hidden inputs:
<input type="hidden" name="locale" value="en" />
2. Use javascript to submit the form (this is a horrible idea -- you don't want to make your site break if Javascript is turned off).