Develop Reference

How to set empty or null value doesn't worked in Jquery change

I want the value in the input text to be null after the hide process
This is my view :
<div class="form-group row">
<label for="status" class="col-sm-4 col-form-label col-form-label-sm">Status Karyawan</label>
<div class="col-sm-8">
<select id="status" name="status" class="form-control form-control-sm" required>
<option value="" selected>Pilih Status Karyawan</option>
<option value="Kontrak">Kontrak</option>
<option value="Tetap">Tetap</option>
</select>
</div>
</div>
<div class="form-group row" id="tgl_pengangkatan" style="display:none">
<label for="tgl_pengangkatan" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Pengangkatan</label>
<div class="col-sm-8 input-group">
<input name="tgl_pengangkatan" type="text" class="form-control datepicker form-control-sm" id="tgl_pengangkatan" placeholder="yyyy-mm-dd" value="">
</div>
</div>
<div class="form-group row" id="tgl_berakhir_kontrak" style="display:none">
<label for="tgl_berakhir_kontrak" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Akhir Kontrak</label>
<div class="col-sm-8 input-group">
<input name="tgl_berakhir_kontrak" type="text" class="form-control datepicker form-control-sm" id="tgl_berakhir_kontrak" placeholder="yyyy-mm-dd" value="">
</div>
</div>
And than, this is my script:
<script>
$(function () {
$("#status").change(function() {
var val = $(this).val();
if(val === "Kontrak") {
$("#tgl_berakhir_kontrak").show();
$("#tgl_pengangkatan").hide();
$("#tgl_pengangkatan").val('');
}
else if (val === "Tetap") {
$("#tgl_pengangkatan").show();
$("#tgl_berakhir_kontrak").hide();
$("#tgl_berakhir_kontrak").val('');
}
});
});
I want to make it like that to minimize errors in the input process, thanks.

The element you are trying to change should be called with its name, not the id. Try changing it as:
$('[name="tgl_berakhir_kontrak"]').val('');
By the way, it's not a good practice to give identical name and id to separate elements on the same page.

Disable select boxes if text field has a value

I am trying to disable 2 select boxes if an input text field has a value. If the value of the input text field is cleared, the select boxes should be enabled again. It seems to work well the first time or if I never touch either one of the select boxes but it seems if I even active them, they will not disable again. For example, if I enter text into the input box the 2 select boxes are disabled and if I clear it they are enabled again, but then when I type in the text box to disable them again it does not work if I have activated either of the select boxes.
HTML
<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
<div class="form-group col-md-4">
<input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Borough" multiple data-live-search="true" multiple data-max-options="1"
id="boroughselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Neighborhood" multiple data-live-search="true" multiple data-max-options="1"
id="neighborhoodselect">
</select>
</div>
</div>
JS
$("#zipcode").keyup(function() {
var zipcode = $("#zipcode").val();
if (zipcode != "") {
console.log('disabled');
document.getElementById("boroughselect").disabled = true;
document.getElementById("neighborhoodselect").disabled = true;
} else if (zipcode == "") {
console.log('enabled');
document.getElementById("boroughselect").disabled = false;
document.getElementById("neighborhoodselect").disabled = false;
}
});

