On button click i want to fetch selected value of multiple select boxes. i can able to fetch value from array of textboxes but im not able to get select box value. it returns empty array.
$("#add_user_button").click(function(){
var username=[];
$("input[name=username]").each(function(){
username.push($(this).val());
});
var usertype=[];
$("input[name=usertype]").each(function(){
usertype.push($(this).val());
});
var ajaxdata={"UserName":username,"UserType":usertype};
console.log(JSON.stringify(ajaxdata));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="user_group">
<input type="text" id="user_username" placeholder="User Name" name="username">
<select id="user_usertype" name="usertype">
<option value="1">Admin</option>
<option value="2">Normal</option>
</select>
</div>
<div class="clone_user_input"><div id="user_group_1">
<div class="form-group">
<input type="text" id="user_username" placeholder="User Name" name="username">
<select id="user_usertype" name="usertype">
<option value="1">Admin</option>
<option value="2">Normal</option>
</select>
</div>
</div>
<button id="add_user_button">Add User</button>
Select is not input. Use:
var usertype=[];
$("select[name=usertype]").each(function(){
usertype.push($(this).val());
});
Also note that you have duplicate IDs for elements. IDs should be always unique. You can rather use same class names as an alternative to this.
Related
I have two input I need to show one of them based on the select box:
html code:
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" name="Numeric">
</div>
<div id="input_type2">
<input type="text" name="Percentage">
</div>
jQuery code:
$('#type-price').on('change',function(){
if($(this).val()=== "numeric"){
$("#input_type1").show();
$("#input_type2").hide();
}else if ($(this).val()=== "percentage"){
$("#input_type1").hide();
$("#input_type2").show();
}
});
Now it's totally fine like that but my issue I have php request when I show input_type1 then hide input_type2 the request pick up second one which is null so I need to delete the hide one at all form Dom tree!
You can empty the div which contain the input and you will have only one input in your DOM. On each change of select, it will fill the concerne div by the input html.
Also you'd used wrong selector, the # selector is for id and you have used an class in your HTML code.
The JQuery class selector is ..
function removeAll() {
$("#input_type1").html('');
$("#input_type2").html('');
}
removeAll();
$('#type-price').on('change',function(){
removeAll();
if ($(this).val() === "numeric"){
$("#input_type1").append('<input type="text" value="numeric">');
} else if ($(this).val() === "percentage"){
$("#input_type2").append('<input type="text" value="percentage">');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="" disabled selected>Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" value="numeric">
</div>
<div id="input_type2">
<input type="text" value="percentage">
</div>
Here is an example with one field.
$(function() {
$("#type-price").change(function(e) {
$(".input-type").fadeIn("slow").find("input").attr("name", $(this).val().toLowerCase());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input-type" style="display: none;">
<input type="text">
</div>
Besides some syntax problem in your jQuery class selector, Thinking about performance, It's simply better to prevent the (non-visible) input from being sent.
Shorter coding and less dom manipulation.
$('#type-price').on('change',function(){
$('.input_type1').toggle($(this).val()=="numeric");
$('.input_type2').toggle($(this).val()=="percentage");
});
//To prevent the non-visible from being posted
//Eithr we check the form using submit handler or the button and prevent the
//from being sent do our stuff then send it...
$('#myForm').submit(function() {
$('input:hidden').attr('name', '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input_type1">
<input name="inp1" type="text" placeholder="1">
</div>
<div class="input_type2">
<input name="inp2" type="text" placeholder="2">
</div>
<input type="submit" value="Send">
</form>
I need help. I have this form:
<form name="user_cause" method="post">
<div class="form-group">
<select id="subject" required="required" class="form-control" onchange="showHide()">
<option value="subject">Subject</option>
<option value="test_1">Test_1</option>
<option value="test_2">Test_2</option>
</select>
</div>
<div class="form-group">
<textarea id="subject_message" required="required"
class="form-control" rows="5" disabled>
</textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
I wish I could change the text in the disabled textarea according to the choice. how to do it with javascript?
var ourArea = document.getElementById('subject_message');
var selectSubject = document.getElementById('subject');
ourArea.textContent = selectSubject.value; // omit this if you don't want initial value to be reflected in the text area
function showHide(){
ourArea.textContent = selectSubject.value;
}
Using jQuery, $("#subject").change(function(e) { $("#subject_message").val($(this).val())});
A jQuery way:
$("#subject").change (function() {
$("#subject_message").text($("#subject option:selected").text();
});
I have forms similar to this:
<form class="submission-form" method="POST" action="/post/create/">
<input type="text" name="title">
<textarea name="post_content"></textarea>
<select name="visibility" class="form-control">
<option value="1">Public</option>
<option value="2">Private</option>
</select>
<input class="submit-button" type="button" value="Publish">
</form>
The various fields in the form are not known beforehand and can change; what is known is the fact that every form that needs processing has a submission-form class on it, and it contains a button with the class submit-button.
I'm trying to add an event listener on the input.submit-button that will traverse on the form its contained in, find all the fields, and create an object from it. For example, in the above case, the object created might look like:
{
title: "My first post",
post_content: "Hello there!",
visibility: 1
}
How should I go about doing this?
Iterate through input, textarea and select elements and create an object with properties from element name and value:
$('.submit-button').on('click', function() {
var o = {};
$(this).closest('form')
.find('input, textarea, select')
.not(':button')
.each(function() {
o[$(this).attr('name')] = $(this).val()
});
console.log(o);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="submission-form" method="POST" action="/post/create/">
<input type="text" name="title" />
<textarea name="post_content"></textarea>
<select name="visibility" class="form-control">
<option value="1">Public</option>
<option value="2">Private</option>
</select>
<input class="submit-button" type="button" value="Publish" />
</form>
References
.closest()
.not()
.each
You could use serializeArray() and then use reduce() on that array to return desired object.
$("form").submit(function(event) {
var data = $(this).serializeArray().reduce(function(r, e) {
r[e.name] = e.value;
return r;
}, {})
console.log(data)
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="submission-form">
<input type="text" name="title">
<textarea name="post_content"></textarea>
<select name="visibility" class="form-control">
<option value="1">Public</option>
<option value="2">Private</option>
</select>
<input class="submit-button" type="submit" value="Publish">
</form>
Use serializeArray() to create and array of objects for name value pairs and loop through them to create a single object.
$('form').submit(function(e){
e.preventDefault();
var obj = $(this).serializeArray()
var final= {};
$.each(obj, function(index,object){
final[object.name] = object.value;
});
console.log(final);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="submission-form" method="POST" action="/post/create/">
<input type="text" name="title">
<textarea name="post_content"></textarea>
<select name="visibility" class="form-control">
<option value="1">Public</option>
<option value="2">Private</option>
</select>
<input class="submit-button" type="submit" value="Publish">
</form>
Task:
To create a dropdown list for option values:"Name1...Name2...Name3...Others". Hence, when a user were to click on the option 'Others', it will generate an additional form fields for the user to enter and they are: "Name, Rego No., Address".
What has been done:
I have created the following dropdown list as shown:
<p>
<!--Input select box with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails">
<option value ="0" selected = "selected"> Select Name..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>
Hence, the dropdown list is able to be shown. Furthermore, I have also created the html version for the 3 additional fields as shown below:
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorSearchNameResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="Rego No." id="Rego No." value="Reg No." title="Reg No." class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
....(Identical for "Address" field)
Issue:
At this point, I am stuck at how to call the additional 3 fields when users select 'Others' from the dropdown list. I have tried to use the "if..else" condition but am stuck when I tried to input the above code within if statement.
Hence, could anyone please help? Thanks.
code edit:
<div>
<p>
<!--Input selectbox with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails" onchange = "return val(this.value);">
<option value ="0" selected = "selected"> Select Agency..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>
<!-- Set Conditional check, if user clicks Others, direct to input field: Name, Registration Number, Address-->
<div id = "extradiv" style ="display:none">
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorNameCompanyResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="RegistrationNum" id="RegistrationNum" value="Registration Num" title="Registration Num" class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
<p>
<input type="text" name="Address" id="Address" value="Address" title="Address" class="defaultValue required signupinput_txt" tabindex="9" />
<div id="searchAddressResultsContainer" class="hide searchResultsContainer"></div>
<div id="errorSearchAddressResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
</div>
</div>
<script>
function val(x)
{
if (x =="Others" )
{
document.getElementById("extradiv").style.display ="block";
}else
{
document.getElementById("extradiv").style.display = "none";
}
}
</script>
Use Jquery, put those 3 extra field in a div with id #extradiv and set its style as display:none to keep is hidden on load.
<div id="extradiv" style="display:none">
<!-- 3 extra fields -->
</div>
<script type="text/javascript">
$('#NameDetails').on('change',function(){
$('#extradiv").hide();
var changeVal = $("#NameDetails").val();
if(changeVal == "Others){
$("#extradiv").show();
});
</script>
You have to use javascript or jquery.
Just wrap your additional form elements under div and give it id e.g other_ele and also made that div display:none by default using css.
Just try that code below i have used javascript for this
First on your select tag use onchange like:
<select name ="Name" id="NameDetails" onchange="return val(this.value);">
This onchange will call val function
And writ your script like that
<script>
function val(x)
{
if(x == "Others")
{
document.getElementById("other_ele").style.display = "block";
}
else
{
document.getElementById("other_ele").style.display = "none";
}
}
</script>
Note other_ele is id of your div in which you have wrapped your additional form elements.
Hope this will work for you
I have three textboxes with the same id's in a table. I also have one dropdown on top of the table. While changing the dropdown I need to set the textbox values as same as the dropdown value.
I used the following code and I am able to change only the first textbox, others are not getting values.
function myHome() {
var zoneId = $("#funderIds").val();
$("#funder").val($("#funderIds").val());
}
<select id="funderIds" name="funderIds" onchange="myHome()" style="width: 25%;">
<option value="0">--Select--</option>
<option value="3">option1</option>
<option value="5">option2</option>
<option value="6">option3</option>
</select>
<input type="text" name="funder" id="funder" value="">
<input type="text" name="funder" id="funder" value="">
<input type="text" name="funder" id="funder" value="">
Can anyone give some advise on where I am making a mistake?
It is invalid to use same ID for more than one element, it should be unique throughout the document, thus use class instead!
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
Change your code to:
function myHome() {
var zoneId = $("#funderIds").val();
$(".funder").val($("#funderIds").val());
}
<select id="funderIds" name="funderIds" onchange="myHome()" style="width:25%;">
<option value="0">--Select--</option>
<option value="3">option1</option>
<option value="5">option2</option>
<option value="6">option3</option>
</select>
<input type="text" name="funder-1" id="funder-1" class="funder" value="">
<input type="text" name="funder-2" id="funder-2" class="funder" value="">
<input type="text" name="funder-3" id="funder-3" class="funder" value="">
Id has to be unique, try name instead with min changes:
function myHome() {
var zoneId = $("#funderIds").val();
$("input[name=funder]").val(zoneId);
}
Edited:
To get option text, use :selected:
function myHome() {
var zoneId = $("#funderIds option:selected").text();
$("input[name=funder]").val(zoneId);
}
IDs are unique identifier,they should always be unique. If you have multiple elements with same ID, ID selector ($(".funder") in your case) will return the object of first element only.
You can rather use same class and use class selector to target all the element.
HTML:
<input type="text" name="funder" class="funder" value="">
<input type="text" name="funder" class="funder" value="">
<input type="text" name="funder" class="funder" value="">
JS:
function myHome() {
var zoneId = $("#funderIds").val();
$(".funder").val(zoneId );
}
function myHome() {
var zoneId = $("#funderIds").val();
$(".funder").val(zoneId);
}
<select id="funderIds" name="funderIds" onchange="myHome()" style="width:25%;">
<option value="0">--Select--</option>
<option value="3">option1</option>
<option value="5">option2</option>
<option value="6">option3</option>