I am trying to find out how to change the control visibility of a text box at runtime for an Orbeon form. At the following sample, I have created an image button - when the user clicks on this button I wish to show / hide another button but unfortunately my code is not working properly:
<xf:trigger>
<xf:label>
<xf:output value="concat('<img src=''http://**********:8081/green-light.png', image, '''>')"
mediatype="text/html"/>
</xf:label>
<xxf:script event="DOMActivate">
var remarksControl = ORBEON.jQuery('*[id $= "remarks-control"]')[0];
remarksControl.hidden= true;
</xxf:script>
</xf:trigger>
</fr:c>
<fr:c y="1" x="7" w="6">
</fr:c>
<fr:c x="1" y="2" w="6">
<xf:input id="remarks-control" bind="remarks-bind">
<xf:label ref="$form-resources/remarks/label"/>
<xf:hint ref="$form-resources/remarks/hint"/>
<xf:alert ref="$fr-resources/detail/labels/alert"/>
</xf:input>
</fr:c>
What is the best approach to implement this kind of functionality? What I am actually trying to achieve is to have a form with several images and the user when clicks on an image she will be able to activate / deactivate several text fields on the form.
Thanks in advance
I would try to avoid using JavaScript to handle a case like this. The button is bound to an element, just like any other control. So you write some XForms that stores a value, say show-textfield, when the button is clicked. Assuming your button is named button, you can do so with the following custom model:
<xf:model xmlns:xf="http://www.w3.org/2002/xforms">
<xf:action
observer="button-control"
event="DOMActivate">
<xf:setvalue ref="event('xxf:binding')">show-textfield</xf:setvalue>
</xf:action>
</xf:model>
Then the control you want to show upon the button being clicked can have the Visibility formula $button = 'show-textfield'. As a result, you'll get a result like:
Related
see following snip of code
$(document).on('input','#id1, #id2, #id3', function(){
$id1 = $('#retail').val();
$id2 = $('#tax').val();
$id3 = $('#discount_per_unit').val();
$total = Number($id1) + Number($id2) - Number($id3);
$('#total').val($total);
});
now, user gets to input field for #id1, #id2. but I have a Ajax fill in #id3 for the user depending on conditions. the .on(input or .on(change event only detect user input but not the Ajax input. So is there a way to get jquery to detect Ajax input as well.
basically I have a drop down menu user can pick, and Ajax will take the drop down value to get an additioanl data and auto fill into id3 input field. look something like this.
$('#id3').val($somevalue);
but my .on("change" does not detect when user picked a different drop down option so the #id3 is updated but my calcuation that uses id1 though id3 did not update unless I change something on id1 or id2.
You update $('#id3').val($somevalue); didn't trigget any event, they are based on user's actions.
If you want to manually trigger one you can do
$('#id3').val($somevalue).trigger('change') // or 'input'
In my view model I have a field. This field can be selected from a drop down list or entered in a textbox. I have two radio buttons which allows to select between drop and textbox.
<div class="frm_row" id="contractorRow">
#Html.RadioButton("IsContractorNew", "false", true)
#Html.Label(#Resources.SomeLabels.Existing)
#Html.RadioButton("IsContractorNew", "true", false)
#Html.Label(#Resources.SomeLabels.New)
<div class="frm_row_input" id="contractorDropDownList">
#Html.DropDownListFor(model => model.CONTRACTOR, Model.Contractors)
#Html.ValidationMessageFor(model => model.CONTRACTOR)
</div>
<div class="frm_row_input" id="contractorTextBox" style="display: none;">
#Html.TextBoxFor(model => model.CONTRACTOR)
#Html.ValidationMessageFor(model => model.CONTRACTOR)
</div>
</div>
I prepared a javascript code for hiding, showing and clearing controls while selecting radio buttons. The problem is - field is bound only to the first control (drop down list).
EDIT:
I solved this problem by creating one hidden field and scripting whole logic to bind active control with it and therefore with the model. Anyway if anyone knows simpler solution, please post it.
I know this is an old question, but for those dealing with this issue, here's a solution:
Explanation
When a form is submitted, input elements are bound to the model by their name attribute. Let's say you use HTML helpers to generate your form, and you generate two input fields which bind to the same property on the model. When rendered to the DOM, they both have the same name attribute.
<input name="Passport.BirthPlace" id="birthPlaceDropDown" ... >
<input name="Passport.BirthPlace" id="birthPlaceInfoTextbox" ... >
When the form is submitted, it will bind the first (in the DOM) input it finds to Passport.BirthPlace
A Solution
The quick and easy way to fix this is to use JQuery to change the name of the field you don't want bound on submit. For me, I use a checkbox to toggle which field shows. When the checkbox changes, I hide one control, change its name attribute, and show the other one (and change it's name attribute to Passport.BirthPlace) It looks like this, basically:
First, I run this on document ready
$('#birthPlaceInfoTextbox').attr('name', 'nosubmit'); // Change name to avoid binding on inactive element
Then, I create a listener for my checkbox which toggles which control should be bound:
$('#notBornUSCheckbox').change(function() {
if (this.checked) {
// Not born us was checked, hide state dropdown and show freeform text box
$('#stateDropDownSection').addClass('d-none'); // Hide drop down
$('#birthPlaceDropDown').attr('name', 'nosubmit'); // Change name to something other than Passport.BirthPlace
$('#birthPlaceInfoTextbox').attr('name', 'Passport.BirthPlace'); // Set this one to be bound to the model
$('#stateTextboxSection').removeClass('d-none'); // Show the textbox field
} else { // Opposite of above lines
$('#stateDropDownSection').removeClass('d-none');
$('#stateTextboxSection').addClass('d-none');
$('#birthPlaceInfoTextbox').attr('name', 'nosubmit');
$('#birthPlaceDropDown').attr('name', 'Passport.BirthPlace');
}
});
Instead of using Razor #Html.TextBoxFor... for your textbox, you could try using raw HTML e.g. <input />. Also, have your JavaScript code remove the other field from the DOM entirely when a radio button is clicked, before submitting the form.
I have a dropdown and text box in my application.Based on the selection of items in dropdown I need to disable the textbox. I am using to achieve this using JavaScript.But on the pressing refresh the controls are going to the original modes because the page is reloading.
I need to keep the textbox disabled even after the refresh of the page.
Can I achieve that functionality.
My JavaScript
function disable(){
var zone = $("#txtzone").val();
var eqtype= $("#txtetype").val();
if(eqtype=='Virtual'){
document.getElementById('txtsno').value='Virtual';
document.getElementById('txthesx').disabled=false;
document.getElementById('txtwstdt').disabled=true;
document.getElementById('txtwendt').disabled=true;
document.getElementById('txtemnt').disabled=true;
} else {
document.getElementById('txtsno').value='';
document.getElementById('txthesx').disabled=true;
document.getElementById('txtwstdt').disabled=false;
document.getElementById('txtwendt').disabled=false;
document.getElementById('txtemnt').disabled=false;
}
}
Please help me with this.
I have a form where the user can select a generic auto-population based on checking a radio button. When the user checks the auto-populate radio button, the fields are auto populated with the data and then the fields become disabled.
In this first part of the function, I pass the auto-filled data:
$('#myOptions').click(function()
$('#value1').val("Auto-filled data");
$('#Value2').val("Auto-filled data");
$('#Value3').val("Auto-filled data");
In this second part, I am disabling the html inputs
// now i am disabling the html inputs:
$('#Value4').prop("disabled", true);
$('#Value5').prop("disabled", true);
$('#value6').prop("disabled", true);
Suppose I have another field with an ID of "Value7" in the form, that I would like to hide from the user interface as part of this function.
How can I hide the "Value7" input upon function triggering? I appreciate the help, I am very new to JavaScript, though I find it very exciting!
Using jquery:
To hide
jQuery('#Value7').hide() or jQuery('#Value7').css("display","none")
To show the element back
jQuery('#Value7').show() or jQuery('#Value7').css("display","block")
or pure js:
javascript hide/show element
Try this javascript:
if you want disable:
document.getElementById('#Value7').setAttribute("disabled","disabled");
if you want enable:
document.getElementById('#Value7').removeAttribute('disabled');
if you want to hide :
document.getElementById('#Value7').css("display","none");
if you want to show:
document.getElementById('#Value7').css("display","block");
I am not getting what are you trying to ask actualy .
Let me know if this helps -
$("Value7").hide()
I have asp:DropDownList control which i want to display data to user who don't want to click on it.
But user only want to make Mouse hover over asp:DropDownList Control.
Is there any possible way to make it without using datalist control or gridview ?
If so let me know it please.
<script>
function Open_ddl(ddl) {
document.getElementById(ddl).size = 5
}
function Close_ddl(ddl) {
document.getElementById(ddl).size = 1
}
</script>
...
<asp:DropDownList ID="ddlPostClaim" runat="server" onmouseover="Open_ddl('ddlPostClaim')" onmouseout="Close_ddl('ddlPostClaim')"></asp:DropDownList>
This does however create a new problem where the mouseover over the menu items will not highlight them, at least for me. Nonetheless, it's a start.