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);
});
});
});
Related
well right now I am doing something like this to find all textbox values which has the same class name.
function generalBottom(anchor) {
var sends = $('input[data-name^="noValues"]').map(function(){
$(this).attr('value',$(this).val());
return $(this).val();
}).get();
}
and i call this function on a onclick of submit button like generalBottom(this)
and I have something like as per my requirement
When I click submit button of User I call a general function passing this as a parameter, but the above code gives me the text values of client as well
["perfect", "hyperjack", "julie", "annoying", "junction", "convulated"], which is undesired, I want only ["annoying", "junction", "convulated"] using my anchor params.
How to do this via my this parameter, I thought to traverse through my tags using children(), parent() but I won't be knowing how many fields user have added as its all dynamic, user can add as many values(text boxes).
I tried this
1) $(anchor).find('.rightAbsNo')
2) $(anchor).find('input[data-name^="noValues"]')
3) $(anchor).find('.rightAbsNo').map(function () {
console.log($(this).find('. showNoButton')); })
None of this worked for me.
My html is somewhat like this, code
<div id="attach0" class="leftbottomno">
<div style="overflow: hidden" class="leftbottomAbsolute" id="">
<form>
<span class="absno"><input type="text" required=""
id="absdelete" data-inputclass="leftbottomAbsoluteNo_class"
value="" class="leftbottomabsolutenotest keys" data-value=""
style="margin-bottom:4px; color: #1c1c1c;"> </span>
<a onclick="addAbsoluteValues(this);" style="margin-left: 50px">
<i class="fa fa-plus-circle color-blue-grey-lighter"></i> </a>
</form>
<a onclick="deleteAbsoluteEmpty(this);> </a><br>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue">
<input type="text" id="nonattach" placeholder="values"
data-name="noValues" data-inputclass="absYes_class" value="annoying"
class="showNoButton showActivity value" data-value="">
<button type="button" onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue" id=""> <input type="text"
data-name="noValues" data-inputclass="absYes_class" subattribute=""
value="" class="showNoButton showActivity value" data-value="">
<button type="button" onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue" id="">
<input type="text" data-name="noValues"
data-inputclass="absYes_class" placeholder="values" subattribute=""
value="junction" class="showNoButton showActivity value"
data-value="" >
<button type="button" style="display: none;"
onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i>
</button>
</div>
</div>
</div>
</div>
First of all, you need to define a container to the groups with something like :
<div class="container">input groups</div>
<div class="container">input groups</div>
and change <button type='submit'> to <button type='button'> to prevent submitting the form.
Then change your function to this:
function generalBottom(anchor) {
var all_inputs = $(anchor).parent(".container").find("input");
var input = $(anchor).siblings('input').first();
all_inputs.each(function(){
$(this).val(input.val());
});
}
Here's Jsfiddle
first $(anchor).siblings(input) find inputs
then go through each element from first step and return their value
function generalBottom(anchor) {
var input = 'input[data-name^="noValues"]'
var values = $.map($(anchor).siblings(input), (elemnt, index)=>{
return elemnt.value
})
$('#shows').val(values.join())
}
$('button').on('click',function(){
generalBottom(this)
})
hope this helps
I have a script that disables links with a class "disabled"
//disabled links
$(document).ready(function() {
$(".disabled a").click(function() {
return false;
});
});
Additionally, I have a script that when the ".edit" button is clicked toggles the disabled state of the inputs in it's own form. It also does a removeClass('disabled') on any matching links in the form.
//toggle form edit
$("#edit").click(function(e) {
e.preventDefault();
$(this).closest("form").find("input").prop('disabled',false);
$(this).closest("form").find(".input-group-addon").removeClass('disabled');
$("#save").prop('disabled',false);
$("#edit").prop('disabled',true);
$(".alert").hide(400, "swing");
});
Then there is a script for adding and deleting input fields
//add input fields
$(".form-group").on('click', 'a.addInput', function() {
var original = $(this).closest(".input-group");
original.clone().insertAfter(original);
});
//remove input fields
$(".form-group").on('click', 'a.deleteInput', function() {
var original = $(this).closest(".input-group");
if($(this).closest(".form-group").children(".input-group").length > 1) {
original.remove();
}
});
HTML:
<form class="edit">
<div class="panel">
<div class="panel-heading">
<span><i class="fa fa-user" aria-hidden="true"></i> Basic Information</span>
<span class="pull-right"><input id="save" class="btn btn-success" type="submit" value="Save" disabled></span>
<span class="pull-right"><button id="edit" class="btn btn-default">Edit</button></span>
</div>
<div class="panel-body">
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<input type="email" class="form-control" placeholder="Email" name="email" value="engelo#dingosoft.us" disabled required>
<div class="input-group-addon disabled"><span class="fa fa-plus"></span></div>
<div class="input-group-addon disabled"><span class="fa fa-minus"></span></div>
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<input type="tel" class="form-control" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="Format: 555-555-5555" name="phone" value="419-555-1212" disabled required>
<div class="input-group-addon disabled"><span class="fa fa-plus"></span></div>
<div class="input-group-addon disabled"><span class="fa fa-minus"></span></div>
</div>
</div>
</div>
</div>
</form>
The problem I am having is that when the class "disabled" is removed from the links, the links ('a.addInput') & ('a.deleteInput') do not function. What am I missing here?
Click handlers are attached to elements, not to selectors. So when you do this:
$(".disabled a").click(function() {
return false;
});
You are assigning that behavior to all elements which match at that moment (in this case, when the document loads). No matter what changes you make to the DOM after the fact, any elements which were matched when you invoked the above code will still have the above click handler.
One approach here could be to assign the click handler to a common unchanging parent, instead of to the elements themselves. By using .on() in this way, you can evaluate the selector dynamically when the click event happens instead of just once when the page loads. Something like this:
$(document).on("click", ".disabled a", function() {
return false;
});
Then the second selector (".disabled a") will be evaluated with each click. So if the DOM has changed such that an element no longer matches that selector, this click handler won't be used.
You need to add prevent the event.
$(".form-group").on('click', 'a.addInput', function(e) {
e.preventDefault();
var original = $(this).closest(".input-group");
original.clone().insertAfter(original);
});
//remove input fields
$(".form-group").on('click', 'a.deleteInput', function(e) {
e.preventDefault();
var original = $(this).closest(".input-group");
if($(this).closest(".form-group").children(".input-group").length > 1) {
original.remove();
}
});
or you can add a href="javascript:void(0);" to addInput and deleteInput.
I hope it will be help to achieve your goal...
I am using Krajee's Bootstrap file upload plugin for file input & I am trying to clone the file input so that users can add multiple files from different folders rather than selecting it at once. The issue I am facing is after the file input gets cloned, it behaves weirdly. I have setup a fiddle for this.
When I am trying to reset or clear the file input, it always clears the first input. Have been trying a lot of options & after spending so many hours decided to post here.
JS Fiddle: https://jsfiddle.net/asfg9mna/
Any ideas as to how to make it work fine? Issue is whenever i click on delete icon, it always deletes the first input's file & not the current one.
HTML code:
<form role="form" id="upload-form" class="form-horizontal">
<div class="addFiles text-nowrap">
<div class="appendClass form-group" style="margin-bottom: 1.5%;">
<label class="col-md-2 control-label" for="input-2">Select Files</label>
<div class="col-md-9 col-9-input uploadFile">
<input placeholder="Select Files" id="input-2" name="input2[]" type="file" class="file input-upload" data-show-upload="false" data-show-preview="false">
</div>
<button type="button" class="btn btn-box-tool addFilesBtn" data-toggle="tooltip" title="Click to add more files">
<i class="fa fa-plus"> </i>
</button>
<button type="button" class="btn btn-box-tool closeFilesBtn" data-toggle="tooltip" title="Click to remove this block">
<i class="fa fa-times"> </i>
</button>
</div>
</div>
</form>
JS Code:
//Clone Upload File Div
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(this).tooltip('hide');
$(".appendClass:first").clone(true).appendTo(".addFiles");
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
//$fileInput = $('.input-upload');
//$fileInput.replaceWith( $fileInput = $fileInput.clone( true ) );
//$('.input-upload').fileinput('clear').fileinput();
$('.uploadFile').next().trigger('reset');
});
Here is jsfiddle
Update your js code like this,
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(this).tooltip('hide');
parent_element = $(".appendClass:first");
$(".input-upload").fileinput('destroy');
element = parent_element.clone();
element.appendTo(".addFiles");
$(".input-upload").fileinput();
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
//$fileInput = $('.input-upload');
//$fileInput.replaceWith( $fileInput = $fileInput.clone( true ) );
//$('.input-upload').fileinput('clear').fileinput();
//$('.uploadFile').next().trigger('reset');
});
And please write your code to update ids of every elements which will be cloned.
EDIT
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(this).tooltip('hide');
$(".has_clone").each(function() {
$this = $(this);
var parent_element = $(this).closest(".appendClass");
var $element = parent_element.clone();
$element.find(".file-input").remove();
var counter = parseInt($("#counter").val()) + 1;
$element.find(".col-md-9").append('<input placeholder="Select Files" id="input-' + counter + '" name="input2[]" type="file" class="file dynamic_clone input-upload " data-show-upload="false" data-show-preview="false">');
$("#counter").val(counter);
$element.appendTo(".addFiles");
$(".input-upload").fileinput({
'showPreview': true
});
});
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
//Close addFile div - Upload files
$(document).on('click', ".closeFilesBtn", function(e) {
e.preventDefault();
$(this).closest(".appendClass").hide();
});
Thanks
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();
We have a magento site that is using the WebForms2 plugin and ends up using something like the following generated code for a form:
HTML
<form action="http://example.com/magento/index.php/webforms/index/iframe" method="post" name="webform_2" id="webform_2" enctype="application/x-www-form-urlencoded" class="webforms-lg-test" target="webform_2_iframe">
<input type="hidden" name="submitWebform_2" value="1"/>
<input type="hidden" name="webform_id" value="2"/>
<div id="fieldset_0" class="fieldset fieldset-0 ">
<ul class="form-list">
<li class="fields ">
<div id="field_11" class="field type-text webforms-fields-11 webforms-fields-name">
<label id="label_field11" for="field11">Name</label>
<div class="input-box">
<input type='text' name='field[11]' id='field11' class='input text ' style='' value="" />
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<p class="required">* Required Fields</p>
<button type="button" class="button" id="webform_2_submit_button" onclick="webform_2_submit()" title="submit">
<span>
<span>Submit</span>
</span>
</button>
<span class="please-wait" id="webform_2_sending_data" style="display:none;">
<img src="http://example.com/magento/skin/frontend/default/default/images/opc-ajax-loader.gif" alt="Sending..." title="Sending..." class="v-middle"/>
<span id="webform_2_progress_text">Sending...</span>
</span>
</div>
</form>
JS
var webform_2 = new VarienForm('webform_2', 0);
var webform_2_submit = function(){
var form = webform_2;
if(form.validator && form.validator.validate()){
form.submit();
$('webform_2_submit_button').hide();
$('webform_2_sending_data').show();
}
};
The tricky part is that we have an additional tool that works with all forms. Previously we just had it hook into the forms submit handler, but this particular method that Magento/WebForms uses, does not trigger the submit handler.
An example of our tool's code:
var forms = document.getElementsByTagName('form');
for(i=0; i<forms.length; i++) {
forms[i].addEventListener('submit', function() {
alert('form submitted');
}
}
We were also using a jQuery approach, but pared it down to reduce dependancies. It also did not work.
$('form').on('submit', function(e) {
alert('form submitted');
});
Question
Is there something specific in Magento that I could use with this implementation that I could hook into instead of a standard submit handler? Or a different/better way to observe a form's submit handler?
Using Prototype I was able to override the existing submit handler.
VarienForm.prototype.submit = VarienForm.prototype.submit.wrap(function($super, url) {
//-- your code can go before OR after the default form behavior
//-- include this if you want to include the previous submit behavior
$super(url);
return false;
});