After an Ajax request, I want to reset my form elements to their original value, except for three select input, because their values are going to be used frecuently.
I declared this variable outside of "document ready":
var estado_inicial_cuerpo;
I tried this in "document ready" function:
estado_inicial_cuerpo=$("#formulario_venta").clone().children('#id_bodega_idbodega').remove().children('#id_caja_idcaja').remove().end();
And in the "success" part of the ajax (or if you like, in some button that activates this code), this one:
$('#formulario_venta').html(estado_inicial_cuerpo);
But, in the console I can see that the page is like loaded two times by using that code, and also, the entire form gets in blank, all the elements disappear.
The ID of my form is formulario_venta and id_caja_idcaja , id_bodega_idbodega are the ID's of the select inputs that I want to skip.
Now I tried this inside of the "document ready" code:
estado_inicial_cuerpo=$("#formulario_venta").not("#id_bodega_idbodega, #id_caja_idcaja").html();
Now the form don't dissapear, but everything is restored, including the elements that I wrote inside "not".
Have you tried:
$('#formulario_venta').find('input, textarea, select').not("#id_bodega_idbodega, #id_caja_idcaja").val("");
That way you say all inputs will have value = "" (empty) except the one that are inside .not()
.find('input, textarea') are the type of inputs your form might have
How about trying just
estado_inicial_cuerpo = $("#formulario_venta").html()
Do you have any sample?
First clear html from element then assign again.
$('#formulario_venta').html('');
$('#formulario_venta').html(estado_inicial_cuerpo);
Related
I have created JS script that capture user inputs and publish them in another hidden input document.
I confirmed it works because I made the hidden input visible and publish all the input as delimited string.
So far it works fine
but when I try to use the property document in another textarea, ironpython etc.. within the same DXP it is returning blank, even though I can see the string published in the previous text area.
I used this html tags ...
for input property to display the captured data.
jQuery to capture all the inputs
inval=$.....
......
....
then used this to publish them in the input field $('#dfdklsfksldfkslfs').text(inval).blur()
so far all works fine.
but after this when trying to use the document property in textarea, irontpython, within the same DXP, it is returning (BLANK) even though I can see them published in the textarea.
am I missing any steps? do I need to reassign some features?
also I have tried $('#dfdklsfksldfkslfs').val(inval).blur() this won't even publish the data in the inputfield.
here is the update with code
html
<div id='dispInput'> <spotfirecontrold id='dfdklsfksldfkslfs'></div>
jquery
$('button')click(function(){
inval=$('input').map(function(){
return $(this).val(); }).get().join('-');
$('#dfdklsfksldfkslfs').text(inval).blur() //this publish the result but don't assign the data to the document property
})
I am completely lost.
thanks a lot
Try setting timeout in the function (500ms will do).
$('button')click(function(){
setTimeout(function (){
inval=$('input').map(function(){
return $(this).val(); }).get().join('-');
$('#dfdklsfksldfkslfs').text(inval).blur()
}), 500
});
Hope this helps.
I have written two javascript functions and want to use both of them when I hit submit button. This is a form. First function is already embedded in the submit button. It displays a paragraph when you hit the submit button. Now, I want to display a table containing field values from the form (types - date, text, number). This is a 2 colmn and 5 rows table. In first column, the values are company name, number of seats available, names of the positions, location, last date for application And the second column contains the field values taken from the input in the form using document.getElementById('ID') function. Both the functions use document.getElementById('ID').
first of all, I'd recommend using jQuery for this as it gets more simplified.
In this example, they show you how to override a basic form. In that handler you could place your two functions.
$( "#target" ).submit(function( event ) {
event.preventDefault(); // prevents the actual sending of a form
myFunction1(); // call your first function
myFunction2(); // call your second function
});
If I understand correctly, you have both of those functions implemented already, you're just looking for a way to call them?
Also the actual changing of the text/content is done by a simple
$('#elementID').html('The new changed content'); // if it's a div or something alike
$('#elementID').val('The new changed content'); // if it's an input
I hope this answers your question :-)
I would also recommend using JQuery but if you cant all you have to do is call your JavaScript function within the first function.
function myFunction1(){
//Your code that displays a paragraph.
myFunction2();
}
function myFunction2(){
//code body of function 2
}
So if your first function is already embedded in the submit button now your code will execute by displaying the paragraph and then execute the second functions code.
But it is alot cleaner and less 'hacky' to use JQuery like Mr Frogurt expalined above.
Hope this helps.
I have a javascript function Display(args...) that modifies the content of a modal window depending on which button is pressed. The function contains other attributes that are hidden or displayed (depending on the arguments that are being passed). Where I am going crazy is that a particular div section refuses to hide/display. Let's say that initially I set it up to be hidden/display:none, then onClick is suppose to be display it; even if I invert the initial state the expected behavior does not occur. I set up the debugger and I see that is trying:
if ($('#SectionRefusingToShow').is(":visible") == false) {
$('#SectionRefusingToShow').show();
}
I see it enters the if statement but still not shown. Inspecting the DOM, its element attribute display:none was not removed. For other classes and ids the hidden are properly removed/added. I am using .show for this one given that hidden state for it did not work either!
I have had a similar problem before, and it turned out that I had multiple elements with the same ID value. Have you checked for that? jQuery can get a little fussy when you select elements by ID, and the ID is not unique (which is technically invalid, so it get's fussy for a good reason).
I have many questions based on form. I don't know the title suits or not. I created a JSP page and contains a form. It has many fields like input, select, textarea.
First is I want to count the number of fields in the form using JQuery. I tried the following.
var ln=$("#fileUpload").find('input,select,textarea').length;
alert(ln);
The form has one select box, 3 input fields and a textarea. But it was giving 0, instead of 5.(#fileUpload is the form id I want to submit)
How to get the exact number of fields?
Next is, I want to get each element in the form and find some attribute value. For examaple I want to get the name or id attribute for each element.
I would recommend using each() function:
$("#fileUpload input,select,textarea").each(function(){
console.log(this);
}
Btw: don't use alert, use console.log() instead ;)
You need to make sure that the form is loaded before your js script is launched.
To do so, wrap it in document ready like so:
$(function () {
var ln = $('#fileUpload').find('input, select, textarea').length;
alert(ln);
});
There should no problem in your code
Check that you have added the jquery and add an attribute to your form
id="fileUpload" then check
Also, check you don't have any other element having id fileUpload
like input type="file"
In your page <form id='fileUpload' ... > must be unique
Fiddle http://jsfiddle.net/qUJZf/
I am working on a project where I need to recall the fields entered in a form so I can repopulate them later. When a form has a name, I can remember it and then later use some JavaScript (document.getElementsByName(...)[0]) to access it. However, if there is no name...I'm at a loss for how to get a reference to it later.
I'm using jQuery, but am open to a JavaScript solution as well. One idea is to remember the index of the form. So, if it was document.forms[3] then later I can use the index. However, when someone submits a form, how do I know the index of the form that it is? (NOTE: I am blindly adding submit handlers to all forms when a page loads to capture the activity.)
Instead of attaching events to the submit buttons, attach it to the <form> elements directly, like this:
$("form").submit(function() {
//do something with this
//this == the form element being submitted
});
Or...in your current event handlers, use .closest() to get the closest parent <form> element:
$(":submit").click(function() {
var form = $(this).closest("form");
});
If you don't want to use an index on all form (flaky because someone may add a form in anywhere), you could use its surroundings as a reference... for example.
$('#content').parent().next().find('form')