I've made the following form:
<form action="search-engine/search.php">
<input id="words" name="q" class="form-control" type="text" placeholder="Buscar aquí" >
<div class="input-group-addon search-div">
<button type="submit" id="submitForm" class="btn-search">
<span class="fa fa-search fa-fw "></span>
</button>
</div>
</form>
$("#words").autocomplete({
source: "autocomplete.php",
minLength: 2,
select: function(event, ui) {
//assign value back to the form element
if(ui.item){
$(event.target).val(ui.item.value);
}
//submit the form
$(event.target.form).submit();
}
});
The code works well. Autocomplete is running, and if you click ENTER when you have made the selection the form is submitted.
I want also to add the possibility to send the form when you click with the mouse on the selection, like Google.
I've solve changing:
$(event.target.form).submit();
With
document.getElementById("submitForm).click();
Is there another way to do it with Jquery?
The issue is the way you're retrieving the form. Try this:
$(event.target).closest('form').submit();
Related
I have an HTML form that has its elements displayed in various Bootstrap modals. The first modal has a text box input that and a "Next" button to open the next modal. When the "next" button is pressed. I want to check if the text box is empty, and trigger a validation message. The form does not get submitted until the very end. Everything I've tried has not worked so far.
Javascript/jQuery code
$("#add_assistant_next").click(function () {
var textInput = document.getElementById('add_assistant_user');
var text = textInput.value;
if (text === "") {
textInput.setCustomValidity('Please fill out this field.');
textInput.checkValidity();
var form = $('#form_add_assistant');
form.find(':submit').click();
} else {
textInput.setCustomValidity('');
}
});
HTML
<form name="add_assistant" method="post" id="form_add_assistant">
<div class="modal-body">
<div class="step">
<span class="fas fa-arrow-right choose-arrow mr-1"></span>1. Choose a user to add
</div>
<div class="pl-3 pt-1">
<div>
<input type="text" id="add_assistant_user" name="add_assistant[user]" required="required" placeholder="UCInetID or UCI email address" class="mr-0 form-control" />
<button type="button" id="add_assistant_next" name="add_assistant[next]" data-toggle="modal" data-target="#add-user-modal" class="btn btn-outline-secondary btn">Look up user</button>
</div>
<input type="hidden" name="user_search_route" value="/courseSpace/20900/listAssistantEnrollment">
</div>
</div>
... form continues in other modals
Your JS code is probably fighting with Bootstrap for control of that button. To get around that, and have your validation, you could try modifying your code to have a middle step / temporary button to help with validation first before actually submitting. So something like this:
Javascript/jQuery code
$("#my_temp_button").click(function () {
var textInput = document.getElementById('add_assistant_user');
var text = textInput.value;
// Might also want to handle null and undefined cases?
if (text === "" || text === undefined || text === null) {
// I'm assuming if it's empty, it doesn't pass validation,
// so we just display this warning and wait for the user to fix it:
textInput.setCustomValidity('Please fill out this field.');
} else {
// it's not empty so validate:
if (textInput.checkValidity()) {
// it passed validation, so ok to submit.
// call the real button:
$('#add_assistant_next').click();
// do you need this?
var form = $('#form_add_assistant');
form.find(':submit').click();
} else {
// it failed validation, so display another error?
textInput.setCustomValidity('Try again.');
}
}
});
HTML:
<form name="add_assistant" method="post" id="form_add_assistant">
<div class="modal-body">
<div class="step">
<span class="fas fa-arrow-right choose-arrow mr-1"></span>1. Choose a user to add
</div>
<div class="pl-3 pt-1">
<div>
<input type="text" id="add_assistant_user" name="add_assistant[user]" required="required" placeholder="UCInetID or UCI email address" class="mr-0 form-control" />
<!-- Feel free to change the id name. This is the button the user sees. It's only purpose is to give your function above full control to it and prevent Bootstrap from touching it and jumping to the next modal without having the user fix the validation failure first: -->
<button type="button" id="my_temp_button" class="btn btn-outline-secondary btn">Look up user</button>
<!-- Hide the real button from the user: -->
<div style="display:none">
<button type="button" id="add_assistant_next" name="add_assistant[next]" data-toggle="modal" data-target="#add-user-modal" class="btn btn-outline-secondary btn">Look up user</button>
</div>
</div>
<input type="hidden" name="user_search_route" value="/courseSpace/20900/listAssistantEnrollment">
</div>
</div>
...
Have you tried adding a trap for the submit event itself?
$('#form_add_assistant').submit(function(evt){
//do your validation here
if (validation fails){
return false; // OR, alternatively, `evt.preventDefault()`
}
//form submission will continue if not returned false
});
References:
https://api.jquery.com/submit/
How to conduct manual form validation via jQuery .submit()
I would like to submit form when an element is selected - skipping pressing the submit button.
I tried using onchange="this.form.submit()", but it's not working here.
This is the code:
<form action="" method="get">
<div class="ui floating dropdown labeled search icon button dd">
<input type="hidden" name="nutr_code">
<span class="text">Select nutrient</span>
<div class="menu">
<div class="item" data-value="ca">Calcium</div>
<div class="item" data-value="fe">Iron</div>
<div class="item" data-value="mg">Magnesium</div>
<div class="item" data-value="zn">Zinc</div>
</div>
</div>
<br><br>
<input type="submit" value="Show results">
</form>
Because you are using GET method you can redirect with javascript by constructing the url yourself.
$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
location.href = 'http://example.com/?nutr_code=' + value;
}});
Second option is changing the input field 'nutr_code' with the value from the callback as shown above
$('input[name="nutr_code"]').val(value);
and submit the <FORM/> from js.
$('form').submit();
EDIT:
Example of second option.
$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
// Uncomment if semantic is not updating the input before submit.
//$('input[name="nutr_code"]').val(value);
$('form').submit();
}});
You need to define action in form tag or add some method to submit button
<input type="submit" value="Show results" onclick="someFunction()">
You need to define someFunction() too if you follow this way. Thanks
You Can Use Jquery
$(document).ready(function(){
$("input[name='nutr_code']").on('input',function(e){
$("input[type='submit']").trigger( "click" );
});
});
I have a page that has multiple range sliders with matching submit buttons so i can submit each slider value after the user changes it and send it to a server where a program is running a function that returns the square of this value and return it back to me. This is the code i'm using :
$(window).on("load", function(){
var slider = $(".slider");
slider.change(function(){
var output= this.value;
$(".formoid").submit(function(event) {
posting= $.get( "http://192.168.4.49:8002/data", { n:output });
posting.done(function(data){
console.log(data)
});
});
});
});
(Html)
<div id='Services' style="display:none;">
<span class="Content_Title"> Demand <i class="fa fa-chevron-right" aria-hidden="true"></i> Tertiary <i class="fa fa-chevron-right" aria-hidden="true"></i> Services </span>
<div id="svg_Services"></div>
<div id="slider_box">
<div class="Slider"><input type="range" class="slider" min="0" max="100" name="output10"></div>
<b><div class="output" id="output10">value: %</div></b>
</div>
<form class="formoid" title="" method="get">
<div>
<input type="submit" class="btn-info" id="submitButton" name="submitButton" value="Submit Value">
</div>
</form>
</div>
<div id='Agriculture' style="display:none;">
<span class="Content_Title"> Demand <i class="fa fa-chevron-right" aria-hidden="true"></i> Tertiary <i class="fa fa-chevron-right" aria-hidden="true"></i> Agriculture </span>
<div id="svg_Agriculture"></div>
<div id="slider_box">
<div class="Slider"><input type="range" class="slider" min="0" max="100" name="output11"></div>
<b><div class="output" id="output11">value: %</div></b>
</div>
<form class="formoid" title="" method="get">
<div>
<input type="submit" class="btn-info" id="submitButton" name="submitButton" value="Submit Value">
</div>
</form>
</div>
The problem is that each time i submit another slider's value i get the previous one as well.For example if i move the first slider to a value of 3 i get 9 in my console.If after this i move another slider to a value of 2 i get 9 and 4. Does anybody know how to fix this?
You don't really want the form to submit, therefore you don't need a 'submit' handler, let alone an accumulation of 'submit' handlers that grows every time one of the sliders is changed.
Instead, attach a 'click' handler that :
inhibits form submission
finds the button's corresponding slider element
executes $.get(...)...
$(window).on("load", function() {
$(".formoid").on('click', 'button', function(e) { // guess; adjust as necessary to delegate button click handling to the form.
e.preventDefault(); // prevent buttons submitting the form
var $slider = $(this).prev('input'); // guess; adjust as necessary to select the appropriate slider relative to the clicked button
$.get( "http://192.168.4.49:8002/data", { n: $slider.val() }).then(function(data) {
console.log(data);
});
});
});
Without sight of the HTML, there's a couple of guesses in there so be prepared to do some debugging.
EDIT:
With sight of the HTML, the javascript becomes :
$(window).on("load", function() {
$(".btn-info").on('click', function(e) {
e.preventDefault(); // prevent form submission.
var $slider = $(this.form).closest('div').find("input.slider");
$.get( "http://192.168.4.49:8002/data", { n: $slider.val() }).then(function(data) {
console.log(data);
});
});
});
I've written some jQuery to validate my Bootstrap forms, however I'm having a few issues.
Firstly, I want a red outline to appear if the user clicks off the input field without typing anything in: JSFiddle example here. In this example I'm using the Bootstrap Validator plugin, however I want to imitate this effect without using the plugin.
Second, and linked to the issue I just mentioned, the green outline only appears once the user clicks the submit button, thus the user only sees it for half a second or so before they are redirected, making it a little pointless. Again, this would be solved by having an error/success outline appear once the user clicks off the input. If anyone could help me out it would be greatly appreciated.
This is the code I have so far:
HTML:
<form id="auth_form" action="action.php" method="post">
<div class="form-group has-feedback" name="auth_code" id="auth_code">
<label for="auth_code" class="control-label">
Authorisation Code</label>
<input class="form-control" id="auth_code_input" name="auth_code_input" type="password">
<span class="form-control-feedback glyphicon" id="iconBad"></span>
</div>
<div class="form-group">
<div>
<button class="btn btn-info" name="submit" type="submit" id="submit">Submit</button>
</div>
</div>
</form>
jQuery:
$(document).ready(function() {
$('#auth_form').on('submit', function(e) {
var auth_code = $('#auth_code_input').val()
if (auth_code=="") {
$('#auth_code').addClass('has-error');
$('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
e.preventDefault();
} else {
$('#auth_code').removeClass('has-error').addClass('has-success');
$('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
}
})
})
JSFiddle
Try this updated fiddle: jsfiddle.net/xqwsobmo/20/
Need to add input blur event and validate input
$(document).ready(function() {
$('#auth_code_input').blur(function(){
if(!ValidateInput()){
e.preventDefault();
}
});
$('#auth_form').on('submit', function(e) {
if(!ValidateInput()){
e.preventDefault();
}
})
});
function ValidateInput(){
var IsValid=false;
var auth_code = $('#auth_code_input').val()
if (auth_code=="") {
$('#auth_code').addClass('has-error');
$('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
IsValid=false;
} else {
$('#auth_code').removeClass('has-error').addClass('has-success');
$('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
IsValid=true;
}
return IsValid;
}
THE SITUATION:
Hello guys. In my app i have a button to create a new folder.
When that button is clicked there appears an input field where to enter the name and create the folder.
On the input field there is an ng-blur that creates the folder if the input is not empty, otherwise hide the input field.
The ng-blur is activated once i click inside the input field at least one time. Otherwise is not fired.
What I would like to obtain is this:
Once the button 'Add a new folder' is clicked and the input field appears, it will disappear as soon as i click somewhere else (without having to click inside the input one time).
To have a reference, i mean exactly how it works inside Outlook to create a new email folder.
THE QUESTION:
Is it possible to set the cursor inside the input field, once it appears? In this way the ng-blur will probably be fired and i will obtain what i need.
Alternatively it is possible to apply the same functionality of ng-blur to a button?
THE CODE:
<li> <i class="fa fa-plus"></i> Add folder </li>
<li ng-if="folder_box_view == 'display_folder_box'">
<div class="input-group">
<input type="text" class="form-control" ng-model="new_folder_name" ng-blur="folder_blur( new_folder_name )">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="folder_new( new_folder_name )">{{ 'ADD_BUTTON' | translate }}</button>
</span>
</div>
</li>
Thank you
The best solution was actually to set the focus on the input field as soon as it appears. In this way by clicking outside the ng-blur is fired as i wanted.
This is how i set the focus:
app.directive('focusMe', function($timeout) {
return {
scope: { trigger: '=focusMe' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === true)
{
element[0].focus();
scope.trigger = false;
}
});
}
};
});
<li> <i class="fa fa-plus"></i> Add folder </li>
<li ng-if="folder_box_view == 'display_folder_box'">
<div class="input-group">
<input type="text" class="form-control" ng-model="new_folder_name" ng-blur="folder_blur( new_folder_name )" focus-me="focusInput">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="folder_new( new_folder_name )">{{ 'ADD_BUTTON' | translate }}</button>
</span>
</div>
</li>
The solution was found in this StackOverflow answer:
How to set focus on input field?