Develop Reference

Laravel Javascript: Edit Page radio button function that appends input field when i click other option

I have a radio button with other option that appends input field when click
here is my code
View:
<div class="input-field col s4 floor_level">
<p>
<label>Floor Level<h7 class="red-text">*</h7></label><br>
<label>
<input id="ground" class="with-gap" name="floor_level" type="radio" value="Ground" {{ $client->eventDetail->floor_level == 'Ground' ? 'checked' : ''}}/>
<span>Ground</span>
</label>
</p>
<p>
<label>
<input id="rooftop" class="with-gap" name="floor_level" type="radio" value="Rooftop" {{ $client->eventDetail->floor_level == 'Rooftop' ? 'checked' : ''}}/>
<span>Rooftop</span>
</label>
</p>
<p>
<label>
<input id="option" class="with-gap" name="floor_level" type="radio" value="other" {{ old('floor_level',$new_floor_level) == 'other' ? 'checked' : '' }}/>
<span id="otherlabel">Other</span>
</label>
</p>
</div>
Script:
<script>
$(function () {
var $select2 = $('#option');
$select2.on('change', function (e) {
if($(this).val()==="other"){
$('#option').one('click', function() {
$('.floor_level').append('<div class="added_input"><input id="floor_level_input" type="text" name="floor_level" value="{{ old('floor_level',$client->eventDetail->floor_level) }}" placeholder="Specify.." class="validate"><label for="floor_level_input">Make your own selection!</label></div>');
$('#option').hide();
$('#otherlabel').hide();
});
}
}).change();
$('#rooftop').change(function () {
if($(this).val()!=="other"){
$('.added_input').remove();
$('#option').show();
$('#otherlabel').show();
}
});
$('#ground').change(function () {
if($(this).val()!=="other"){
$('.added_input').remove();
$('#option').show();
$('#otherlabel').show();
}
});
});
</script>
Controller:
$client = Client::findOrFail($id);
if ($client->eventDetail->floor_level !== "Ground" AND $client->eventDetail->floor_level != "Rooftop")
{
$new_floor_level = "other";
}
else
{
$new_floor_level = " ";
}
return view('admin.clients.edit', compact('client', 'new_floor_level'));
In my create page this code is working, when i click the the "Other" radio button there will be an input field and when i click the Ground or Rooftop the input field will be removed.
The question is how can i show the appended input field with the value from database if the radio button is Other by default in my update page, and still works with click event that removes the input field when i click Ground or Rooftop and show it again when i click Other.

Check if input value was empty change text

