that might be a simple question, but I am not yet so firm with JavaScript.
I want to have a search form with autocomplete using select2.
When the user selects a result in the select2 dropdown box, I want to submit the search form right away so that I do not need a button for the form.
I found the select2:select event handler - but I do not get it to work. Any help?
My select2 works fine and if I include a button, I can submit the form and receive the selected object id:
<form action="" method="get" id="project-search">
<select class="form-control"
data-autocomplete-light-function="select2"
data-autocomplete-light-url="/output/project-autocomplete/"
data-placeholder="Suche nach Projektnr. oder Projektleiter"
id="id_projekt" name="projekt">
<option value="" selected="selected">----------</option>
</select>
</form>
That javascript snippet does not seem to work:
<script type="text/javascript">
$(document).ready(function() {
$eventSelect.on("select2:select", function() {
console.log("select2:select");
$(this).parents('form').submit();
});
});
</script>
Edit: I get this error message in my chrome console:
Uncaught ReferenceError: $eventSelect is not defined
Thank you!
I am using django with django-autocomplete-light for the backend btw.
https://api.jquery.com/change/
Jquery has a function able to detect changes on select/checkboxes. Try:
$('#id_projekt').change(function(){
$('#project-search').submit();
});
A simple vanilla solution
<select onchange="this.form.submit()">
...
</select>
Related
I am trying to validate Bootstrap multiselect dropdown using the code given below, the form is getting validated but i did'nt get the proper output, the
validation message is above the selectbox and the message gets multiplied when
clicking on the submit button and after selecting option the message did'nt gets removed. Please help to solve my problem.
<script type="text/javascript">
$(document).ready(function() {
$.validator.addMethod("needsSelection", function (value, element) {
var count = $(element).find('option:selected').length;
return count > 0;
});
$.validator.messages.needsSelection = 'Select Atleast One College';
$("#User").validate({
rules: {
'college[]': {
needsSelection: true
}
},
}
});
$("#submit").click(function(e) {
var isvalidate=$("#User").valid();
if(isvalidate=="true")
{
}
else
{
$("#User").submit();
}
});
});
<form id="User" name="User" method="post" enctype="multipart/form-data" action="index">
<select data-placeholder="Choose College Name" name="college[]" class="chosen-select" id="college" multiple tabindex="4">
<option value=""></option>
<option value="1">abc</option>
<option value="2">abc1</option>
</select>
<a id="submit">Submit</a>
</form>
This is not a direct answer to your question, but may provide a solution to your problem.
First, change the anchor tag to a button -- because anchor tags have built-in navigation behaviour that you must counter (event.preventDefault()) and therefore add needless complexity. How about a button (input or button tags) or a div tag, or a p?)
Next, a simpler structure to evaluating your form:
jsFiddle Demo
HTML: (just changed your anchor submit button to:
<input id="dosubmit" type="submit" value="Submit" />
Note: do not use "submit" as the id for a submit button, as that is a reserved keyword
javascript/jQuery:
$('#User').submit(function(e){
var col = $('#college').val();
if ( col==null || col=='' || col=='Please choose one:' ){
$('#college').css('background','yellow').focus();
return false;
}else{
$('#college').css('background','transparent');
alert('Form submitted');
//continue to submit the form - but not now
return false;
}
});
Please consider this verification script for your project.
This is not an answer to your question but I will advise you and encourage you to use a server-side validation together.
Your data should be validate and as needed sanitzed on the php file that receives the ajax call.
If something is going wrong there, the response will always be passed back to your form giving your users the needed feedback.
You can find many examples on the internet of how to do this.
See here an example: https://scotch.io/tutorials/submitting-ajax-forms-with-jquery
So to recap: Dont't do client-side validation!!
I have a list pulled from a database that currently uses 2 submit buttons. one to refresh the page with a different set of data and the other to update the page.
the code is basically...
// this is a little bit pseudo so dont worry about spelling mistakes...
<?php
if($_POST['update']) {
// update database
}
if($_POST['filter']) {
// show different data
}
?>
<form type="post">
<button type="submit" name= "update" value="update">Update</button>
<select name="selectitem">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type='submit' name='filter' value='filter'>Filter</button>
</form>
This works fine but I was thinking it would be better to have the select element do the refresh when changed using onChange but how do i get it to submit the right button (in this case the filter button). I am using jquery so suggestions using that would be fine too.
the form posts back to the same page so it can refresh or update the data based on the select element.
I guess i want to get rid of the filter button but perform its specific action onchange of the select element.
hope you can help
thanks
Set an event handler on the select element that will trigger a click to the button.
Like this:
$('select[name="selectitem"]').change(function(e) {
$('button[name="filter"]').click();
});
I hope that helps!
I have a form with select box. With JavaScript on, I take the change event to define the options-values as location.hrefs:
$('select').change(function(){
window.location.href = $(this).val();
});
With JavaScript off, I have a basic form with a submit button. To follow the targets given in the option values, I have to set them to the form action. Do you have any idea how I could get only the selected option as form target e.g. with any CSS selector or something like that?
The form:
<form action="test-1.html">
<fieldset>
<select id="lorem">
<option value="test-1.html">test1</option>
<option value="test-2.html">test2</option>
<option value="test-3.html">test3</option>
</select>
<input type="submit" value="senden" class="submit" />
</fieldset>
</form>
You will have to do this in server-side code. Without JavaScript enabled, there is no way to dynamically change anything in an HTML DOM.
So, submit to some intermediary page that's sole purpose is to redirect and perform the logic there.
I have a search box that uses jQuery to submit the user's search and then display the results. However, for users that have JavaScript disabled this would not work so I have put the search box as a form so it will still work just by loading a different page instead.
However, now when I try and submit a search with JavaScript enabled it just submits the form and loads a new page as it would when JavaScript is disabled.
How can I resolve this? I hope you can understand my question.
I currently use the following jQuery code to submit my form:
$("#s").keyup(function(b){
if(b.keyCode==13){
if($(this).val().length>0){
And I have the following HTML:
<form action="/search" method="get">
<input type="text" id="s" maxlength="2048" name="q" autocomplete="off">
</form>
$('form').submit(function(Event) {
Event.preventDefault();
// Do your AJAX fancy submit stuff
...
});
Why did you delete and re-add?
Return false should be enough. The following would run on this page will prevent the stackoverflow search from firing.
$("#search').submit(function(){ return false;});
In your case: $('#s').parent().submit(function(){ return false;});
I have a question regarding ajax, I have a category drop down box and some javascript in place so that when the user selects a category, this automatically redirects the page to that category without having to click a submit button. My question is simple, how can I add ajax to this process to stop the page load and just load the div with the category items?
I am using expression engine cms, which I know doesn't matter but the tags are in the code.
This is my code:
<script language="JavaScript" type="text/javascript">
var theTarget = "_top";
function goThere() {
if (!document.theForm.theMenu.selectedIndex=="") {
window.open(document.theForm.theMenu.options[document.theForm.theMenu.selectedIndex].value, theTarget,"");
}
}
</script>
<form name="theForm" action="">
<select name="theMenu" size="1" onchange="goThere()">
{exp:channel:categories channel="store" style="linear" category_group="1"}
<option value="{path='store-directory'}">{category_name}</option>
{/exp:channel:categories}
</select>
</form>
<script>function goThere(val)
{
$.post(val, function(data) {
$("#categoryDiv").html(data);
});
}</script>
<form name="theForm" action="">
<select name="theMenu" size="1" onchange="goThere(this.value)">
{exp:channel:categories channel="store" style="linear" category_group="1"}
<option value="{path='store-directory'}">{category_name}</option>
{/exp:channel:categories}
</select>
<div id="categoryDiv">
</div>
</form>
Use JQuery's $.ajax function to replace the <option> tags within the select based on an ajax callback. The script being called via Ajax would simply return <option> markup ready to be loaded right into the <select>
Take a look at the $.ajax method with JQuery.
http://api.jquery.com/jQuery.ajax/