If I pass a form to a Javascript validation function, what is the syntax to access the values in the fields if I don't know the form's name?
I pass it in the HTML like so:
<form method=... action=...>
<input type="text" name="qty-box" value="100" onkeydown="if (event.keyCode == 13) addBoxSubmit(this);" />
</form>
Now in my javascript function like so:
function addBoxSubmit (myForm) {
//how to access the form values none of these methods worked,
//I need to know the correct syntax
//I tried myform.['qty-box'].value;
//I tried myForm['qty-box'].value;
//I tried document.myForm.['qty-box'].value;
//I tried document.myForm['qty-box'].value;
}
For this application I will have many forms on the page that I want to use with my validation function, essentially each row on a data table is its own form. I can't just access the forms by name because they are dynamically generated serialized names.
The problem in this case is that I'm not passing the form to the validation function, but merely the element on the form. If you have the element though you can access the form given the element with this syntax:
var formName = myElement.form.name;
See: How to get the form parent of an input?
You can set up a loop in Javascript, and iterate over all forms on the page: document.forms[i]. And then check the values on each form.
Related
I have 3 different forms on a single page where the user can switch between using JS. The forms represent different information and only one can be submitted at a time where the user is then redirected to a different page based on the form they selected. The issue is that I have 2 input fields that are common to these forms so they are outside the forms. I am able to submit them alongside a form if I set the :
<input id="default" form="form1">
value.
So I figured it would be a simple thing to just add a function in each script where I hide/show the forms to also change that parameter to the form I want submitted however it doesn't seem to work.
function form2Search() {
$('#form2Section').show();
var input1 = document.getElementById('default');
input1.form = "form2";
}
I have something like this but it doesn't change the form parameter.
You need to actually give your input an ID of default so you can target it:
<input form="form1" id="default">
use setAttribute
function form2Search() {
$('#form2Section').show();
var input1 = document.getElementById('default');
input1.setAttribute("form", "form2");
console.log(input1.getAttribute("form"))
}
form2Search();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="default" form="form1">
I am creating custom input field in html.Now i am facing problem how to submit data by using these custom fields. Custom field may be a radio option, may be it a select option, text field etc etc using can write name of that field by his own choice i want to know how to submit data of that fields in php and jquery.
<div id="custom fields">
//custom fields data
</div>
Is there any way to submit whole div fields with value ..If i write name in input text field and submit then my complete input filed and its value will save in database? when i retrieve these fields it will show input with value?
If you want to fetch multiple values than take a form else go for jQuery selector.
For multiple values (includes every types of DOM elements)
HTML :- <form id="formID"> ...... </form>
Access the form elements by using jQuery serialize function
NOTE :- serializeArray creates an array (not a "json array" -- there is no such thing); you can test this yourself with console.log($("#formID").serializeArray()). On the other hand, serialize creates a query string that's meant to be part of an HTTP request. Both representations are equivalent in the sense that using appropriate code you can convert one to the other without any ambiguity.
Example :- $("#formID").serialize(); OR $("#formID").serializeArray();
For single value
HTML :- <input id="name">
Javascript :- document.getElementById("name");
jQuery :- $("#name").val();
<div id="customfields">
//custom fields data
</div>
<script type="text/javascript">
setInterval(function () {
document.getElementById("customfields").value = document.getElementById("customfields").innerHTML;
}, 5);
</script>
You cannot submit fields in between div tag. Please use form tag to submit fields.
<form></form>
Are you find this?
$( "form" ).serialize()
I am submitting a form using ajax. In the form user can create input fields dynamically and then input data into them. I want that when form is submitted I get all the instances of input fields and then place there values in an array to pass to ajax function. How do I do that?
Here is my HMTL code snippet:
<input type="text" name="movies[]" >//user can create as many fields dynamically as they want to and then submit the form.
How do I get the values of all input fields named movies[]?
Here is my jquery code for form:
$("#subscription").submit(function(){
//How to get the all the input fields named movies[] values here?
$.ajax({
//Form submission logic using ajax here
});
});
You can get the data in an array as follows:
var movies = $('input[name="movies[]"]').map(function(){
return this.value;
}).get();
now you can pass your movies variable in in ajax function like:
$.ajax({
//Submit form here and pass your movies variable along other data you want to pass
});
Hope that helps.
I have no idea how to solve the Problem maybe some one can help.
I have a dynamic form that duplicate pices of the form depending on the user input.
So i cant use ids because the will be not uniq (Jquery Val. plugin).
I cant use classes because the are used for layout things ...
I cant use names because the are used to post in an array ...
So where to hook up the validation ?
Some one have tips for me ?
Thank you !!!
I am assuming that you have same validation type for each input group, and I am sure that you generate a new name for the new input right?
When you duplicate the input with name="field" .. make the duplicated name="field-2"
In jQuery use start with selector to validate these fields
$( "input[name^='field']" ) // This will match field and field-2
More Advanced Method:
If you need to access these dynamic fields. You will need to generate your own data-Anything
When you have an input such as
<input type="text" name="field" data-order="0" data-type="mytype" data-duplicated="FALSE">
The duplicated can be like this
<input type="text" name="field2" data-order="1" data-type="mytype" data-duplicated="TRUE">
Then access the second one like this in jQuery
$("input").each(function(index){
if($(this).data("type") == "mytype" && $(this).data("order") == 0){
// validate
}
});
To access all duplicated using order or duplicated field. you can use what you want.
$("input").each(function(index){
if($(this).data("type") == "mytype" && $(this).data("order") > 0){
// validate
}
});
So, basically you can define your data-attributes as the way you want dynamically, and access them by looping through the current inputs in the HTML page. When you find the input apply the validation function immediately.
I do not know why the following line will not function properly:
$('form[name="updateNetwork"]').unbind('submit').submit();
I can submit my form with
$("form").unbind('submit').submit();
However doing so will not pass the name attribute of the form which my backend code must identify in order to properly process the form submission. Any assistance would be greatly appreciated.
Thanks
It seems that you have only one form in your page, and that the only reason you're trying to select it with the name attribute in jQuery is so that jQuery will send the name of the form to the server.
Well, that won't work. Once you get a reference to your form via jQuery, it doesn not matter which selector you had used. If what you want is to send a name parameter to your backend code with the form name, use a hidden input inside the form:
<input type="hidden" name="form-name" value="updateNetwork" />
Then, you can get a reference to the form any way you want. The best one, as stated by #anvlasop, is to give your form an id attribute.
EDITED
You were creating the jQuery form object in a wrong way. If you have this:
<input type="submit" name="updateNetwork" />
then you can't do this:
$('form[name="updateNetwork"]).submit();
I assume that you're calling this method, submit(), inside the event handler of the submit event. Don't do that! What you should do, is to only canll preventDefault if there is an error in the validation, and let the form be sent otherwise:
//Never do this:
$('form').bind('submit', function(e) {
var valid;
//code to validate
e.preventDefault();
if (valid) $('form').unbind('submit').submit();
});
Do this:
$('form').bind('submit', function(e) {
var valid;
try {
//code to validate
} catch (error) {
valid = false;
}
if (!valid) e.preventDefault();
});
This also will prevent the sending of the form is there is an exception during validation.
You can give an id to your form. Try something like this html code:
<form id='form_id'>
//your form elements here...
</form>
Then, with jQuery you can have a reference to the form like this:
$("#form_id").unbind('submit').submit();