CODEWITHSUNDEEP
javascriptjquery
Ignus
Ignus

Reputation: 139

Passing value to hidden input

I'm not a JavaScript/jQuery developer but I have to deal with it so please forgive this stupid question. I got a software which allow JavaScript/jQuery customization and I need to migrate some reports to a new version. In the old software version this worked fine:

$("#prop input").val('asd').blur();

please note that #prop is the div id (hidden) which contains the input field I want to fill, this input field is a software object I can't modify so I need to use this approach. In the new version the code written above still works if the div is visible, it doesn't work anymore while is hidden. I discovered in the software release notes that jQuery may be not supported anymore, JavaScript still is. So I tried to change my code in:

document.getElementById('prop').value = 'asd';

but it doesn't work. How can I replace this instruction in plain JavaScript? Also why the old jQuery command still works while div is visible

EDIT: I think is necessary at this point to provide more information about my code. It may differs a little from what I wrote before but this is the real case I need to fix. I think the main problem is the blur method on the hidden div, because just passing the 'value' is not sufficient to trigger other actions. As stated above this code works fine while the div dt1 is not hidden.

var result = $("#valiDate").text();
var datelist = [];
datelist = result.split(",");
//document.getElementById("log").innerHTML =result.toString();
//update document property after selection
function datePicker_onSelect(selectedDate){
 //alert(selectedDate)
 $("#dt1 input").focus()
 $("#dt1 input").blur()
 //document.getElementById("dt1").innerHTML=selectedDate
}



pickerOptions = {
 altFormat: "dd/mm/yy",
 showOn: 'button', 
 buttonImageOnly: true, 
 buttonImage: 'https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Calendar.png', 
 minDate: "-36M", maxDate: "+0D",
 changeMonth: true,
 changeYear: true,
 altField:"#dt1 input",
 onSelect:datePicker_onSelect,
 beforeShowDay: function(d) {
    // normalize the date for searching in array
    var dmy = "";
    dmy += ("00" + d.getDate()).slice(-2) + "/";
    dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "/";
    dmy += d.getFullYear();
    if ($.inArray(dmy, datelist) >= 0) {
        return [true, ""];
    }
    else {
        return [false, ""];
        }
    }
 }

//create the date picker
document.getElementById('dt1picker').innerHTML="<input type='hidden' id='datePicker'>"
$("#datePicker").datepicker(pickerOptions);

Also I say thank you to all users that gave their contributions.

Upvotes: 1

Views: 219

Answers (2)

Andy G
Andy G

Reputation: 19367

Do not attempt to set the value and perform blur() in the same statement. It is probably the attempt to blur() that is causing the failure with jQuery when not visible.

var $propInput = $("#prop input");
$propInput.val('asd');
$propInput.blur();

In vanilla JavaScript it would be

var propInput = document.querySelector("#prop input");
propInput.value = 'asd';
propInput.blur();

Upvotes: 1

brk
brk

Reputation: 50346

Try this one. This will first get the element then find a child input and will set the value

document.getElementById('prop').querySelector('input').value = 'asd';

Upvotes: 1

Related Questions