We Keep Coding

how to check hidden input is empty or not use else if conditions in laravel

this is my hidden input field
<input type="hidden" id="hdnship" name="origin_port" value="">
this is my function to get value hidden input field
function myfunction(){
$('#printarray').on('click', function() {
var array = [];
$("input:checkbox[name=origin_port]:checked").each(function() {
array.push($(this).val());
});
alert(array);
$('#hdnship').val(array);
});
}

You can check you input if it is not empty this way:
if( !$("input").val() ) {
console.log("Empty");
}
or
if( $("input").val().length === 0 ) {
console.log("Empty");
}
or If you're sure it will always operate on a textfield element then you can just use 'this.value':
if( !$("input").value ) {
console.log("Empty");
}

I think you should be checking each input type text instead of checked attribute of a checkbox which is basically not the type of your hidden input:
function myfunction(){
$('#printarray').on('click', function() {
var array = [];
$("input[type=text]").each(function() {
if($(this).val().length !== 0) {
array.push($(this).val());
}
});
alert(array);
$('#hdnship').val(array);
});
}

You can try this also for check hidden empty or not
$(document).ready(function(){
$(".jsButton").click(function(){
var array = [],emptyvalue=[];
$("input[type=hidden]").each(function()
{
if($(this).val().length !== 0)
{
array.push($(this).val());
}
else
{
emptyvalue.push("value");
}
});
$('#lblHasValue').html(array.join(','));
$('#lblNotValue').html(emptyvalue.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" value="hidden1">
<input type="hidden" value="hidden2">
<input type="hidden" value="hidden3">
<input type="hidden">
<input type="hidden">
<button type="button" class="jsButton">Set & Get Hidden Value</button> <br/>
<lable id="lblHasValue"></lable> <br/>
<lable id="lblNotValue"></lable>
You can set if hidden field has no value if hidden field has value
you get and set

how to check if substring has a same value in same input using Jquery

I have a hidden input with different values. I want when checkbox is unchecked to remove-replace value.
<input id="test" type="hidden" name="test" value="4220752209,4220752209,4220752094,4220752094">
I Have a table in whose first column I have a checkbox.
Every time when I click I get the hidden value and store it in input like this
if ($("#test").val() == '') {
//this is my data aData.ordercode
$("#test").val(aData.ordercode);
} else {
$('#test').val($('#test').val() + "," + aData.ordercode);
}
Now I want when I unchecked from table to find and replace the same value if you see my value has same numbers i want when uncheck a checkbox to find and I have doing like this
if ($('input[type=checkbox]').is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
if ($("#test").val().indexOf(aData.ordercode) > -1) {
alert("Yes");
}

Please try these code :-
<input id="checkbox" type="checkbox" value="4220752209"/>
<input id="test" type="hidden" name="test" value="4220752209,4220752219,4220752095,4220752096"/>
$('input[type=checkbox]').on('click',function(){
val = $(this).val();
if($(this).is(':checked')) {
var temp_array = $("#test").val().split(",");
temp_array = jQuery.grep(temp_array, function(value) {
return value != val;
});
$("#test").val(temp_array.join());
}
else {
$("#test").val($("#test").val()+","+val);
}
});

Hide element based on value of other elements

I am trying to hide a table based on the value of two fields, so that if field2 is equal to field1 the table is hidden.
JSfiddle
HTML:
<form>
Expected Number of Items: <input type="text" value="14" name="totalItems" id="totalItems">
<p>
Number of Items Entered: <input type="text" value="14" name="enteredItems" id="enteredItems">
</form>
<p>
<table border="1" style="width:100%" id="hideThis">
<tr>
<td>This should be hidden when "totalItems" equals "enteredItems"</td>
</tr>
</table>
JS:
function toggleClass(eid, myclass){
var theEle = document.getElementById(eid);
var eClass = theEle.className;
if(eClass.indexOf(myclass) >= 0){
theEle.className = eClass.replace(myclass, "");
}else{
theEle.className += "" +myclass;
}
}

See the comments in the code.
// Function to hide/show the table based on the values of inputs
function toggleTable() {
// Hides the table if the values of both input are same
$('#hideThis').toggle($('#totalItems').val() !== $('#enteredItems').val());
}
$(document).ready(function() {
// Bind the keyup event on both the inputs, call the function on event
$('#totalItems, #enteredItems').on('keyup', toggleTable).trigger('keyup');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>Expected Number of Items:
<input type="text" value="14" name="totalItems" id="totalItems">
<p>Number of Items Entered:
<input type="text" value="14" name="enteredItems" id="enteredItems">
</form>
<p>
<table border="1" style="width:100%" id="hideThis">
<tr>
<td>This should be hidden when "totalItems" equals "enteredItems"</td>
</tr>
</table>
jsfiddle Demo

$(document).ready( function() {
$('#totalItems, #enteredItems').keyup(function(){
if( $('#totalItems').val() == $('#enteredItems').val() ){
$('#hideThis').hide();
}else{
$('#hideThis').show();
}
});
});
If you need to check also at page load:
function checkFields(){
if( $('#totalItems').val() == $('#enteredItems').val() ){
$('#hideThis').hide();
}else{
$('#hideThis').show();
}
}
$(document).ready( function() {
$('#totalItems, #enteredItems').keyup(function(){
checkFields();
});
checkFields();
});
Plain JavaScript implementation:
function checkFields(){
if( document.getElementById('totalItems').value == document.getElementById('enteredItems').value ){
document.getElementById('hideThis').style.display = 'none';
}else{
document.getElementById('hideThis').style.display = 'inline-block';
}
}
document.getElementById('totalItems').addEventListener('keyup', function (){
checkFields();
}, false);
document.getElementById('enteredItems').addEventListener('keyup', function (){
checkFields();
}, false);
checkFields();

Here is the new JSFiddle
$(document).ready(function () {
var webpart_ID = 'hideThis';
var FieldA_id = 'totalItems';
var FieldB_id = 'enteredItems';
if ($('#' + FieldA_id).val() === $('#' + FieldB_id).val())
$('#' + webpart_ID).hide();
else
$('#' + webpart_ID).show();
});
This works.

You can bind a keyup events for both the text boxes, from where you can call a function to check if both the values are same..
compare();
$("#totalItems,#enteredItems").keyup(function() {
compare();
});
function compare() {
if ($("#totalItems").val() == $("#enteredItems").val()) {
$("#hideThis").hide();
} else {
$("#hideThis").show();
}
}
Fiddle

button is not being enabled if checkbox is on

I want to enable button only if checkbox is on. What I am doing wrong here ? Thanks in advance..
index.html
<p><input id="agree" type="checkbox" /> I agree</p>
<input id="continue" value="continue" type="button" disabled="disabled" />
custom.js
$( document ).ready(function () {
$('#agree').change(function () {
var state = $(this).attr('value');
if (state == 'on') {
$('#continue').removeAttr('disabled')
} else if (state == '') {
$('#continue').attr('disabled','disabled');
}
});
});

You could simplify it to the following:
Example Here
$('#agree').on('change', function () {
$('#continue').attr('disabled', !this.checked);
});
$('#agree').on('change', function () {
$('#continue').attr('disabled', !this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input id="agree" type="checkbox" />I agree</p>
<input id="continue" value="continue" type="button" disabled="disabled" />
The reason your code wasn't working was because you were using .attr(). Since there is no value attribute, you needed to use .prop(). This still wouldn't work though because the value will always return on. You need to get the checked property accessing this.checked or .prop('checked') - working example using your original snippet.
$('#agree').on('change', function () {
if (this.checked) {
$('#continue').removeAttr('disabled')
} else {
$('#continue').attr('disabled', 'disabled');
}
});

Try this:
$( document ).ready(function() {
$('#agree').change(function() {
if(this.checked) {
$('#continue').removeAttr('disabled')
} else {
$('#continue').attr('disabled','disabled');
}
});
});

If you want to check if input has checked :
state = $(this).prop( "checked" );
this returns boolean value (true if checked or false if unchecked).

I got a annoying bug in storing input value using localStorage

I want to do is to store the current inputs even if the user refresh or close the browser.
My problem is if i click Yes in the radio button and refresh the page or close the browser and reopen it the No button is checked and the Yes button is unchecked.
testing link: http://jsfiddle.net/5kcsn/124/
current script:
$(document).ready(function () {
$('#employed_v1, #employed_v0, #test').on("change", function () {
debugger;
localStorage.setItem($(this).attr("id"), $(this).val())
});
$('#employed_v1, #employed_v0, #test').each(function (ind, val) {
debugger;
if ($(val).attr("id") != "employed_v1") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
if ($(val).attr("id") != "employed_v0") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
else {
if (localStorage.getItem($(val).attr("id")) == "Yes"){
$("#employed_v1[value=Yes]").prop("checked", true);}
if (localStorage.getItem($(val).attr("id")) == "No"){
$("#employed_v0[value=No]").prop("checked", true);}
}
});
$('[id="employed_v0"]').on('click', function(){
$('#test').val('');
$('#test').prop('disabled', true);
});
$('[id="employed_v1"]').on('click', function(){
$('#test').prop('disabled', false);
});
});

To store the check state you should use the checked attribute.
However, here is a modified version :
$(document).ready(function () {
$('#employed_v1, #employed_v0').on("change", function () {
localStorage.setItem('employed', $(this).attr("id"))
});
$('#' + localStorage.getItem('employed')).attr('checked', true);
});

There are many things to consider here. First, the change-event is only fired on the one radiobutton that is clicked, and you are storing the value of the radiobutton to localstorage. But that information is the same that is already present in the HTML, so it really doesn't serve the purpose. The radiobuttons are grouped by the name-attribute, so you could store only one variable that tells which value of the radiobuttons is the selected one, here is an example:
Html:
<input type="radio" name="employed" id="employed_v1" value="Yes" required="required" class="js-store" />Yes
<br />
<input type="radio" name="employed" id="employed_v0" value="No" required="required" class="js-store" />No
<br>
<input type="text" name="test" id="test" class="js-store" />
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.js-store').on("change", function () {
if ($(this).is(":radio")) {
localStorage.setItem($(this).attr("name"), $(this).val());
}
else {
localStorage.setItem($(this).attr("id"), $(this).val());
}
});
$(".js-store").each(function() {
if ($(this).is(":radio")) {
var value = localStorage.getItem($(this).attr("name"));
if (value) { $(this).prop("checked", value === $(this).val()); };
}
else {
var value = localStorage.getItem($(this).attr("id"));
if (value) {$(this).val(value);}
}
});
});
</script>