I have a form that on document load, loads additional fields based on previous selected values on another page. This is all done with JQuery. Rather than posting all my code in here right now, here is a basic mockup on what I am doing...
<form>
<input>
<input>
<div id="loadedcontent">
<AJAX loaded inputs on document load>
</div>
<input submit button>
</form>
<script that posts to a PHP file and retrieves the form inputs. They all have ID's. The script also has a form submit listener to process it all.>
The problem is in the listener for the form submit, I cannot access the ID's of the previously loaded AJAX elements. Is there something I am missing?
You need to add your code. It may be that when you attempt to retrieve the Id's loaded by the ajax, the Id's do not exist in the DOM. Sometimes a delay needs to be added to ensure the content exists within the DOM before you actually access it.
var i = setInterval(function() {
//some ajax call on load
clearInterval(i);
}, 500)
Related
I'm using ASP.Net (not my first choice) so all server-side controls are inside the master template's <form id='frmMain'> form.
In code that's inserted into that template, I have an <asp:UpdatePanel> and within that, a few <input type='reset' /> elements that need to only reset certain values, so I have those values in inner <form> tags.
When one of the inner forms submits, it checks its validity and then does its default GET and the outer form never has a chance to do its thing. In order to keep the validation, I thought to do:
function doSubmit(e) {
if (this.checkValidity()) {
e.preventDefault();
frmMain.submit();
}
// don't preventDefault here because validation is taking place with
// nice UI
}
$(function () {
$('form:not(#frmMain)').on('submit', doSubmit);
});
Unfortunately, triggering frmMain's submit doesn't work with UpdatePanels, and the whole page posts pack rather than doing the async jig.
So I removed the manual calling of submit() and hoped that clicking the button would cause two events, one for each form, but that is not the case. If I call preventDefault() the outer form never sees the event. If I don't call preventDefault() the inner form submits before the outer form can do anything.
Is there a way around this?
Yes, I could change the reset inputs to buttons and use javascript to reset just the values I need to, negating the need for the inner forms, but I'm a purist and want to see if it can be done the "way it was meant to" before Microsoft screwed it all up.
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')
I am wondering if it is possible to somehow get the value of a div and attach it to the form post on submit?
Using JavaScript, you can get the DIV contents and insert them into a hidden form field.
An example - a page snippet (jQuery used for simplicity, plain JS would work too):
<form id="yourform" action="/some/uri">
<input type="hidden" name="your_div_content" id="hidden_element" />
<input type="submit" />
</form>
<div id="yourdiv">
This text will be copied into the form using JS
</div>
<script>
$('#yourform').submit(function(){ /* On #yourform submit ... */
$('#hidden_element').val( /* ... set #hidden_element's value ... */
$('#yourdiv').html() /* ... to whatever is in #yourdiv . */
);
});
</script>
Of course, this will only work when JS is enabled in the browser.
You may want to use a hidden field <input type="hidden"> in your form, and then set the value of your hidden field on form submit with the innerHTML of your div.
You could use ajax. That way you could send whatever data you wanted however you wanted.
For instance (this is using mootools):
var req = new Request({url: 'somepage.php', data: 'queryStringDate'});
req.send();
There you go :)
This of cause can be done without any framework, I just don't remember the code in my head :-P
It depends what you mean by the "value of a div".
For example, you can retrieve all HTML inside the div by using document.getElementById(your_div_id_here).innerHTML
Alternatively, you can access values of the div attributes by using e.g. document.getElementById(your_div_id_here).title to access the div's title attribute.
If you intercept the submit event of your form (maybe by intercepting the click event on the form’s submit button), then you certainly can GET or POST with anything including content of an element. With vanilla HTML, however, I’m afraid it’s not possible.
Tucking values into hidden fields might also work, depends on preference. ;)
You could have a hidden input and populate it with the contents of the div before doing your submit, then it would be included.
If I'm using jQuery or JavaScript to do a post, how can I make it target an iframe rather than the current page?
jQuery.post(
url,
[data],
[callback],
[type]
)
That is the format of the jQuery post, it doesn't seem as though there is anywhere to specify the target like there is in the <form> tag.
Any ideas?
You can do this via a regular form:
<form action="targetpage.php" method="post" target="iframename" id="formid">
<input type="hidden" name="foo" value="bar" />
</form>
You can then use jQuery to submit the form:
$("#formid").submit();
Maybe you are missing the point of an AJAX request - why are you trying to specify the "target" of an asynchronous request? This makes no sense as the whole point of AJAX is that the request from the server gets sent back to the Javascript, free of page reloads or HTML destinations.
If you wanted to load the result of the request onto an iframe, you might do:
$.post('myurl', function(data) {
$('#myframe').html(data);
}, 'html');
You can solve the no-form-allowed-within-a-form problem by dynamically creating the form and appending it to the body. So you'd do something like this:
$().ready(function() {
$('body').append('<form
action="url"
method="post"
target="iframename"
id="myspecialform">
<input type="hidden" name="parameter" value="value" />
</form>');
});
That creates your iframe-updating form outside of the main form that encompasses everything else on the page. Then just call it as Josh recommended: $('#myspecialform').submit();.
here is how I did it in javascript with plain html:
var form=$("<form/>").attr({
method: "post",
action: "iframe.php",
target: "list_frame"
});
form.append($("<input/>").attr({name:"field1",value:0}));
form.append($("<input/>").attr({name:"field2",value:1}));
form.append($("<input/>").attr({name:"field3",value:2}));
form.append($("<input/>").attr({name:"field4",value:3}));
form.append($("<input/>").attr({name:"field5",value:4}));
$("body").append(form);
form.submit();
I know this question is old, but here's how I did it on ASP.Net (C#) using jQuery.
//Create the form in a jQuery object
$("<form action='/FormPostTo.aspx' method='post' target='nameofframe'></form>")
//Get the value from the asp textbox with the ID txtBox1 and POST it as b1
.append($("<input type='hidden' name='b1' />").attr('value',$('#<%= txtBox1.ClientID %>').val()))
//Get the value from the asp textbox with the ID txtBox2 and POST it as b2
.append($("<input type='hidden' name='b2' />").attr('value',$('#<%= txtBox2.ClientID %>').val()))
//Add the form to the body tag
.appendTo('body')
//Submit the form which posts the variables into the iframe
.submit()
//Remove the form from the DOM (so subsequent requests won't keep expanding the DOM)
.remove();
Just a quick note: I did the input tags like that rather than concatenating them, in case the value of the textbox had a quote (') in it. If you concatenated it in, it would mess up the HTML and it wouldn't parse correctly.
Also, this removes the form from the DOM after it's been used so you don't fill up the DOM with form elements if you post to the iFrame multiple times.
One slight change that you could make, would be to create the form element if it doesn't exist and then just reference it by ID if it already exists and reuse it.
Here's what I did to get around the issue of having a form within a form on a asp.net page when I needed to submit data to a remote page via a form ideally using AJAX / jQuery.
I created variables to capture the asp.net form name, target,
action, method, etc.
I held that information from the form in
those variables and then changed the form itself using jQuery to do
what I needed it to do.
Then I posted the form via AJAX (because I needed a form to post to a seperate page dynamically so the other
page could GET the info).
Finally, I changed the asp.net form back
to the way it was so the rest of the page could work correctly.
This seems to have resolved my need for a similar solution.
You're missing the point of AJAX. If you want to post something to an iframe, you could do this by a simple form, posted by JavaScript or by the usual way: a submit button.