Is there a way to check which like option is selected for which text box when submitted.
As shown below user may select like only for some text values. The html tags are dynamically generated based on the object parameters
for(int i = 0 ; i < object ; i++)
{
if(obj.textbox)
<input type="tex" id="obj.id"/> <input type="checkbox" id="obj.id"+"#"/>
else
<select> ... </select>
}
Right now what I do is assign a text "#" as shown above to the check box and after the form is submitted iterate all the checkbox items and get the selected value and split it and get the text value and append both value and like if selected, with | symbol and send the request.
Is there a better way to get the entered text values and check if the like option is selected for that.
This is my View Code.
<div ng-repeat="filter in filters">
<div class="content-pad">
<fieldset>
<label for="textinputID1"><p class="lead">
{{filter.dsply_name}} :
</p>
</label>
<div class="field-group" nowrap>
<input ng-if="!filter.listFlag" type="text" id='filter.atrbt_name' class="span3">
<button type="button" class="reset-field hide-text">Reset field</button>
<label class="checkbox" ng-if="!filter.listFlag">
<input id='filter.atrbt_name' type="checkbox">
<i class="skin"></i> <span>Like</span>
</label>
</div>
<div class="form-row">
<div class="row-fluid-nowrap">
<div class="span12">
<select ng-if="filter.listFlag" class="mod-select span12" ng-model="filterSelectOption" ng-options="value.displayValue as value.displayValue for value in filter.listValues">
<option value="" selected="selected">Select an Option</option>
</select>
</div>
</div>
</div>
</fieldset>
</div>
Bind the click event to submit button, in js callback function, get values & do check.
Related
I am looking to show form fields only if the user inputs a specific value in a different field. Specifically, I am asking users to input the number of children they have. If the user inputs 1, then a set of fields will appear for the user to add additional information on their child. If the user inputs 2, then 2 sets of fields will appear, one per child. From a JS perspective, I am looking to hide the field sets based on the response.
This is my HTML:
Form field based on which the JS should be based on:
<html>
<div class="_form_element _field10 _full_width ">
<label for="field[10]" class="_form-label">
How many children do you have? <span style="color: #eb636d;">*</span>
</label>
<div class="_field-wrapper">
<input type="text" id="field[10]" name="field[10]" value="" placeholder="" required />
</div>
</div>
</html>
Field set to appear based on value entered in the field above:
<html>
<div id=1 class="child_1">
<div class="_form_element _field51 _full_width " >
<label for="field[51]" class="_form-label">
First child's name
</label>
<div class="_field-wrapper">
<input type="text" id="field[51]" name="field[51]" value="" placeholder="" />
</div>
</div>
<div class="_form_element _field55 _full_width " >
<label for="field[55]" class="_form-label">
First child's birthdate
</label>
<div class="_field-wrapper">
<input type="date" class="date_field" id="field[55]" name="field[55]" value="" placeholder="" />
</div>
</div>
</div>
</html>
Thanks
I'm making a form that have a group selected dropdown that consist of string stored from database (i did a #foreach loop through database via eloquent model to assign the dropdown value lists), on the below of the dropdown i have 3 disable inputs that are the column from database that have a correlation with the value of dropdown. I want that placeholder of disable input automatically change the value to be same as the record with the dropdown value's record from database once i select a value from dropdown. What should i do? What JS script should i use for?
blade.php
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="selectError2">Plat Nomor</label>
<div class="controls">
<select data-placeholder="Pilih Nomor Polisi" id="selectError2" data-rel="chosen">
<option value=""></option>
#foreach ($park as $p)
<option value="{{$p->id}}">{{$p->nopol}}</option>
#endforeach
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="disabledInput">Jenis Kendaraan</label>
<div class="controls">
<input class="input-large disabled" id="disabledInput" type="text" placeholder="{{$p->jenis}}" disabled="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="disabledInput">Kategori Kendaraan</label>
<div class="controls">
<input class="input-large disabled" id="disabledInput" type="text" placeholder="{{$p->kategori}}" disabled="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="disabledInput">Waktu Masuk</label>
<div class="controls">
<input class="input-large disabled" id="disabledInput" type="text" placeholder="{{$p->created_at}}" disabled="">
</div>
</div>
You refer my sample code:
http://jsfiddle.net/18pa7m0q/11/
function change(select)
{
var value=select.options[select.selectedIndex].value;
$(".input-large").attr("placeholder",value);
}
Huh finally i got the answer from one of my friend.
First, add attribute id="your_id" on every input that corresponds with dropdown's record.
After that, add this line of <script>
`
// Transform PHP variable into json, so it can be cached into js variable
// Adjust the param with #json($your_table_name)
const park = #json($park);
function change(select) {
// Get the id (which is in the value) of the selected option
let id = select.options[select.selectedIndex].value
// Find the data in the cached json
let parkData = park.find(function (p) {
// Find it by id
return p.id == id
})
// For each fields to be shown in the page...
// Each member of array are the same id from the <input> tag
// In this case i want three columns to be shown in the page..
for (let field of ["jenis", "kategori", "created_at"]) {
// Put the data to the corresponding element
document.getElementById(field).value = parkData[field]
}
}
`
Voila! It changed the value of disabled input each time i select the value of dropdown.
It does only need the Plain JS with no jQuery or any other JS framework. So simple :D
I have a form that allows a user to create custom questions.
The user needs to insert the title for the question and then choose the type of the question.
If the type of question is radio button, checkbox or a select menu it should appear a div "availableOptions" that shows by default two input texts so the user can insert some option values.
Doubt:
When this "availableOptions" div appears there is also a button "add new option" that when is clicked it should appear another input text so the user can insert a new option value. Each option should also have always a remove button associated that when is clicked the user can remove that input text, but it should be always a minimum of one input text.
Do you know how to do this properly? I have the working example below but it's working neither the append nor the remove.
Example: https://jsfiddle.net/udx6pp8u/15/
HTML:
<form id="" method="post" class="clearfix" action="">
<div class="form-group">
<label for="inputName">Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Type of Field</label>
<select class="form-control" id="customQuestionType">
<option>Text</option>
<option>Long text</option>
<option id="optionQuestion">Checkboxes</option>
<option id="optionQuestion">Radiobuttons</option>
<option id="optionQuestion">Select Menu </option>
</select>
</div>
<div class="form-group" id="availableOptions">
<label for="inputName">Available Options </label>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-outline-primary mt-3" id="addNewOption">Add new Option</button>
</div>
</div>
<input type="submit" class="btn btn-primary float-right mt-3" value="Store"/>
</form>
CSS:
#availableOptions{display:none;}
jQuery:
var selected_option = $('#customQuestionType option:selected').attr('id');
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
if ($('#addNewOption').click(function() {
$('#availableOptions')
.append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
}));
if ($('#removeOption').click(function() {
$('#availableOptions') // how to remove the clicked otpion?
}));
}
Try this:
Note: Don't use id. Use class instead. One document should only have one unique id. Using multiple id="removeOption" will coz your script to behave incorrectly and also choose the first found and ignore the rest having the same id
$('#customQuestionType').change(function(){
var selected_option = $('option:selected', this).val();
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
$('#addNewOption').click(function() {
$('#availableOptions').append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
});
}
});
$(document).on('click', '.removeOption', function(e) {
e.preventDefault();
$(this).closest('.option').remove();
})
DEMO:
https://jsfiddle.net/dL7opvak/21/
EDITED
I have a select box with options of numbers in it.Whenever user selects an option i am displaying input box through jquery depending on the number selected.So for this the input box are initially hidden. Now the problem is that when i try to post the value of those input box, they are not getting posted.
Here is html code-
<form action="data.php" method="POST">
Select the number of company:
<select name="num_of_comp" id="num_of_comp">
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="div1" style="visibility:hidden;">
<label for="dbname">database name:</label>
<input type="text" name="db1" id="db1" />
<input type="submit" name="submit" id="submit" />
</div>
<div id="div2" style="visibility:hidden;">
<label for="dbname">database name:</label>
<input type="text" name="db1" placeholder="db1 name"/>
<input type="text" name="db2" placeholder="db2 name"/>
<input type="submit" name="submit" id="submit" />
</div>
Here is the script that dynamically displays the input box -
$('#num_of_comp').on('change',function(){
if( $(this).val()==="1"){
$("#div1").css("visibility", "visible");
$("#div2,").css("visibility", "hidden");
}
else if( $(this).val()==="2"){
$("#div2").css("visibility", "visible");
$("#div1").css("visibility", "hidden");
}
Here is php code-
$i = $_POST['num_of_comp'];
if($i == '1'){
$db1 = $_POST['db1'];
echo $db1;
Here I am not getting the value of db1.
Thanks in advance.
You can not set same id to multiple fields, id should be unique for all fields.
so set different ids to all fields in form
Even the name of the all input fields should be unique here.
You have two inputs with name db1. The second value (input without id) overwrites the first one (input with id="db1").
This is your issue
You have use same id for two input fields that is wrong every id in the page should be unique otherwise you can't get the actual value of your expecting field, and use proper naming for those id then you wan't miss those issue and code will be clear also use different name for name attribute
<input type="text" name="db1" id="database1" />
<input type="submit" name="submit" id="submit" />
<div id="div2" style="visibility:hidden;">
<label for="dbname">database name:</label>
<input type="text" name="db2" id="database2" placeholder="db1 name"/>
</div>
I have tried these solutions: How to set the first option on a select box using jQuery?
These solutions aren't working for me I think because my form is different. I have two radio buttons, and based on which radio button was selected, a dropdown is shown. By default, both dropdowns are hidden (style="display:none"). To show and hide the dropdowns I am the following simple code:
$("#contactRadioButton").click(function () {
$("#contactDropdown").show();
$("#companyDropdown").hide();
});
$("#companyRadioButton").click(function () {
$("#companyDropdown").show();
$("#contactDropdown").hide();
});
One of the code samples I've tried:
$('#contactSelect').change(function(){
$('#companySelect').val('');
});
$('#companySelect').change(function(){
$('#contactSelect').val('');
});
But I need tonly one dropdown to be submitted with a value. Right now, I can click on the contact radio button and then select a value within the dropdown. Then, I can select the company radio button and the other dropdown will be displayed, and I can select a value. Then, both dropdowns will have a value.
PS. I am using bootstrap and bootstrap select. Not sure if that can have anything to do with it.
My full form code (radio buttons and dropdowns):
<div class="form-group">
<label class="control-label">Add contact or company?</label>
<div>
<div class="radio-custom radio-success radio-inline">
<input id="contactRadioButton" name="contact_relatie" type="radio" value="1">
<label for="contactRadioButton">Contact</label>
</div>
<div class="radio-custom radio-success radio-inline">
<input id="companyRadioButton" name="contact_relatie" type="radio" value="1">
<label for="companyRadioButton">Company</label>
</div>
</div>
</div>
<div class="form-group " id="contactDropdown" style="display:none">
<label for="name">Contact:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="contactSelect" name="contact_id"><option value="" selected="selected">-- Select Contact --</option> // rest of options..</select>
</div>
<div class="form-group " id="companyDropdown" style="display:none">
<label for="name">Company:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="companySelect" name="relation_id"><option value="" selected="selected">-- Select Company --</option> // rest of options..</select>
</div>
JS
$('#contactSelect').change(function(){
$('#companySelect option:first').prop('selected', 'selected');
});
$('#companySelect').change(function(){
$('#contactSelect option:first').prop('selected', 'selected');
});
HTML
<div class="form-group " id="contactDropdown" style="display:none">
<label for="name">Contact:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="contactSelect" name="contact_id"><option value="" selected="selected">-- Select Contact --</option> // rest of options..</select>
</div>
<div class="form-group " id="companyDropdown" style="display:none">
<label for="name">Company:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="companySelect" name="relation_id"><option value="" selected="selected">-- Select Company --</option> // rest of options..</select>
</div>
Solved it by using this as well, since my code WAS working behind the scenes:
$('#mySelect').selectpicker('render');
https://github.com/silviomoreto/bootstrap-select/issues/84
So for anyone using the bootstrap select, use the above code if you're running into the same issue as me.