This topic is locked
[SOLVED]

 Using Javascript to conditionally remove Mandatory field

2/11/2015 6:40:43 PM
PHPRunner General questions
A
Anapolis author

I am using the latest version of PHPRunner 8.
I have done a number of things in forms with javascript to hide fields, show fields, change colors, etc, depending on what changes a User makes in the form.
Now I would really like to know how I can use the change in value in one field to trigger 3 other fields which are Mandatory by default to become Optional.
As in "Yes" radio button selected, then the next 3 fields require values before the form will save.
If "No" radio button is selected the javascript removes the Mandatory requirement for those 3 fields to be filled in.
Somehow I think it is easier to do this with straight text fields that are Mandatory by default than it is to change the action of dropdown field options made with the lookup Wizard.
At any rate, my Googling and looking at Help in PHPRunner hasn't given me the magic script yet. Thank you for clever suggestions.

A
Anapolis author 2/12/2015

[size="3"]I have been trying and trying to Use Javascript on an Add page form to alter the property of certain fields from "Required" to Optional (not required). I need for the fields to be Required except for if the User selects a second Option of a Radio Button.
In that case I get rid of certain fields, show other fields, but must allow the hidden fields to be processed with no values because the Javascript has removed the Required obligation.
It looks at the selected value of a Radio Button "Status" Options 1) Terminiert 2) Storno -- pre-selected Default value = "Terminiert"
The Javascript OnLoad Event for this Add page hides some input fields for one selected option & shows them for the other option.



var ctrlStatus = Runner.getControl(pageid, 'status');
var ctrlGrund = Runner.getControl(pageid, 'grund');

//ctrlTotal.setValue(Number(ctrlPrice.getValue()) * Number(ctrlQuantity.getValue()));

//var ctrlStatus = Runner.getControl(pageid,'trainingtype');
$("tr[data-fieldname='grund']").hide();
ctrlStatus.on('change', function(e){
if (this.getValue() == 'Storno'){

ctrlGrund.setValue('');

ctrlGrund.addValidation("IsRequired");

$("tr[data-fieldname='grund']").show();

$("tr[data-fieldname='trainingdate']").hide();

$("tr[data-fieldname='trainingtype']").hide();

$("tr[data-fieldname='beginn']").hide();

}

if (this.getValue() == 'Terminiert'){
$("tr[data-fieldname='grund']").hide();

$("tr[data-fieldname='trainingdate']").show();

$("tr[data-fieldname='trainingtype']").show();

$("tr[data-fieldname='beginn']").show();

}
});


Only these 2 lines do not have any effect on the action of the form and are not reflected in the code when I use Inspect Element.
ctrlGrund.setValue('');

ctrlGrund.addValidation("IsRequired");
I have tried setting all fields as Required, which they should be, and then removing that condition for one field when Status has one value, and removing that condition for 3 other fields if the other option of Status is chosen.



Now I have made all these fields Optional and tried to add the "Required" to fields. NOTHING is working to enable me to change the Value or the Required condition for fields.

The conditions I have set up in that code works perfectly to dynamically show or hide field rows. So how can I get a response to my other requirement?
I have looked all over the Forum, Tutorials, the PHPRunner Help manual, javascript tutorials online.
HOW can I control with just Javascript the Required condition dynamically for fields?[/size]

A
Anapolis author 2/14/2015

At Last.
It took sleep and coffee.
NOW I find the Javascript solutions .. http://xlinesoft.com/asprunnerpro/docs/ctrl_removevalidation.htm
http://xlinesoft.com/asprunnerpro/docs/ctrl_addvalidation.htm
Now to clean up my code and then rewrite with the examples found here.
I knew I had seen these pages Somewhere.
Danke.

A
Anapolis author 2/14/2015

[size="3"]Following the javascript info in the Help manual I have made 2 fields Required in a form when it first loads. The Radio Button Status field is permanently set for Required.
I used this code in Javascript onLoad Events for the Add page.[/size]



var ctrlStatus = Runner.getControl(pageid, 'status');

var ctrlGrund = Runner.getControl(pageid, 'grund');

var ctrl = Runner.getControl(pageid, 'trainingtype');

ctrl.addValidation('IsRequired');

var ctrl = Runner.getControl(pageid, 'beginn');

ctrl.addValidation('IsRequired');

$("tr[data-fieldname='grund']").hide();

var ctrlTrainingtype = Runner.getControl(pageid,'trainingtype);');