I do not know what you did with your real code, but it works perfectly in JS
const sel_1 = document.querySelector('#boroughselect' )
, sel_2 = document.querySelector('#neighborhoodselect' )
, zipcode = document.querySelector('#zipcode' )
zipcode.oninput=_=>
{
sel_1.disabled = sel_2.disabled = (zipcode.value!=='')
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
<div class="form-group col-md-4">
<input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Borough" data-live-search="true" id="boroughselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Neighborhood" data-live-search="true" id="neighborhoodselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>

Your code looks fine it's only the way you handle the disabled attribute needs a bit fix.
$('#zipcode').on('keyup', function () {
if ($(this).val().length) {
$('#boroughselect').attr('disabled', true);
$('#neighborhoodselect').attr('disabled', true);
console.log('disabled');
} else {
$('#boroughselect').attr('disabled', false);
$('#neighborhoodselect').attr('disabled', false);
console.log('enabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
<div class="form-group col-md-4">
<input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Borough" multiple data-live-search="true" multiple data-max-options="1"
id="boroughselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Neighborhood" multiple data-live-search="true" multiple data-max-options="1"
id="neighborhoodselect">
</select>
</div>
</div>

On change of a selected value show an input

I am trying to choose yes value in this dropdown, so I can show another input field to add discount.
I am trying but nothing is showing. Can you please help me?
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onclick="myFunction()" required>
<option value="" disabled selected >--Choose--</option>
<option value="yes" >Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
<script>
function myFunction() {
if (document.getElementById('is_offer').value = 'yes') {
document.getElementById('offer').innerText = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
}
</script>
function myFunction() {
if (document.getElementById('is_offer').value = 'yes') {
document.getElementById('offer').innerText = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
}
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onclick="myFunction()" required>
<option value="" disabled selected>--Choose--</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>

Your condition statement has issues. Use document.getElementById('is_offer').value === 'yes' (triple-equals)

function myFunction()
{
if (document.getElementById('is_offer').value === 'yes')
{
document.getElementById('offer').innerHTML = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div></div></div>';
}
}
and change onclick with onChange.

Use .innerHTML to set the div not innerText. innerText assumes all your html data is text and adds it like a text. ,For the yes condition, = is used for assignment but we have to compare so == is used. And call the function on onchange event not on click of the select tag
function myFunction()
{
if( document.getElementById('is_offer').value=='yes')
{
document.getElementById('offer').innerHTML='<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
else
document.getElementById('offer').innerHTML=''
}
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onChange="myFunction()" required>
<option value="" disabled selected >--Choose--</option>
<option value="yes" >Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>

You had 3 issues should be changed.
If you want to listen the change of input, you shoule use onchange instead of onclick.
In if condition you use assigning variables instead of comparison (use == or ===).
It seems you would like to change HTML content. So you should use innerHTML instead of innerText.
After fixing all of them we have code like this:
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onchange="myFunction()" required>
<option value="" disabled selected>--Choose--</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
<script>
function myFunction() {
if (document.getElementById('is_offer').value === 'yes') {
document.getElementById('offer').innerHTML = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
}
</script>

Prefer to use the onchange event on the select tag. Also, you should use === to compare the value with yes or no, not just = whish is an assignment.
By using a template and cloning it, you don't have to mix your JavaScript with HTML code, you just have to fetch the template, clone it and append it to your div.
Do not query the document to find your select in your handler, you have access to it via the event.target object, which you get access to as argument to your handler.
Also, don't forget to erase the discount when you select no.
function onSelect(event) {
const offer = document.getElementById('offer');
offer.innerHTML = '';
if (event.target.value === 'yes') {
const tpl = document.getElementById('discount-tpl');
const clone = document.importNode(tpl.content, true);
offer.appendChild(clone);
}
}
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onchange="onSelect(event)" required>
<option value="" disabled selected >--Choose--</option>
<option value="yes" >Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
<template id="discount-tpl">
<div class="form-group m-form__group row">
<label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label>
<div class="col-xl-9 col-lg-9">
<div id="asd"></div>
</div>
</div>
</template>

How to show the message after successful save/edit process?

I have been working on my new application and I use JQuery,HTML5 and Bootstrap 3 to develop my front end pages. However, in all the form in my app I need to show the message to the user after they submit the form. I tried to do the research and see what is the best way to do that but there is a lot of different opinions/options. Here is my example:
$('#frmSave').on('submit', submitFrm);
function submitFrm(e) {
e.preventDefault(); // Prevnts default form submit.
var frmID = e.target.id,
formData = $('#' + frmID).serialize();
$('#' + frmID).find(':submit').prop('disabled', true); // Disable submit button
if (formData) {
$('#frm_message').show().addClass('alert-success').html('Record successully saved!').delay(7000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-success').dequeue();
$('#' + frmID).find(':submit').prop('disabled', false);
});
} else {
$('#frm_message').show().addClass('alert-danger').html('Error!').delay(7000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-danger').dequeue();
$('#' + frmID).find(':submit').prop('disabled', false);
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="active"><span class="label label-primary">Active:</span></label>
<select class="form-control" name="frm_active" id="frm_active" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
<input type="text" class="form-control" name="frm_code" id="frm_code" maxlength="4" required>
</div>
<div class="form-group">
<label class="control-label" for="name"><span class="label label-primary">Name:</span></label>
<input type="text" class="form-control" name="frm_name" id="frm_name" maxlength="50" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frm_message" class="alert alert-Submit"></div>
</div>
</div>
</form>
While I was researching on the web I noticed that some application do not use time out for the message. They simple just leave the message on the form. To me that was bit confusing and I do not see a purpose of leaving that message on the screen. I use the timer and message disappears after 7 seconds. I'm wondering if there is better way to do this? Or the way I'm doing is one of the ways to go.

jQuery find all elements with same name start as selector

I am building the form which has SELECT and few inputs. The part of it looks like this (only for Monday example, there will be 7 days..):
<div class="row">
<div class="col-md-3">
<div class="form-group mb-md">
<input type="text" name="1[day]" class="form-control text-bold" value="Monday" readonly>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<select class="form-control input-md mb-md" name="1[open]">
<option value="1" selected>Open</option>
<option value="0">Closed</option>
</select>
</div>
</div>
<!-- Working Hours -->
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[start]" value="08:00">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[end]" value="22:00">
</div>
</div>
<!-- Booking Hours -->
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[from]" value="08:00">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[to]" value="22:00">
</div>
</div>
</div>
I want to make time fields with same name start as SELECT field name start react to SELECT change. If value is 0 then all fields with same name start get attribute disabled.
So far i made this function, however i don't know hot to determine changed field name and correspondingly take actions against other fields.
$("select[name$='[open]']").change(function() {
if ($(this).val() == 0) {
// Should disable all input fields with same name as SELECT
} else if ($(this).val() == 1) {
// Should enable all input fields with same name as SELECT
}
});

Not sure if this is what you are attempting to achieve.
Please try below code.
$("select[name$='[open]']").change(function() {
var num = $(this).attr("name").replace("[open]",'');
var elems = $( "input[name^='"+num+"']");
if ($(this).val() == 0) {
// Should disable all input fields with same name as SELECT
elems.prop('disabled',true);
} else if ($(this).val() == 1) {
// Should enable all input fields with same name as SELECT
elems.prop('disabled',false);
}
});
Check the working fiddle here.