I have a problem with map(). I try get all variables from my form but I can't have multiple types of element (input, select, textaera)
<input type="text" name="ctrl[]" />
<select name="ctrl[]" />
<textarea name="ctrl[]" />
var values = $("select[name='ctrl\\[\\]']").map(function(){
return $(this).val();
}).get();
This works fine with input but not for select and textaera. Can you help me?
You have to remove the select from the selector:
var values = $("[name='ctrl[]']").map(function(){return $(this).val();}).get();
Above code will select all type of the input which will have the name ctrl[].
$("select[name='ctrl\\[\\]']") is bounding you to select only select box values with the name ctrl[].
var values = $("[name='ctrl[]']").map(function() {
return $(this).val();
}).get();
console.log(values);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="ctrl[]" value="input_value" /><br>
<select name="ctrl[]">
<option value="selectd_value">option 1</option>
</select><br>
<textarea name="ctrl[]">textarea_value</textarea>
Related
How to fill the complete form input fields from Database based on the value selected from the Dropdown
Example: In a Application, by selecting a client name it fills the complete form input fields with the details stored in the Database.
Sample Code:
<select name="client">
<option value="">-- Select Client Name -- </option>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<input name="phone" type="text" value="">
<input name="email" type="text" value="">
<input name="city" type="text" value="">
<textarea name="address"></textarea>
All the about input fields need to be filled with values on client name selection.
EDIT:
I tried with AJAX but couldn't able get the particular variable from the file... below is my code:
<script>
$(document).ready(function() {
$('#client').change(function() {
alert();
var selected = $(this).find(':selected').html();
$.post('get_details.php', {'client': selected}, function(data) {
$('#result').html(data);
});
});
});
</script>
In the get_details.php file I am storing different values in different variables, but I didn't understand how to get them to individual variable to main page.
This is a just a basic jQuery example that calls itself (the top portion of the script is active when a $_POST is made), which I have named index.php as indicated in the url of the jQuery AJAX. You can use two separate pages to do this if you want. Just separate out the PHP from the HTML/Javascript and change the url: '/index.php':
<?php
// This is where you would do any database call
if(!empty($_POST)) {
// Send back a jSON array via echo
echo json_encode(array("phone"=>'123-12313',"email"=>'test#test.com','city'=>'Medicine Hat','address'=>'556 19th Street NE'));
// Exit probably not required if you
// separate out your code into two pages
exit;
}
?>
<form id="tester">
<select name="client" id="client">
<option value="">-- Select Client Name -- </option>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<input name="phone" type="text" value="">
<input name="email" type="text" value="">
<input name="city" type="text" value="">
<textarea name="address"></textarea>
</form>
<!-- jQuery Library required, make sure the jQuery is latest -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// On change of the dropdown do the ajax
$("#client").change(function() {
$.ajax({
// Change the link to the file you are using
url: '/index.php',
type: 'post',
// This just sends the value of the dropdown
data: { client: $(this).val() },
success: function(response) {
// Parse the jSON that is returned
// Using conditions here would probably apply
// incase nothing is returned
var Vals = JSON.parse(response);
// These are the inputs that will populate
$("input[name='phone']").val(Vals.phone);
$("input[name='email']").val(Vals.email);
$("input[name='city']").val(Vals.city);
$("textarea[name='address']").val(Vals.address);
}
});
});
});
</script>
When you made ajaxCall return data in json format like
json_encode(array("phone"=>'123-12313',"email"=>'test#test.com','city'=>'Medicine Hat','address'=>'556 19th Street NE'));
above shown
then parse it in jQuery and put the value in different selectors like
var Vals = JSON.parse(response);
// These are the inputs that will populate
$("input[name='phone']").val(Vals.phone);
above shown.
I have a form and I want to set the values of the input fields on change of a form select. On change of the select ajax jquery runs and calls a PHP file with get method. But I don't know how to return the values from PHP (array or echo or any other way) and how to set them to the input values.
Using jQuery, this could be desired solution:
<form name="frm">
<input type="text" name="age" id="txtAge" />
<input type="text" name="country" id="txtCountry" />
<select name="name" id="selName">
<option value="Ceyhun Ganioglu">Ceyhun Ganioglu</option>
<option value="ABC">ABC</option>
<option value="CED">CED</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('select#selName').change(function(){
var name = $(this).val(); // selected option's value
$.getJSON("<URL_TO_PHP_SCRIPT>", { name: name }, function(data){
// on success, put returned value in textbox
// return data is in JSON (note, I am using `.getJSON` now)
$("#txtAge").val(data.age);
$("#txtCountry").val(data.country);
});
});
});
</script>
Your PHP Code could be:
<?php
echo json_encode(array('age' => 21, 'country' => 'US')); // you need to return on the basis of name, :)
?>
Read Ajax doc for jQuery $.getJSON here: http://api.jquery.com/jquery.getjson/
Other Ajax functions in jQuery: http://api.jquery.com/jquery.ajax/
I want to create two select boxes: One that gets it's options from a database and the other that gets it's options depending on the value of the first select box.
My current code is below (I got the value from the first box with an alert, but don't know how to get it in the sql query for the second box). My document name is tutorial.php and I'm not using any other files except for the database functions, which are in include/config.php.
I've followed dozens of tutorials and stack overflow answers, but I can't get it to work. How can I get the select values to the php code on the same page?
jquery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( "#shoot" ).change(function(){
id_firstSelect = $("#shoot").val();
loadSecondSelect(id_firstSelect);
});
function loadSecondSelect(first_id)
{
$("#model").ready(function(e)
{
$.get(
route.php, //Filter your select
params, // In this case your id
function(result)
{
$("#model").empty();
$("#model").append('<option value="0">-- Select --</option>');
if(result.response['id_second'].length) // this receive your data
{
for(var i=0, len=result.response['id_2'].length; i<len; i++)
{
$("#model").append('<option value="' + result.response['id_2'][i] + '">' + result.response['name_2'][i]+'</option>');
}
}
},
"json");
});
}
});
</script>
form with php functions:
<form action="" method="POST" enctype="multipart/form-data">
<div>
<select name="category">
<option value="paard" selected>Paarden</option>
<option value="hond">Honden</option>
<option value="mens">Mensen</option>
<option value="eigen">Eigen werk</option>
</select>
<input type="file" name="files[]" multiple id="file"/><p>
Ophalen uit database shoots:
<select name="shoot" id="shoot">
<?php
$values = mysql_query("SELECT distinct name FROM shoots") or die(mysql_error());
//$numrows = mysql_num_rows($values);
while ($result=mysql_fetch_array($values)){
echo "<option value='".$result['name']."'>".$result['name']."</option>";
}
?>
</select><p>
<select name="model" id="model"></select>
<label class="radio">Portfoliomateriaal</label>
<input type="radio" name="folio" value="TRUE" /> <span>Ja</span>
<input type="radio" name="folio" value="FALSE" checked /> <span>Nee</span><p>
<input type="submit" value="Upload" id="submit" />
</div>
</form>
In the first select, you could call a function with the id of the select to filtrate the data of the second select like:
in the first select you could do this to fill the second with the first id:
$( "#id_firstSelect" ).change(function()
{
id_firstSelect = $("#id_firstSelect").val();
loadSecondSelect(id_firstSelect);
}
and call the function to load the second select
function loadSecondSelect(first_id)
{
$("#id_secondSelect").ready(function(e)
{
$.get(
route.php, //Filter your select
params, // In this case your id
function(result)
{
$("#id_secondSelect").empty();
$("#id_secondSelect").append('<option value="0">-- Select --</option>');
if(result.response['id_second'].length) // this receive your data
{
for(var i=0, len=result.response['id_2'].length; i<len; i++)
{
$("#id_secondSelect").append('<option value="' + result.response['id_2'][i] + '">' + result.response['name_2'][i]+'</option>');
}
}
},
"json");
});
}
I have a HTML form with two select elements(listboxes) and two buttons to move the data from one listbox to another(using JavaScript):
<form action="page.php" method="post">
<select name="select1" multiple="yes">
<option value="1">Left1</option>
<option value="2">Left2</option>
<option value="3">Left3</option>
</select>
<input type="button" value="-->" onclick="moveOptions(this.form.select1, this.form.select2);" /><br />
<input type="button" value="<--" onclick="moveOptions(this.form.select2, this.form.select1);" />
<select name="select2" multiple="yes">
<option value="4">Right1</option>
<option value="5">Right2</option>
</select>
<input type="submit" name="submit" value="Submit">
</form>
When I hit the Submit button I want to get all the values stored in the listboxes.
foreach ($_POST['select1'] as $value)
{
//save data to database
}
This just gets one selected value(if there was one).
I managed to get multiple values (if they are selected) by putting a [] after the name of the select.
<select name="select1[]" multiple="yes">
But this still doesn't gets the unselected values, and this way the data moving JavaScript function doesn't works either.
Before the form is submitted just select all the options:
document.getElementsByName('submit')[0].onclick = function () {
var s1 = document.getElementsByName('select1')[0];
for(var i=0; i < s1.options.length; i++){
s1.options[i].selected = true;
}
};
var select1 = document.getElementById('select1');
var values = new Array();
for(var i=0; i < select1.options.length; i++){
values.push(select1.options[i].value);
}
To pass the array from page to page, go here
I am not sure why you want to do this but you can call this Jquery code before submitting the form
and add the array value to a hidden input to get to be posted
$("#Submit_button").click ( function() {
var arr = new Array;
$("#select1 option").each ( function() {
arr.push ( $(this).val() );
});
$(#hidden_input).val(arr);
});
I'm trying to get a list going.
I have an empty input box in which I want to store a list: Mary, Kate, Brock
Now I have a select list with those three names in it. I want to know how can I transfer the name clicked from the select list into the input box. If I click a second name, add a comma to separate the one from the previous one.
Appreciate your help. I have no idea to where/how to even start this :(
How about:
<input type="text" id="name" name="name" />
<select name="names" id="names">
<option value="Mary">Mary</option>
<option value="Kate">Kate</option>
<option value="Brock">Brock</option>
</select>
<script>
$(document).ready(function() {
$("#names").change(function() {
name = $(this).val();
current = $("#name").val();
if (!$("#name").val()) {
$("#name").val(name);
} else {
if (current.indexOf(name) == -1) {
$("#name").val(current + ', ' + name);
}
}
});
});
</script>
Adds new name to end of list, only adds a comma when there is more than one name and duplicates are now allowed.
Well you can get the value from an input element with $('#the_id').val();, and you can manipulate the value of an input element in the same way: $('#the_id').val('new value');. Combine that with the .click handler and you should be all set:
$('#selector').click(function(){
var $names = $('#names')
$names.val($names.val() + ', ' + $(this).val());
});
Try use change event:
$('#listbox').change(function(){
var selectedName = $('#listbox option[value='+$(this).val()+']').text();
$('#input-for-insert').append(selectedName);
});
I think you make yourself comma separation)
<input type="text" id="name" name="name" />
<select name="names" id="names">
<option value="Mary">Mary</option>
<option value="Kate">Kate</option>
<option value="Brock">Brock</option>
</select>
<script>
$(document).ready(function()
{
// When the names selection changes
$("#names").change(function()
{
// Get the new name from this selection list
newName = $(this).val();
// Get any names currently in the input box
currentName = $("#name").val();
// Change the value of the name box by adding the newName followed by a comma
// followed by the current names
$("#name").val(newName + ", " + currentName);
});
}
</script>