I am trying to take user inputed values and add them to a list. I need to check my list to see if it exists first. I am failing at step one, how do I add the value to the list?
This is my code:
HTML:
<form action="">
<div class="device_item">
<label for="dev_name">Device Name</label>
<input id="dev_name" type="text">
</div>
<div class="device_item">
<label for="dev_name">Device Type</label>
<input id="dev_type" type="text">
</div>
<div class="device_item">
<label for="dev_os">Device OS</label>
<input id="dev_os" type="text">
</div>
<div class="device_item">
<div class="device_info">
<div class="device_info_header">
<label>Device Information Header</label>
<div>
<select multiple="multiple" id="lstBox1" name="device_info_header">
<option value="net_info">Network Info</option>
<option value="os_info">OS Info</option>
<option value="drive_info">Drive Info</option>
<option value="time_dif">Time Difference Info</option>
</select>
</div>
<div id="arrows">
<input type='button' class="delete" value=' < ' />
<input type='button' class='add' value=' > ' />
</div>
<div>
<select multiple="multiple" id="lstBox2" name="device_info_header"></select>
</div>
<input type="text" name="other_info" id="dev_info_other_text" style="display:none;">
<div class="clear_both" />
<div class="other_ops">Other:
<input id="other_field" type="text" />
<input type="button" class="add2" value=' > ' />
</div>
<br>
<br>NEXT BUTTON (creates headers or dictionary keys) TAKES YOU TO:
<br>
<br>TITLE (eg. Net Info, or OS Info)
<br>Key:
<input type="text">
<br>Value:
<input type="text">
<br>Add more button
<br>
<br>next button (loop through the headers/keys).
<br>
<br>finally, a submit button</div>
</div>
</div>
</form>
JS
$(document).ready(function () {
$('.add').click(function (e) {
var selectedOpts = $('#lstBox1 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox2').append($(selectedOpts).clone());
e.preventDefault();
});
$('.delete').click(function (e) {
var selectedOpts = $('#lstBox2 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$(selectedOpts).remove();
e.preventDefault();
});
$('.add2').click(function (e) {
var other_field_str = $('#other_field').val();
alert(other_field_str);
$('#lstBox2').append(other_field_str);
e.preventDefault();
});
});
I also have the code on this fiddle: http://jsfiddle.net/jdell64/8qsda/1/
UPDATED FIDDLE WITH FULL SOLUTION: http://jsfiddle.net/jdell64/8qsda/
You need to create an <option> element containing the Other input.
$('.add2').click(function (e) {
var other_field_str = $('#other_field').val();
alert(other_field_str);
var other_field = $('<option>', {
value: other_field_str,
text: other_field_str
});
$('#lstBox2').append(other_field);
e.preventDefault();
});
FIDDLE
Related
I am trying to do the following:
I have drop down menu with four options in it. When I choose Shipped a text box should enabled. So I tried the following:
<div class="col-md-3">
<select class="form-control" id="ostatus" name= "ostatus">
<option value="Uploaded" <?php if ($dispatch_status == "Uploaded") echo "selected='selected'";?> >Uploaded</option>
<option value="Processing" <?php if ($dispatch_status == "Processing") echo "selected='selected'";?> >Processing</option>
<option value="Dispatched" <?php if ($dispatch_status == "Dispatched") echo "selected='selected'";?> >Dispatched</option>
<option value="Shipped" <?php if ($dispatch_status == "Shipped") echo "selected='selected'";?> >Shipped</option>
</select>
</div>
</div>
<input type="text" class="form-control" name="shipping_notes" disabled="true" id="shipping_notes" aria-describedby="" placeholder="Enter Shipping details">
Java script:
<head>
<script type="text/javascript">
document.getElementById('ostatus').addEventListener('change', function()
{
console.log(this.value);
if (this.value == 'Shipped') {
document.getElementById('shipping_notes').disabled = false;
} else {
document.getElementById('shipping_notes').disabled = true;
}
});
</script>
</head>
Doesn't seem to trigger? I don't see log on console too. What could be wrong here?
Update:
I have pasted the html code here:
https://justpaste.it/6zxwu
Update
Since you've now shared your other code I think I know what you want. You have multiple modals, each with a select list and shipping_notes textbox which should be enabled when the selection is Shipped for that particular modal. I've modified your HTML to get this working.
I've updated your HTML a bit. You have multiple elements with the same ID. HTML IDs should be unique. If you want to target multiple elements it's safer to use class (or data-) attributes. I've added class="order-status" to each select and class="shipping_notes_txt" to each textbox. I've used element.querySelector() and document.querySelectorAll() to select DOM elements.
The snippet below mimics two modals. When the select is updated, it only enables/disabled the textbox within the same form element.
// wait for the DOM to load
document.addEventListener('DOMContentLoaded', function() {
// get all select elements with class=order-status
var selects = document.querySelectorAll('.order-status');
// iterate over all select elements
for (var i = 0; i < selects.length; i++) {
// current element
var element = selects[i];
// add event listener to element
element.addEventListener('change', function()
{
console.log(this.value);
// get the form closest to this element
var form = this.closest('form');
// find the shipping notes textbox inside form and disable/enable
if (this.value == 'Shipped') {
form.querySelector('.shipping_notes_txt').disabled = false;
} else {
form.querySelector('.shipping_notes_txt').disabled = true;
}
});
// default value if status == Shipped: enable textbox
if (element.value == "Shipped")
{
var form = element.closest('form');
form.querySelector('.shipping_notes_txt').disabled = false;
}
}
});
.modal1 {
display:inline-block;
vertical-align:top;
padding: .5em;
padding-bottom:5em;
border: 1px solid black;
}
<div class="modal1">
<h3>First Modal</h3>
<div id="edit1" class="modal fade" role="dialog">
<form action="order.php" autocomplete="off" method="post">
<div class="col-md-2 ml-3 pt-1">
<label for="role" class="mr-3">Status</label>
</div>
<select class="form-control order-status" id="ostatus1" name= "ostatus">
<option value="Uploaded" selected='selected' >Uploaded</option>
<option value="Processing">Processing</option>
<option value="Dispatched">Dispatched</option>
<option value="Shipped">Shipped</option>
</select>
<input type="text" class="form-control shipping_notes_txt" name="shipping_notes" disabled="true" id="shipping_notes1" aria-describedby="emailHelp" placeholder="Enter Shipping details">
</form>
</div>
</div>
<div class="modal1">
<h3>Second Modal</h3>
<div id="edit20" class="modal fade" role="dialog" >
<form action="order.php" autocomplete="off" method="post">
<div class="col-md-2 ml-3 pt-1">
<label for="role" class="mr-3">Status</label>
</div>
<select class="form-control order-status" id="ostatus20" name= "ostatus">
<option value="Uploaded" >Uploaded</option>
<option value="Processing">Processing</option>
<option value="Dispatched">Dispatched</option>
<option value="Shipped" selected='selected' >Shipped</option>
</select>
<input type="text" class="form-control shipping_notes_txt" name="shipping_notes" disabled="true" id="shipping_notes20" aria-describedby="emailHelp" placeholder="Enter Shipping details">
</form>
</div>
</div>
Add onchange to your <select>
<select class="form-control" id="ostatus" name= "ostatus" onchange = "statuschange()">
And change the JavaScript to :
<script type="text/javascript">
function statuschange(){
var drpDownValue = document.getElementById('ostatus').value;
if (drpDownValue == 'Shipped')
{
document.getElementById('shipping_notes').disabled = false;
}
else
{
document.getElementById('shipping_notes').disabled = true;
}
}
</script>
assuming everything on the server side this works HTML comes first
<div class="col-md-3"> <select class="form-control" id="ostatus" name= "ostatus">
<option value="Uploaded" selected="selected" >Uploaded</option>
<option value="Processing" >Processing</option>
<option value="Dispatched" >Dispatched</option>
<option value="Shipped" >Shipped</option>
</select>
</div>
</div>
<input type="text" class="form-control" name="shipping_notes" disabled="true" id="shipping_notes" aria-describedby="" placeholder="Enter Shipping details">
document.getElementById('ostatus').addEventListener('change', function()
{
console.log(this.value);
if (this.value == 'Shipped') {
document.getElementById('shipping_notes').disabled = false;
} else {
document.getElementById('shipping_notes').disabled = true;
}
});
i want to select a platform from checkbox1 and select the value from dropdown1
as a result i want in dropdown2 it shows the value related to the platfrom
example :
i check GI and 90 >> result in dropdown2 = 90 gi
if i check GI and xdo 190 >> result : 190 gi and 190 xdo
and would love that the value appear in the textbox 'lns'.
i tried some code but not working properly :
<script>
$(document).ready(function()
{$('option[id^=sb]').hide();
$('input[id^=chk]').change(function(){
var index = $(this).attr('id').replace('chk','');
if($(this).is(':checked'))
$('#sb'+index).show();
else
$('#sb'+index).hide();
}); });
$(function(){
$("#dropdown1").on("change",function(){
var levelClass = $('#dropdown1').find('option:selected').attr('class');
console.log(levelClass);
$('#dropdown2 option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}}); });});
function chlink(){
var dropdown2 = document.getElementById('dropdown2');
var a = dropdown2.options[dropdown1.selectedIndex].value;
var textbox = document.getElementById('lns');
textbox.value = a; }
Any Help :)
This should work
$(document).ready(function(){
$('.chlink').on('click', function(){
gatherValuesFromInputs();
});
});
function gatherValuesFromInputs() {
var result = '';
$('.chk:checked').each(function(index){
if(index == 0) {
result += $('#dropdown').val() + " " + $(this).val();
} else {
result += ' and ' + $('#dropdown').val() + " " + $(this).val();
}
});
$('#lns').val(result);
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="row">
<div class="column">
<div style="float:right">
<label for="option1">Xdo</label>
<input class="chk" id="option1" type="checkbox" name="option1" value="xdo">
</div>
<div style="float:right">
<label for="option2">GI</label>
<input class="chk" id="option2" type="checkbox" name="option2" value="gi">
</div>
<div style="float:right">
<label for="option3">PayF</label>
<input class="chk" id="option3" type="checkbox" name="option3" value="PayF">
</div>
<div style="float:right">
<label for="option4">HiP</label>
<input class="chk" id="option3" type="checkbox" name="option4" value="HiP"/>
</div>
</div>
</div>
<br>
<select id="dropdown" name="dropdown">
<option>choisissez un Pack</option>
<option value="90"> LIEN 90 </option>
<option value="190"> LIEN 190 </option>
</select>
<br><br>
<button class="chlink">Generer Lien</button>
<p><input name="lns" id="lns" type="text" /></p>
You can store checkboxes value to an array and whenever a checkbox is checked you can display values related to it and whenever a checkbox is unchecked hide the data related to it . Also i have made some changes in your html as well in script.Working example :
var index = [];
$(document).ready(function() {
//hide all contents
$('option[id^=sb]').hide();
$('input[id^=chk]').change(function() {
//checking if checkbox is check put it in array
if ($(this).is(':checked')) {
index.push($(this).attr('id').replace('chk_', ''));
} else {
//if uncheck remove the element from array
if ((index1 = index.indexOf($(this).attr('id').replace('chk_', '')) !== -1)) {
//hide all options related to that
for (var i = 0; i < index.length; i++) {
if (!$('#chk_' + index[i]).prop("checked")) {
//hide option
$('.' + index[i]).hide();
}
}
//removing values from array
index.splice($.inArray(index1, index), 1);
}
}
//if check box is checked show options related to that
for (var i = 0; i < index.length; i++) {
if ($('#chk_' + index[i]).prop("checked")) {
$('.' + index[i]).show();
}
}
});
$(function() {
$("#dropdown1").on("change", function() {
var levelClass = $('#dropdown1').find('option:selected').attr('class');
//looping through array
for (var i = 0; i < index.length; i++) {
$('#dropdown2 option').each(function() {
var self = $(this);
if (self.val() == levelClass || typeof(levelClass) == "undefined" && self.hasClass(levelClass)) {
//self.show();
//showing option with class and value from array
$('.' + levelClass + '.' + index[i]).show();
} else {
//self.hide();
//hiding options
$('.' + index[i]).not('.' + levelClass).hide();
}
});
}
});
});
//on click of Generer Lien button
$(".values").on("click", function() {
//getting values of dropdown
var v = $("#dropdown2").val();
//assign to input
$("#lns").val(v);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
<div class="column">
<div style="float:right">
<label for="option1">Xdo </label>
<input id="chk_xdo" type="checkbox" name="chb[]" value="xdo" autocomplete="on">
</div>
<div style="float:right">
<label for="option2">GI</label>
<input id="chk_gi" type="checkbox" name="chb[]" value="gi">
</div>
<div style="float:right">
<label for="option3">PayF</label>
<input id="chk_payf" type="checkbox" name="chb[]" value="PayF">
</div>
<div style="float:right">
<label for="option4">HiP</label>
<input id="chk_hip" type="checkbox" name="chb[]" value="HiP" />
</div>
</div>
</div>
<br>
<select id="dropdown1" name="dropdown1">
<option value="">choisissez un Pack</option>
<option class="490" value="490"> 490,00 </option>
<option class="390" value="390"> 390,00 </option>
<option class="290" value="290"> 290,00 </option>
<option class="190" value="190"> 190,00 </option>
<option class="90" value="90"> 90,00 </option>
</select>
<br>
<select id="dropdown2" name="dropdown2">
<option></option>
<option style="color:#0bb6b6" class="90" value="90">LIEN 90</option>
<option id="sb1" class=" xdo 90" value="xdo90">90 xdo</option>
<option id="sb2" class=" gi 90" value="gi90">90 gi</option>
<option id="sb3" class=" hip 90" value="hip90">90 hip</option>
<option style="color:#0bb6b6" class="190" value="190">LIEN 190</option>
<option id="sb1" class=" xdo 190" value="xdo190">190 xdo</option>
<option id="sb2" class="gi 190" value="gi190">190 gi</option>
<option id="sb3" class="hip 190" value="hip190">190 hi</option>
</select>
<br><br>
<button class="values">Generer Lien </button>
<p><input name="lns" id="lns" type="text" /></p>
I have already gone through questions available on this topic and have tried everything, but still my keyup function is not working.
$(document).ready(function() {
$(document).on('keyup', '.pollOption', function() {
var empty = false;
$(".pollOption").each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#cpsubmit").attr('disabled', 'disabled');
$("#moreop").attr('disabled', 'disabled');
} else {
$("#cpsubmit").removeAttr('disabled');
$("#moreop").removeAttr('disabled');
}
});
//Keep Track of no. of options on the page
var noOfOptions = 2;
// Function to add input fields (since I may have to delete them I've use bootstrap's input-groups, I guess this is causing issue)
$("#moreop").on('click', function() {
noOfOptions++;
$("#options").append("<div class='input-group pollOption'><input class='form-control' type='text' placeholder='New Option' name='op" + noOfOptions + "'/><span class='input-group-addon'><a href='#' id='removeOption' class='text-danger'>Remove</a></span></div>");
});
// To delete any option (only the dynamically created options can be deleted)
$("#cpform").on('click', '#removeOption', function() {
$(this).parents('.input-group').remove();
noOfOptions--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cpform" method="POST" action="/polls/add">
<div class="form-group">
<label>Title</label>
<input id="title" type="text" placeholder="Ask your question here..." name="title" class="form-control" />
</div>
<div id="options" class="form-group">
<label>Options</label>
<input type="text" placeholder="Option 1" name="op1" class="form-control pollOption" />
<input type="text" placeholder="Option 2" name="op2" class="form-control pollOption" />
</div>
<button id="moreop" type="button" disabled="disabled" class="btn btn-outline-info btn-primary">More Options</button><br/><br/>
<button id="cpsubmit" type="submit" disabled="disabled" class="btn btn-info btn-primary">Submit</button>
</form>
This code works perfectly for the two inputs already in the HTML part.
When I click on the "More Option" button the new field gets added but the "keyup" does not work on it. In fact, when I enter something on the new added inputs then my "More Option" & "Submit" button gets disabled (really do't know why this is happening).
You've to add the class pollOption to the input and not the div in your append :
$("#options").append("<div class='input-group'><input class='pollOption form-control' ...
_____________________________________________________________^^^^^^^^^^
Instead of :
$("#options").append("<div class='input-group pollOption'><input class='form-control' ...
______________________________________________^^^^^^^^^^
Demo:
$(document).ready(function() {
$(document).on('keyup', '.pollOption', function() {
var empty = false;
$(".pollOption").each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#cpsubmit").attr('disabled', 'disabled');
$("#moreop").attr('disabled', 'disabled');
} else {
$("#cpsubmit").removeAttr('disabled');
$("#moreop").removeAttr('disabled');
}
});
//Keep Track of no. of options on the page
var noOfOptions = 2;
// Function to add input fields (since I may have to delete them I've use bootstrap's input-groups, I guess this is causing issue)
$("#moreop").on('click', function() {
noOfOptions++;
$("#options").append("<div class='input-group'><input class='pollOption form-control' type='text' placeholder='New Option' name='op" + noOfOptions + "'/><span class='input-group-addon'><a href='#' id='removeOption' class='text-danger'>Remove</a></span></div>");
$(this).attr('disabled','disaled');
});
// To delete any option (only the dynamically created options can be deleted)
$("#cpform").on('click', '#removeOption', function() {
$(this).parents('.input-group').remove();
noOfOptions--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cpform" method="POST" action="/polls/add">
<div class="form-group">
<label>Title</label>
<input id="title" type="text" placeholder="Ask your question here..." name="title" class="form-control" />
</div>
<div id="options" class="form-group">
<label>Options</label>
<input type="text" placeholder="Option 1" name="op1" class="form-control pollOption" />
<input type="text" placeholder="Option 2" name="op2" class="form-control pollOption" />
</div>
<button id="moreop" type="button" disabled="disabled" class="btn btn-outline-info btn-primary">More Options</button><br/><br/>
<button id="cpsubmit" type="submit" disabled="disabled" class="btn btn-info btn-primary">Submit</button>
</form>
Hi I am creating a website that has a form to search rooms. I wanted to make it so a checkbox, when clicked, show new options AND change the action ="" attribute of the form.
<form class="form-horizontal" action="reservation?action=listRooms" method="POST">
<label for="">Date </label>
<div class="datepicker ll-skin-nigran hasDatepicker">
<input class="form-control" type="text" placeholder="14/03/2016" name="dateReservation" id="date" required="required"/>
</div>
<br />
<div>
<input type="checkbox" name="choice-for" id="choice-form">
<label for="choice-for">Show More Options.</label>
<div class="reveal-if-active">
<label for="">Slots</label>
<select name="slot" name ="slot" id="slot" >
<option value="">Choose a slot </option>
<option value="8h-9h30">8h00-9h30</option>
<option value="9h30-11h">9h30-11h00</option>
<option value="11h-12h30h">11h00-12h30h</option>
<option value="12h30-14h">12h30-14h00</option>
<option value="14h-15h30">14h00-15h30</option>
<option value="15h30-17h">15h30-17h00</option>
<option value="17h-18h30">17h00-18h30</option>
</select>
<br />
<label for="">Display Screens</label>
<input class="form-control" type="text" placeholder=" 26 pouces" name="screen" id="screen" />
<br />
<label for="">CPU</label>
<input class="form-control" type="text" placeholder="Intel Core i5 " name="processor" id="processor" />
<br />
<label for="">RAM</label>
<input class="form-control" type="text" placeholder=" 2Go de RAM ?" name="ram" id="ram" />
<br />
<input type="submit" value="Réserver" class="btn btn-primary" />
</div>
I tried then to use a javascript(JQuery) script to satisfy my expectations:
<script>
$(function() {
$( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
});
$("#choice-form").change(function() {
//there i need to know when the checkbox is changed dynamically so the attribute can change too.
$("#form-horizontal).attr("reservation?action=listRooms");
});
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
</script>
Try this:
$("#choice-form").change(function() {
// If checkbox checked
if ( $('#choice-form').is(':checked') ) {
// Set new form action
$('#form-horizontal').attr('action', 'reservation?action=listRooms');
// Reveal additional options
$('.reveal-if-active').show(); // or call .css() with appropriate options
}
});
Ok, let's say you want to add the id(you can use name as well) and value to the action parameter from the form...
$(document).on('click','.checkboxClass',function(){
var id = $(this).attr('id');
var val = $(this).val();
var selectedVal = '&'+id+'='+val;
var methodUrl = $('form.form-horizontal').attr('action');
if($(this).is(':checked')){
methodUrl+= selectedVal;
}
else{
methodUrl = methodUrl.replace(selectedVal,'');
}
$('form.form-horizontal').attr({'action':methodUrl});
});
Now let's say you have a checkbox with the id="myId" and value="myValue", if you check it, the action parameter will become action="reservation?action=listRooms&myId=myValue"
Is this what you asked for?
Have problem to display select on change attribute id.
PHP:
<form action="" class="form-inline">
<div class="form-group">
<select name="kategorijos" id="kategorijos" class="category form-control" onchange="fetch_select_category(this.value);">
<option value=""></option>
FOREACH
</select>
</div>
<div class="form-group">
<fieldset disabled>
<select id="disabledSelect" name="subcategories" class="subcategory form-control" onchange="fetch_select_product(this.value);" required>
<option value="" disabled selected>Select Subcategory</option>
</select>
</fieldset>
</div>
<div class="form-group">
<td><input type="text" name="gramai" class="form-control" value=""></td>
</div>
<div class="form-group" id="kalb">
<input type='text' name='1[]' value="-" disabled>
<input type='text' name='12[]' value="-" disabled>
<input type='text' name='123[]' value="-" disabled>
<input type='text' name='1234[]' value="-" disabled>
</div>
</form>
My jquery code:
$("select").on('change', function() {
var status = $('select').attr('id');
alert(status);
});
var categoryId = 0;
var category = 0;
var product = 0;
var disableId = 0;
$("#add").click(function () {
categoryId = categoryId + 1;
category = category + 1;
product = product + 1;
disableId = disableId + 1;
$("#item").append('<div class="col-xs-12"><form action=""
class="form-inline"><div class="form-group"><select name="kategorijos"
**....... same code as above (php)**
});
When I select the first row it alerts value. But then I add new row with add button, and then change second select the alert don't work, and I don't get the select id. Where can be the problem? Maybe it doesn't work with append html ?
You need to use event delegation for dynamically generated element and also use this instead of 'select' to get the id of dropdown.
$(document).on('change', 'select', function() {
var status = $(this).attr('id');
alert(status);
});