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()
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 have a form in ASP.NET MVC which contains a DropDownList where I need to serialize the text value of the currently selected option in the list, not the value of that option. Then, I need to serialize a TextArea and send those both in the same query string. I have tried to select my DropDownList text using this JQuery statement:
var _dropDown = $('#ConfigList option:selected').text().serialize();
But I get the error:
Uncaught TypeError: $(...).text(...).serialize is not a function
My Question
How do I get the text value of my dropdownlist and my textarea, and serialize them together? They are both in the same input field which I am passing in to my JQuery function that serializes them.
// Bind a handler to update the hidden input when the select changes
$("select").on("change", function() {
$("#my_hidden").val(this[this.selectedIndex].text);
}).change();
// serialize it
$("button").on("click", function() {
var res = $("#my_textarea, #my_hidden").serializeArray();
$("pre").text(JSON.stringify(res, null, 2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="my_hidden" name=my_hidden type="hidden">
<select>
<option value="FOO_VALUE">foo
<option value="BAR_VALUE">bar
</select>
<br><textarea id="my_textarea" name=my_textarea>some content</textarea>
<br><button>serialize</button>
<pre></pre>
to serialize all form values you will have to use the ID of the form, it will automatically serialize all field values to serialized form. Also if you will use .text(), it will remove all html tags if any, so make sure before adding .text() to serilize.
Now for the dropdown if you really dont need the value tag anywhere den why are you putting that. remove it and then it will automatically get the text value which is visible in the dropdown.
var serialized = $("#form_name").serialize();
I'm working on a form where I have a text field which will be changed on radio button selection.
$("#id_radio1").click(function() {
$("#multi_language").hide();
$("#single_language").show();
});
$("#id_radio2").click(function() {
$("#single_language").hide();
$("#multi_language").show();
});
Say suppose id_radio1 and id_radio2 are two radio buttons and selecting each changes the form fields differently. Now I was able to do it successfully.
My problem is when I submit the form after single language button is clicked the values are stored as multi as the values of the multi language hidden fields are submitted overridding the values of first.CAn I disable the other field without interference of the same on submission.
How can I correct this?
I'm new to such problem. I want the field to be submitted only once.i.e, if single language field is selected single should be posted and not multi(as it is working now) and when multilanguage is selected multi should be posted.How can I correct this now with the following code.
Fiddle
I have other fields common for both single and multi language in the same form as well, whose values are not changed on submission
Now, in the console I see there are two posts for the same fields in the response i.e. one for single language and other multi language.
You can format your html code as below just if you want to pass the value of the checked field to some other script
<form method="post">
<input id="id_radio1" type="radio" name="name_radio1" value="single" />
<label for="id_radio1">Single Language</label>
<input id="id_radio2" type="radio" name="name_radio1" value="multi" />
<label for="id_radio2">Multi Language</label>
<input type="submit" />
</form>
and in your Jquery Code, you can do this
$("form").on("submit", function(e) {
e.preventDefault();
console.log($("input:checked").val()); //do whatever you want with the checked value
})
Fiddle
You can use the disabled attribute to prevent an element from being sent like so:
$("#id_radio1").click(function() {
$("#multi_language").attr('disabled','disabled').hide();
$("#single_language").removeAttr('disabled').show();
});
$("#id_radio2").click(function() {
$("#single_language").attr('disabled','disabled').hide();
$("#multi_language").removeAttr('disabled').show();
});
Since they are no hidden fields but just hidden by css it should prevent it from being submitted
Why not just have one text input, then in your server-side code simply check which radio button was selected and set the value of the server-side variable accordingly before committing data.
e.g. In PHP for instance:
$language = $_POST['language'];
if($_POST['name_radio1'] == 'single'){
some_function_committing_single_language_value($language);
} else {
some_function_committing_multi_language_value($language);
}
Or have one text input and set the form's onsubmit handler with a Javascript function to insert a hidden field with a name such as 'language_single' or 'language_multi' based on the radio button selection, and set that hidden input's value to the textfield's value.
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.
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.