var ctrlGrund = Runner.getControl(pageid,'grund');

ctrlStatus.on('change', function(){
if (this.getValue() == 'Storno'){
$("tr[data-fieldname='grund']").show();

$("tr[data-fieldname='trainingdate']").hide();

$("tr[data-fieldname='trainingtype']").hide();

$("tr[data-fieldname='beginn']").hide();

}

if (this.getValue() == 'Terminiert'){
$("tr[data-fieldname='grund']").hide();

$("tr[data-fieldname='trainingdate']").show();

$("tr[data-fieldname='trainingtype']").show();

$("tr[data-fieldname='beginn']").show();

}

});


I get this where the loaded form shows Field Status already marked "Terminiert" -- Appointment set

[size="3"]If I try to submit it without putting in values into Trainingtype and Beginn it will show Error messages that each of these fields has to be filled in with one of the Dropdown list options.
Exactly the way I intended.[/size]


[size="3"][size="3"]IF the user is not reporting "Terminiert" then he or she would select STORNO, the next value in the Radio button.
And they would see this....[/size][/size]


[size="3"]HERE IS my remaining problem... I cannot UNSET the Required condition in the fields Trainingtype and Beginn, which are now hidden by javascript.
I cannot submit this form because the hidden fields are still Required but with no values selected because the values in this case do not fit this part of the Form.
If if I try code like this to remove IsRequired on the fields that are hidden it does not work, form still cannot be submitted.[/size]



if (this.getValue() == 'Terminiert'){

ctrlBeginn.removeValidation('IsRequired');

ctrlTrainingtype.removeValidation('IsRequired');

$("tr[data-fieldname='grund']").hide();

$("tr[data-fieldname='trainingdate']").show();

$("tr[data-fieldname='trainingtype']").show();

$("tr[data-fieldname='beginn']").show();

}


[size="3"]Solution?[/size]

[size="3"]So the remaining puzzle is how to use the same function that hides fields or shows fields according the radio button selection on Change, to Reset or Remove the Validation "IsRequired" condition at the same time as fields are shown or hidden?
I have used, by the way, single quote marks and double quote marks with no change.[/size]

W
wpl 2/15/2015

Maverick,
in your final code example you refer to "ctrlBeginn":
if (this.getValue() == 'Terminiert'){

ctrlBeginn.removeValidation('IsRequired');
But I can't see where ctrlBeginn is being initialized. Because you add the validation to this control like so:
var ctrl = Runner.getControl(pageid, 'beginn');

ctrl.addValidation('IsRequired');
Am I missing something or is some code missing from your example?
Regards

A
Anapolis author 2/15/2015

Thank you for taking the time to look my problem over,wpl.

I did come upon a solution that finally takes care of everything I wanted to do. I had to reuse one "function", so to speak, to get fields to hide or show, and the same condition restated to validate or unvalidate fields.
Here is the working solution:



var ctrlStatus = Runner.getControl(pageid, 'status');

var ctrlGrund = Runner.getControl(pageid, 'grund');

var ctrl = Runner.getControl(pageid, 'trainingtype');

ctrl.addValidation('IsRequired');

var ctrl = Runner.getControl(pageid, 'beginn');

ctrl.addValidation('IsRequired');
$("tr[data-fieldname='grund']").hide();
ctrlStatus.on('change', function(){

if (this.getValue() == 'Terminiert'){
$("tr[data-fieldname='grund']").hide();

$("tr[data-fieldname='trainingdate']").show();

$("tr[data-fieldname='trainingtype']").show();

$("tr[data-fieldname='beginn']").show();

}

if (this.getValue() == 'Storno'){
$("tr[data-fieldname='grund']").show();

$("tr[data-fieldname='trainingdate']").hide();

$("tr[data-fieldname='trainingtype']").hide();

$("tr[data-fieldname='beginn']").hide();

}

});
ctrlStatus.on('change', function(){

if (this.getValue() == 'Terminiert'){

ctrlGrund.removeValidation('IsRequired');

}

if (this.getValue() == 'Storno'){

var ctrl = Runner.getControl(pageid, 'trainingtype');

ctrl.removeValidation('IsRequired');

var ctrl = Runner.getControl(pageid, 'beginn');

ctrl.removeValidation('IsRequired');

ctrlGrund.addValidation('IsRequired');

var ctrl = Runner.getControl(pageid,'trainingdate');

ctrl.removeValidation('IsRequired');

}

}

);