I have a dynamic form where user can choose the number of inputs. I don't know how many input the form could have and I'd like to store the results in an array.
Here my HTML :
<select name="number-children" id="number-children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
My jQuery :
$("#number-children").change(function () {
var str = "";
var count = Number($("#number-children option:selected").val());
for (var i = 0; i < count; i++) {
str += '<label class="col-sm-2 control-label" for="child-'+i+'">Child ' + i
+ '</label> <div class="col-sm-10"><input type="text" name="child-'+i+'" class="form-control" id="child-'+i+'"></input></div>';
}
$("#children").html(str);
});
How can I add each input's value into an array to collect it in a post php request ?
Thanks !
just Change
<input type="text" name="child-'+i+'" class="form-control" id="child-'+i+'"></input>
to
<input type="text" name="child['+i+']" class="form-control" id="child-'+i+'"></input>
Change :
$("#children").html(str);
To :
$("#children").append(str);
The easiest way to get all children in 1 array, is to use an array in html:
str += '<label class="col-sm-2 control-label" for="child-'+i+'">Child ' + i
+ '</label> <div class="col-sm-10"><input type="text" name="child[]" class="form-control" id="child-'+i+'"></input></div>';
^^ here
Now when you send the form, you will have all values as an array in $_POST['child'] so you can easily loop over them regardless of the number.
Related
I have a problem about select function. I have two file, one is frontend, one is backend. How I can make the select function to link with backend file?
Below is my coding:
Frontend file (user_list.php) ?f is represent backend file -
<script>
$("#merchant_type").click(function(){
$.ajax({
type: 'POST',
url: "?f=user_list",
if($("#merchant_type option:selected").text() == "Please Select"){
$("#merchant_id").val('Please Select');
}
});
});
</script>
Backend file (user_list.php)
<label for="cp8" class="control-label col-lg-4">Merchant</label>
<div class="col-lg-5">
<select class="form-control required" id="merchant_id" name="merchant_id">
<option value="" selected>Please Select</option>
<!--<option value="0" selected>All</option>-->
<?php
$sql_branch = 'SELECT * FROM merchant_list;';
$arr_branch = db_conn_select($sql_branch);
foreach ($arr_branch as $rs_branch) {
echo '<option value="' . $rs_branch['id'] . '">' . $rs_branch['shop_name'] . '</option>';
}
?>
</select>
</div><br><br><br>
<label for="cp8" class="control-label col-lg-4">Merchant Types</label>
<div class="col-lg-5">
<select class="form-control required" id="merchant_type" name="merchant_type" disabled>
<option value="0" selected>Please Select</option>
<option value="1">Event Sponsored</option>
<option value="2">Normal Merchant</option>
</select>
</div><br><br><br>
My output select option is below:
For example:
First I choose the Merchant option is "PALVO", then I choose the Merchant Types is "Event Sponsored". After that, if I want go back the Merchant to change other option, the Merchant Types will automatically turn to "Please Select" option. Now the select function can't work because can't link to the backend file.
On change merchant,merchant type will change to default
$(document).on("change","#merchant_id",function(){
$("#merchant_type").val('0');
})
Here Default value for merchant type is 0
This code is displaying the dropdown value in textbox on selection. But i want to display my own values in textbox instead of those default values(Default values of dropdown). how could i do that thing . I have a text box with id "#amount".
This is HTML code:
<select id="d-name" class="form-control" name="menu">
<option value="Left Chest">Left Chest</option>
<option value="Simple back">Simple back</option>
<option value="Complex back">Complex back</option>
</select>
<input type="text" id="amount" />
This is javascript code:
jQuery('#d-name').change(function(e){
var selectedValue = jQuery(this).val();
jQuery("#amount").val(selectedValue);
});
You can use some conditions -
var selectedValue = jQuery(this).val();
var amount = '$0';
if(selectedValue == 'Left Chest')
amount = '$20';
else if (selectedValue == 'Simple back')
amount = '$30';
...
jQuery("#amount").val(amount);
You can also use switch cases.
You can also change the amount by using switch case:
jQuery('#d-name').change(function(e){
var selectedValue = jQuery(this).val();
switch(selectedValue) {
case "Left Chest":
amount = "$20"; // amount which u need
break;
case "Simple back":
amount = "Simple back"; // or amount if u need
break;
case "Complex back":
amount = "Complex back"; // or amount if u need
break;
default:
amount = "";
}
jQuery("#amount").val(amount);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="d-name" class="form-control" name="menu">
<option value="Left Chest">Left Chest</option>
<option value="Simple back">Simple back</option>
<option value="Complex back">Complex back</option>
</select>
<input type="text" id="amount" />
Try this.
<select id="d-name" class="form-control" name="menu">
<option value="$20">Left Chest</option>
<option value="Simple back">Simple back</option>
<option value="Complex back">Complex back</option>
</select>
https://jsfiddle.net/x6f3k165/1/
Try,
<select id="d-name" class="form-control" name="menu">
<option>Please select...</option>
<option value="$20">Left Chest</option>
<option value="Simple back">Simple back</option>
<option value="Complex back">Complex back</option>
</select>
<input type="text" id="amount" />
<script type="text/javascript">
$('#d-name').change(function(e){
var selectedValue = $(this).val();
$("#amount").val(selectedValue);
});
</script>
I'm having some issues with the code that i wrote up to add and remove fields to a form. I currently have a jquery script that is working on another group of fields that require the same functionality, but for some reason this second Jquery i have set up is only adding the fields and not removing them here is the code.
HTML:
<label for="EmergeContactType">Emergency Contacts</label>
<hr>
<div class="addcon">
<p>
<label for="EmergeContactType">Affilation</label>
<select name="properties[EmergContactType]">
<option value="1">Primary</option>
<option value="2">Secondary</option>
<option value="3">Doctor</option>
<option value="4">Aunt</option>
<option value="5">Uncle</option>
<option value="1">Babysitter</option>
<option value="2">Caregiver</option>
<option value="3">Grandmother</option>
<option value="4">Grandfather</option>
<option value="5">Step-mother</option>
<option value="5">Step-father</option>
</select><br>
<label for="EmergeContactType">Name</label><br>
<input type="text" size="20" class="emerg" name="properties[EmergencyName]" align="right" /><br>
<label for="EmergeContactType">Number</label><br>
<input type="text" width="15" maxlength="15" class="emerg" name="properties[EmergContactNum]" pattern="[789][0-9]{9}" align="right"/><br>
</p>
</div>
Add Contact
Script:
$(function() {
var plusDiv = $('#addcon');
var y = $('#addcon p').size() + 1;
$('#addContact').on('click', function() {
$('<p>'+
'<label for="EmergeContactType">Affilation</label>'+
'<select name="properties[EmergContactType'+ y +']">'+
'<option value="1">Primary</option>'+
'<option value="2">Secondary</option>'+
'<option value="3">Doctor</option>'+
'<option value="4">Aunt</option>'+
'<option value="5">Uncle</option>'+
'<option value="1">Babysitter</option>'+
'<option value="2">Caregiver</option>'+
'<option value="3">Grandmother</option>'+
'<option value="4">Grandfather</option>'+
'<option value="5">Step-mother</option>'+
'<option value="5">Step-father</option>'+
'</select><br>'+
'<label for="EmergeContactType">Name</label><br>'+
'<input type="text" id="EmergencyName" class="textbox" name="properties[EmergencyName'+ y +']" /><br>'+
'<label for="EmergeContactType">Number</label><br>'+
'<input type="text" id="EmergContactNum" class="textbox" name="properties[EmergContactNum'+ y +']" /><br>'+
'Remove Contact</p>').appendTo(plusDiv);
y++;
return false;
});
plusDiv.on('click', '.remCon', function() {
if( i > 2 ) {
$(this).parents('p').remove();
y--;
}
return false;
});
});
JFiddle
http://jsfiddle.net/4SVXt/23/
Thanks in advance
It's because you're calling to remove the parent p of #addcon. You don't have an element with that id, hence no parent p so nothing gets removed in this statement: $(this).parents('p').remove();
EDIT :
UPDATED EXAMPLE
I felt like your code was a little heavy so I made some changes that should make this more efficient. Instead of rewriting the form in the code we just clone() it, then append the form to the div containing the forms. We then assign a remove button to each form that will remove its own form. The code is shorter and much more portable.
$('.addContact').click(function(e) {
e.preventDefault();
var clonedForm = $('form[name="add_contact"]:first').clone(); // clone the form
$('.addcon').append(clonedForm); // append the form to the div
var removeLink = 'Remove Contact'; // create a remove link
$('form[name="add_contact"]:last').append(removeLink);
});
$('.addcon').on('click', '.removeContact', function(e) { // use on() to delegate
e.preventDefault();
$(this).closest('form').remove();
});
References:clone() append() on()
I've got an HTML form that has some static fields and some fields that are dynamically added with javascript. It looks sort of like this
<html>
<script type="text/javascript">
window.onload = function()
{
var select = document.getElementById("select");
var texts = document.getElementById("texts");
select.onchange = function()
{
var val = select.options[select.selectedIndex].value;
texts.innerHTML = "";
for(i=0; i < val; i++)
{
//texts.innerHTML += '<div><input type="text" name="t_' + i + '" value="select_' + i + '" /></div>';
texts.innerHTML += i + '<div><input type="text" name="t_' + i + '" /></div>';
}
}
}
</script>
<body>
<form method="POST" action="connection.php">
Question:<br>
<textarea name="question" cols="35" rows="5"></textarea><br>
<select id="select" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<div id="texts"></div>
<input type="submit" name="Submit" value="Submit" >
</form>
</body>
</html>
when the user clicks it adds a text box field. How does the data stored into the database.Kindly suggest me an idea what are the resources used to do this .Thanks in advance
Good day Shashak
In order to submit the data of your form into the database, regardless of the javascript of the form the data should be passed using in your case the POST method to a script 'connection.php' in your case.
This script should contain a way to connect to your database followed by the logic that will validate your data and then at the end if the validation is successful a database query that will INSERT the data into your database.
Which is your level of understanding when it comes to PHP or any other server-side scripting language and databases? - I will be able to give you more information if I know what you know.
I think instead of giving the textbox the name format t_1 , t_2 you can give it as an array like below
<html>
<script type="text/javascript">
window.onload = function()
{
var select = document.getElementById("select");
var texts = document.getElementById("texts");
select.onchange = function()
{
var val = select.options[select.selectedIndex].value;
texts.innerHTML = "";
for(i=0; i < val; i++)
{
//texts.innerHTML += '<div><input type="text" name="t_' + i + '" value="select_' + i + '" /></div>';
texts.innerHTML += i + '<div><input type="text" name="txt_name[]" /></div>';
}
}
}
</script>
<body>
<form method="POST" action="connection.php">
Question:<br>
<textarea name="question" cols="35" rows="5"></textarea><br>
<select id="select" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<div id="texts"></div>
<input type="submit" name="Submit" value="Submit" >
</form>
</body>
</html>
PHP
It will post data like this:
Suppose you select option 2.
$inputs = $_REQUEST['t']; // change the name like this name[]
$textarea = $_REQUEST['textarea'];
$selectbox = $_REQUEST['select']; // you should define the name of the select box as i used 'select'
insert into mysql
$conn = mysql_connect('localhost', 'db user', 'db password');
mysql_select_db('database name');
for($i=0; i<count($inputs); $i++) {
$sql = "insert into <table name> (textarea, inputs) values ($inputs[$i], $textarea)";
mysql_query($sql);
}
it will store each row as per your selection of input text boxes.
Note: Modify the query as per your requirement.
I have a form with 2 dropdowns, 'Type' and 'Level', eg
Type
-----
Hotel
Restaurant
Casino
Level
-----
1
2
3
And a submit button which shows the price based on whichever options are selected in the dropdown. The price is calculated by some basic maths on the fly.
How can I do this using jquery?
Is it using onchange() or something?
$("#button_id_here").val("$your_amount_here");
If you want it to update automatically, bind it to the change event in the select/dropdowns
$("#select_id_here").change(function(){
//"basic maths"
$("#button_id_here").val("$your_amount_here");
});
You want more help, we would need to see code.
HTML:
<form>
<fieldset>
<p>
<label for="selectType">Type:</label>
<select id="selectType" name="type">
<option value="Hotel" data-cost="40">Hotel</option>
<option value="Restaurant" data-cost="80">Restaurant</option>
<option value="Casino" data-cost="35">Casino</option>
</select>
</p>
<p>
<label for="selectLevel">Level:</label>
<select id="selectLevel" name="level">
<option value="1" data-cost="0">1</option>
<option value="2" data-cost="15">2</option>
<option value="3" data-cost="30">3</option>
</select>
</p>
<p>
Total Cost: $<span id="cost">0</span>
</p>
<p><input type="submit" value="Go!"></p>
</fieldset>
</form>
jQuery:
$(function() {
$("#selectType, #selectLevel").change(function() {
var type = $("#selectType"),
level = $("#selectLevel"),
cost = $("#cost"),
typeCost = type.find(":selected").data('cost'),
levelCost = level.find(":selected").data('cost'),
total = typeCost + levelCost;
cost.html(total);
}).change(); // invoke the .change() trigger
});
See it in action here
You might want to also set something like "data-multiplier" for the level... whereas level 2 may have a 1.5x multiplier, and level 3 may have a 2x multiplier. You'd have to adjust the jQuery accordingly as well (total = typeCost * levelCostMultiplier, for example).
You can check if a select list has changed via jQuery's change() function.
Here's a way to do it:
HTML:
Type
<select name="type" id="type">
<option value="hotel" selected>Hotel</option>
<option value="restaurant">Restaurant</option>
<option value="casino">Casino</option>
</select>Level
<select name="level" id="level">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="result"></div>
jQuery:
var result = 1;
$("#type").change(function () {
var val = $(this).val();
$("#result").html("Type is " + val + ", level is " + $("#level").val());
});
$("#level").change(function () {
var val = $(this).val();
// Some basic math
result = parseInt(val) * 5;
$("#result").html("Type is " + $("#type").val() + ", level is " + val + ", result: " + result);
});
And the relevant jsfiddle:
http://jsfiddle.net/y2s4v/1/