I wrote the below code for changing the text of div that called active yes, based on value of each input with type hidden.
i want to change the text of this div if input with id enable to "Enable List" and if input with classname delete has value changes the div text to "Deleted list" and if both of them was null show "list".
my code does not work correctly.
what is my problem?
here is my snippet :
$(document).ready(function() {
tmpval = $('#enable').val();
if (tmpval == '') {
$('.activeyes').text('list');
} else {
$('.activeyes').text('Enable List');
}
tmpval2 = $('#delete').val();
if (tmpval2 == '') {
$('.activeyes').text('List');
} else {
$('.activeyes').text('Deleted List');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>

You are overwriting effect of the first check by the second check; you need to check the 2 inputs value together. Still, it is unclear what will happen if both are non-empty.
$(document).ready(function() {
tmpval = $('#enable').val();
tmpval2 = $('#delete').val();
if (tmpval == '' && tmpval2 == '') {
$('.activeyes').text('list');
} else if( tmpval!='' ){
$('.activeyes').text('Enable List');
} else if( tmpval2!='' ){
$('.activeyes').text('Deleted List');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>

what is my problem?
You need to check the value of input when it changes its value, so capture the change event.
$(document).ready(function() {
$('#enable, #delete').change(function() {
var $this = $(this);
var id = $this.attr("id");
var value = $this.val();
if (value.length == 0)
{
$('.activeyes').text('list');
}
else
{
id == "enable" ? $('.activeyes').text('Enable List') : $('.activeyes').text('Deleted List');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>

Different behavoir after clicking button jQuery

Im here again... Jquery noob. So I have this form that works with jQuery. The problem is that it has a different behaviour after clicking "Add".
https://jsfiddle.net/h4exrmdz/6/
Just try this to understand quickly:
Select "Other" in the first select. You can see that a new form appears.
Select "Option 1" now. You can see the form disappears.
Click "Add".
Select "Other" again in the first select. The new form doesnt appear anymore, even if you click "Remove". (It should work like before).
HTML
<table>
<th>
<p>Select <select autocomplete="off" name="custom_material_floor" id="custom_material_floor">
<option value="1" selected="selected">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
<option value="Other">Other</option>
</select>
<div id="custom_material_floorValue">
Custom:
<form name="custom_material_floorValue" id="custom_material_floorValue">
<input type="text" size="4">
<input type="text" size="4">
<input type="text" size="4">
<input type="text" size="4">
<input type="text" size="4">
<input type="text" size="4">
</form>
</div>
</th>
<th>
<div class="input_fields_wrap">
<button class="add_field_button">Add</button>
</div>
</th>
</table>
Script jQuery
$(document).ready(function()
{$("#custom_material_floor").change(function()
{if($(this).val() == "Other")
{$("#custom_material_floorValue").show();}
else
{$("#custom_material_floorValue").hide();}});
$("#custom_material_floorValue").hide();
});
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div></p>Name<input name="nombre" type="text" onkeyup="update()" maxlength="16" />\
Select <select name="username">\
<option value="1">Option1</option>\
<option value="2">Option2</option>\
<option value="3">Option3</option>\
<option value="4">Other</option>\
</select><form class="custom_material" id="custom_material" style="display:none">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4"></form>\
Remove</div>'); //add form
$("select").off("change");
$("select").on("change", function(e){
var selEl = $(e.currentTarget);
var inputSel = "form.custom_material";
if (e.currentTarget.value == 4) {
selEl.parent().find(inputSel).show();
} else {
selEl.parent().find(inputSel).hide();
}
});
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
$(document).ready(function() {update();});
})
});
I suppose its easy but I dont know whats happening. Any idea?

If you see the code, you have a second onChange event at the lower part that fires for all the select controls that you have. Onload, it triggers the First onChange event, but after Add, the event triggered is now the second onChange event.
First onChange event:
$("#custom_material_floor").change(function() {
if ($(this).val() == "Other") {
$("#custom_material_floorValue").show();
} else {
$("#custom_material_floorValue").hide();
}
});
Second onChange event:
$("select").on("change", function(e) {
var selEl = $(e.currentTarget);
var inputSel = "form.custom_material";
if (e.currentTarget.value == 4) {
//alert("other clicked");
selEl.parent().find(inputSel).show();
} else {
//alert("option clicked");
selEl.parent().find(inputSel).hide();
}
});

Here is the code working properly if any interested:
https://jsfiddle.net/h4exrmdz/10/
Script jQuery
$(document).ready(function()
{$("#custom_material_floor").change(function()
{if($(this).val() == "Other")
{$("#custom_material_floorValue").show();}
else
{$("#custom_material_floorValue").hide();}});
$("#custom_material_floorValue").hide();
});
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div></p>Name<input name="nombre" type="text" onkeyup="update()" maxlength="16" />\
Select <select class="additional_custom" name="username">\
<option value="1">Option1</option>\
<option value="2">Option2</option>\
<option value="3">Option3</option>\
<option value="4">Other</option>\
</select><form class="custom_material" id="custom_material" style="display:none">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4"></form>\
Remove</div>'); //add form
$(".additional_custom").off("change");
$(".additional_custom").on("change", function(e){
var selEl = $(e.currentTarget);
var inputSel = "form.custom_material";
if (e.currentTarget.value == 4) {
//alert("other clicked");
selEl.parent().find(inputSel).show();
} else {
//alert("option clicked");
selEl.parent().find(inputSel).hide();
}
});
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
$(document).ready(function() {update();});
})
});

Replace value of text box if value matches with master then to yes else to no

The below code add a css class if the value of inputs are same but i have a condition where i want to Compare a specific class "User" text box with master if both's value matches then then make that text box value as yes if Dis matches then make that text box value to no.
HTML:
<input class="master" value="1">
<input class="user" value="1">
<input class="user" value="1">
<input class="user" value="0">
<input class="user" value="0">
JavaScript:
var inputs = $('input');
inputs.filter(function(i,el){
return inputs.not(this).filter(function() {
return this.value === el.value;
}).length !== 0;
}).addClass('red');

Try this example:
$(function() {
var master = $('input.master').get(0).value; // get the master value
var fn = function() {
return this.value === master ? "yes" : "no";//if current text-box matches master,then yes else no
};
$('input.user').val(fn); // loop and replace text for each user input
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="master" value="1">
<input class="user" value="1">
<input class="user" value="1">
<input class="user" value="0">
<input class="user" value="0">

var inputs = $('input.user');
$.each(inputs, function () {
var user = $(this).val();
var master = $('.master').val();
console.log($(this).val());
console.log($('.master').val());
if (user == master) {
$(this).val('NO');
}
})
demo

$("input.user").change(function(){
if($("input.master").val() == $(this).val()){
$(this).val('Yes');
}
else{
$(this).val('No');
}
});
Or even this
$("input.user").change(function(){
$("input.master").val() == $(this).val()) ? $(this).val('Yes') : $(this).val('No');
});

first wrap the inputs in a parent element, so you know you are comparing to the right master like so:
HTML
<div class="wrapper">
<!-- inputs here //-->
</div>
JAVASCRIPT
var wrappers = $('.wrapper');
$(wrappers).each(function(i,oWrapper){
var master_value = $(oWrapper).find('input.master:eq(0)').val();
var user_inputs = $(oWrapper).find('input.user');
$(user_inputs).each(function(i,oInput){
if($(oInput).val() === master_value){
$(oInput).addClass('red')
.val('yes');
}else{
$(oInput).removeClass('red')
.val('no');
}
});
});
that should do what you want

Enable a text box only when 1 of the radio button is clicked

I have 2 radio button ie yes and no. When I select yes the text box as to get enabled. When i click no the text box as to be disabled. How to enable the text box when I click on Yes. Here is the code. Please tel me how to enable and disable it using javascript.
<script type="text/javascript">
$(function() {
$("#XISubmit").click(function(){
var XIyop= document.forms["XIForm"]["XIyop"].value;
var XIForm = $('form[name=XIForm]');
var XIAlmnus = XIForm.find('input[name=XIAlmnus]:checked').val();
if (XIAlmnus == null || XIAlmnus == "")
{
alert("Please select Parent is an Alumnus (old Boy) of this school");
return false;
}
document.getElementById("XIForm").submit();
});
</script>
<!-- html code-->
<html>
...
<label>Parent is an Alumnus (old Boy) of this school </label> &nbsp&nbsp
<input type='radio' name='XIAlmnus' value='Yes' id="XIyes"/>Yes
<input type='radio' name='XIAlmnus' value='No' id="XIno"/>No</td>
<label>If Yes, Year of passing </label> &nbsp&nbsp
<input type="textbox" name="XIyop" id="XIyop" >
...
</html>

I think, you should use some general handler for this: http://jsfiddle.net/maximgladkov/MvLXL/
$(function() {
window.invalidate_input = function() {
if ($('input[name=XIAlmnus]:checked').val() == "Yes")
$('#XIyop').removeAttr('disabled');
else
$('#XIyop').attr('disabled', 'disabled');
};
$("input[name=XIAlmnus]").change(invalidate_input);
invalidate_input();
});

first make the text box disabled.
<input type="textbox" name="XIyop" id="XIyop" disabled>
When radio button clicked, check and enable it.
if(document.getElementById('XIyes').checked) {
document.getElementById("XIyop").disabled = false;
}else if(document.getElementById('XIno').checked) {
document.getElementById("XIyop").disabled = true;
}

$(function() {
$('input[name="XIAlmnus"]').on('change', function() {
if ($(this).val() == 'Yes') {
$("#XIyop").prop('disabled', false);
} else {
$("#XIyop").prop('disabled', true);
}
});
});
<input type="textbox" name="XIyop" id="XIyop" disabled>

if(document.getElementById('XIyes').attr('checked')) {
document.getElementById("XIyop").disabled = 'true';
}
if(document.getElementById('XIno').attr('checked')) {
document.getElementById("XIyop").disabled = 'false';
}

HTML:
<label>Parent is an Alumnus (old Boy) of this school </label> &nbsp&nbsp
<input type='radio' name='XIAlmnus' value='Yes' id="XIyes"/>Yes
<input type='radio' name='XIAlmnus' value='No' id="XIno"/>No
<br/>
<label>If Yes, Year of passing </label> &nbsp&nbsp
<input type="textbox" name="XIyop" id="XIyop" disabled>
JS:
document.getElementById('XIyes').onchange = displayTextBox;
document.getElementById('XIno').onchange = displayTextBox;
var textBox = document.getElementById('XIyop');
function displayTextBox(evt){
if(evt.target.value=="Yes"){
textBox.disabled = false;
}else{
textBox.disabled = true;
}
}
Please see working demo here. Thank you I hope this will help you.