I'm creating a custom update form and I want to display address information using MERGE tags.
I can find no information on how to display the Address subfields (Address 1, Address 2, City, etc.). I thought it might be along the lines of
value="*|MERGE3[addr1]|*"
e.g.
<tr>
<td align="right" class="formLabel">Address</td>
<td align="left">
<div class="field-wrapper">
<div class="addressfield">
<span class="subfield addr1field">
<label for="MERGE3-addr1"></label>
<input type="text" id="MERGE3-addr1" name="MERGE3[addr1]" maxlength="70" value="*|MERGE3[addr1]|*" placeholder="" class="av-text">
</span>
....
But this literally prints
value="|MERGE3[addr1]|"
in the update form field for Address 1. Can anyone help? It would be useful to know if it's even possible.
Related
I’m updating a site for my brother who teaches training courses. He has a registration form on the site that collects name, age, address, etc. That information is sent to him through cfmail with a copy sent to the registrant. The registrants then mails in a check via snail-mail to complete the registration. (My brother does NOT want to use an online payment method.)
Included in the form is the course name, location and fee. He asked if it was possible to implement some sort of “Promo Code” to offer discounts to select users. I’ve added PromoCode and PromoCode_Fee columns in SQL and am able to make it all work throughout the process.
My problem is on the user end. If the user mistypes the PromoCode in the form, the app will obviously not register the discount, send the registration emails out with the standard fee, and store the registration info in the DB. The only way for the user to fix the PromoCode would be to re-register, which would re-send the emails and add a new registration to the DB.
What I’d like to do is verify that the user entered a valid PromoCode in the input field PRIOR to submitting the form by comparing what they typed to the PromoCode stored in the DB. If the PromoCode doesn’t match, add “Promo Code is invalid” under the input field.
I do this as a hobby, am self-taught and am not sure if it’s even possible (or good idea.) I imagine it’s not possible to do with ColdFusion and would most likely need some sort of JS or jQuery - both of which I’m pretty illiterate in.
I’ve been searching for hours to see if anyone had any similar questions, but have come up short. Any help or pointing me in the right direction would be greatly appreciated.
Here's the code I'm putting together:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/scripts/jquery.validate.js"></script>
<script>
$(document).ready(function() {
var validator = $("#signupform").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2,
remote: "/components/promocodecomponent.cfc?method=validateUserName"
}
}
});
});
</script>
<div class="row justify-content-center">
<div class="col-10">
<form id="signupform" autocomplete="off" method="get" action="">
<table>
<tr>
<td class="label">
<label id="lfirstname" for="firstname">First Name</label>
</td>
<td class="field">
<input id="firstname" name="firstname" type="text" value="" maxlength="100">
</td>
<td class="status"></td>
</tr>
<tr>
<td class="label">
<label id="llastname" for="lastname">Last Name</label>
</td>
<td class="field">
<input id="lastname" name="lastname" type="text" value="" maxlength="100">
</td>
<td class="status"></td>
</tr>
<tr>
<td class="label">
<label id="lusername" for="username">Username</label>
</td>
<td class="field">
<input id="username" name="username" type="text" value="" maxlength="50">
</td>
<td class="status"></td>
</tr>
<tr>
<td class="field" colspan="2">
<input id="signupsubmit" name="signup" type="submit" value="Signup">
</td>
</tr>
</table>
</form>
</div>
</div>
Here's the component code:
component {
remote boolean function validateUserName(string username) returnFormat="json"{
if (arguments.username == "john") {
return true;
}
return "Username already in use";
}
}
Usually, you'd need to post some code that you've tried and isn't working. But you've outlined what you want and are just not sure where to start.
You can test just the value of the discount code before allowing the whole form to be submitted. You don't say how you're doing client-side form validation. I'd suggest using jQuery Validate to handle that, it's very easy to implement.
https://jqueryvalidation.org/documentation/
Go to the demo "The Remember The Milk sign-up form". This form checks the username field via Ajax before the rest of the form can be submitted.
var validator = $("#signupform").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2,
remote: "users.action"
}
}
});
If not using this framework, then just make an Ajax request when change is triggered on the discount code field and make sure there's a positive response from that before you allow the form to be submitted.
Also, you need to do server-side validation of the discount code when someone submits the form. If they've entered a discount code that is invalid, then don't allow the form to be processed until they enter a valid code or they clear the value from that field.
I do this as a hobby, am self-taught ... I imagine ... would most likely need some sort of JS or jQuery - both of which I’m pretty illiterate in.
The plugin is easy to use but there may be a slight learning curve depending on your jQuery and javascript skills. Bigger tasks are easier to tackle if you you break them into smaller ones and solve those one at a time. Start with the code snippet #AdrianJMoreno posted and delve into the documentation to understand what the code is doing and how:
validate() - a function that initializes the plugin for a specific form
rules - options that tells the plugin which form fields should be validated and how
remote - remote url to be called via ajax to validate a field's value. The remote endpoint should either return true/false or true/"some custom error message";
1. Build Sample Form
Once you have a sense of how the plugin works, move on to building a scaled down version of the Milk demo form using the code snippet.
JQuery and Validate libraries
<!-- modify js paths as needed -->
<script src="scripts/jquery-3.1.1.js"></script>
<script src="scripts/jquery.validate.min.js"></script>
Javascript initialization (so plugin validates the form)
<script>
$(document).ready(function() {
var validator = $("#signupform").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2,
remote: "users.action"
}
}
});
});
</script>
HTML form (only the fields in code snippet)
<form id="signupform" autocomplete="off" method="get" action="">
<table>
<tr>
<td class="label">
<label id="lfirstname" for="firstname">First Name</label>
</td>
<td class="field">
<input id="firstname" name="firstname" type="text" value="" maxlength="100">
</td>
<td class="status"></td>
</tr>
<tr>
<td class="label">
<label id="llastname" for="lastname">Last Name</label>
</td>
<td class="field">
<input id="lastname" name="lastname" type="text" value="" maxlength="100">
</td>
<td class="status"></td>
</tr>
<tr>
<td class="label">
<label id="lusername" for="username">Username</label>
</td>
<td class="field">
<input id="username" name="username" type="text" value="" maxlength="50">
</td>
<td class="status"></td>
</tr>
<tr>
<td class="label">
<label id="lsignupsubmit" for="signupsubmit">Signup</label>
</td>
<td class="field" colspan="2">
<input id="signupsubmit" name="signup" type="submit" value="Signup">
</td>
</tr>
</table>
</form>
2. Test (Sample Form)
Test out the form in a browser. Since all fields are required, leaving the fields blank and submitting should trigger error messages on submit
3. Create Remote URL
The live demo form uses a mocking library to simulate a remote ajax call. The mock url "users.action" must be replaced with a real url on your server. That url will point to a new component (or "CFC") you create. The component should contain a remote accessible method that validates a given username.
Keep things simple for the initial test. Have the method return true if the input equals a test value like "John" and false for everything else. Ultimately you'll replace that with real business logic, like a database lookup, but one step at a time.
YourComponentName.cfc
component {
remote boolean function validateUserName(string username) returnFormat="json"{
if (arguments.username == "john") {
return true;
}
return false;
}
}
4. Test (Remote URL)
To test a remote method in a browser, specify the path, name of the method to invoke, and any parameters that method expects. Verify the component returns the expected results. The result should be true for username=John and false for any other value.
Example url:
https://localhost/path/YourComponentName.cfc?method=validateUsername&username=john
Valid: UserName=John:
InValid: UserName=Bob:
5. Fix Remote URL
With the component working, update the javascript code to point to the new cfc. Omit the username parameter because the plugin will pass it to the ajax call automatically.
For example, if the component location on disk is:
c:\path\webroot\path\YourComponentName.cfc
Use the url:
/path/YourComponentName.cfc
JS Snippet:
...,
username: {
...,
remote: "/path/YourComponentName.cfc?method=validateUserName"
}
6. Test Form (.. are you sensing a theme?)
Test the final form again with both a valid and invalid usernames to confirm it works as expected.
Invalid usernames "Mike" or "Bob" should trigger an error
Valid username "John" should not trigger an error
Next Steps ...
Continue to expand the working example and learn more about the plugin features by adding some customization. The next steps are left as an exercise for the reader ...
Replace hard coded test logic in the cfc with a database lookup
Replace default error message "Please fix this field" with a more user friendly message
Change the appearance of valid and invalid fields using CSS
I am having issues with chromedp.Clear()
I am succesfully able to fill the below input with:
chromedp.SendKeys(`input[name="TESTFIELD"]`, "new value", chromedp.ByQuery)
But clearing it first with:
chromedp.Clear(`input[name="TESTFIELD"]`, chromedp.ByQuery)
A snippet of the HTML:
<input type="text" name="TESTFIELD" size="30" maxlength="30" value="" class="cssKenmerkNoLookup" valign="middle" onfocus=fnFieldChanged(this,1,0); onchange="fnSetDirty('cmdOK,cmdOKNext,cmdOKInvoeren,cmdStartMITOffice');" onkeydown="fnCheckForEdit('cmdOK,cmdOKNext,cmdOKInvoeren,cmdStartMITOffice', 'TESTFIELD',1);" onkeyup="fnCheckForEdit('cmdOK,cmdOKNext,cmdOKInvoeren,cmdStartMITOffice', 'TESTFIELD',0);" onpaste="fnCheckForEdit('cmdOK,cmdOKNext,cmdOKInvoeren,cmdStartMITOffice', 'TESTFIELD',0);" >
</td><td align="center" valign="middle" class="cssCellDetailsColLookup" nowrap >
I cant use the class, cssKenmerkNoLookup, since the same class is used with multiple inputs, so that is why I use "ByQuery"
What am I overlooking?
Issue solved.
by using:
chromedp.SetValue(selector, value, chromedp.ByQuery),
Current input value is replaced.
I am trying to get conditional display to work properly. What I am attempting to do is:
Within a block that has been merged, if a value is empty I want to display an input box along with a few other hidden variables I need to carry along with it, but if the value is not empty I wish to simply display that value.
PHP
$cks . . some query;
$TBS->LoadTemplate("check.html") ;
$TBS->MergeBlock("cks",$cks);
$TBS->Show(TBS_NOTHING); echo($TBS->Source);
Template portion
<td width="25%" class="mod_row2">[cks.check1]</td>
<td width="25%" class="mod_row2">
[cks.value;ifempty=
<input type="text" name="value[]" value="" size="26">
<input type=hidden name="check_id[]" value="[cks.check_id]">
<input type=hidden name="equip_id[]" value="[cks.equip_id]">
]</td> "
Everything works except the values of the hidden cells are not merged. I don't know if this is the right way to do this or if this is possible . . .
TBS 3.8.0, php 5.3.3
Thanks
Peter
Your HTML part with <input> is not parsed because it is embedded in a TBS parameter (ifempty).
It is not a good practice to embed HTML/XML in the TBS fields.
The best way is to use conditional display with block. The magnet feature is nice for that.
Example for you :
<td width="25%" class="mod_row2">[cks.check1]</td>
<td width="25%" class="mod_row2">
<div>
[cks.value;ope=mok:;magnet=div]
<input type="text" name="value[]" value="" size="26">
<input type=hidden name="check_id[]" value="[cks.check_id]">
<input type=hidden name="equip_id[]" value="[cks.equip_id]">
</div>
</td>
In this example, the parameter ope=mok: means that the block is displayed if the value is empty string (''), and is deleted in other cases.
I have this HTML structure:
https://imgur.com/a/8TevWtz
<tbody>
<tr data-drupal-selector="edit-strings-996" class="odd">
<td><div id="edit-strings-996-original" class="js-form-item form-item js-form-type-item form-type-item js-form-item-strings-996-original form-item-strings-996-original form-no-label">
<label for="edit-strings-996-original" class="visually-hidden">Source string (Built-in English)</label>
Search
</div>
</span></td>
<td><div class="js-form-item form-item js-form-type-textarea form-type-textarea js-form-item-strings-996-translations-0 form-item-strings-996-translations-0 form-no-label">
<label for="edit-strings-996-translations-0" class="visually-hidden">Translated string (Español)</label>
<div class="form-textarea-wrapper">
<textarea lang="es" data-drupal-selector="edit-strings-996-translations-0" id="edit-strings-996-translations-0" name="strings[996][translations][0]" rows="1" cols="60" class="form-textarea resize-vertical">Search</textarea>
</div>
</div>
</td>
</tr>
<tr data-drupal-selector="edit-strings-1176" class="even">
<td><div id="edit-strings-1176-original" class="js-form-item form-item js-form-type-item form-type-item js-form-item-strings-1176-original form-item-strings-1176-original form-no-label">
<label for="edit-strings-1176-original" class="visually-hidden">Source string (Built-in English)</label>
Search page
</div>
I need a Xpath that I can find only the exact text "Search". I cannot use contains() because it will return all rows with this word, I need only the row with "Search" word only.
My knowledge of Xpath is not great, so I tried many things like:
//tbody/tr/td/div[.='Search']
//tbody/tr/td/div[normalize-space(.)='Search']
//tbody/tr[1]/td/div/. -> This one works but I cannot pass the tr[1] because I'll use this xpath in an automation and the text I want is not always in the first row, so I need to find by Text and not by Index.
The problem is that all texts have these whitespaces and it makes it worse for me to make it work.
Text content of target div node is not just "Search", but "Source string ... Search", so you can try
//div[normalize-space(text()[2])='Search']
Assuming you're looking for the div which has text containing the string Search, this should work:
//tbody/tr/td/div[contains(., 'Search')]
It's a bit dirty in that it would also detect Search anywhere under the div, e.g. including in the label's text, if applicable.
I'm trying to use Dojo (1.3) checkBoxes to make columns appear/hide in a Dojo Grid that's displayed below the checkBoxes. I got that functionality to work fine, but I wanted to organize my checkBoxes a little better. So I tried putting them in a table. My dojo.addOnLoad function looks like this:
dojo.addOnLoad(function(){
var checkBoxes = [];
var container = dojo.byId('checkBoxContainer');
var table = dojo.doc.createElement("table");
var row1= dojo.doc.createElement("tr");
var row2= dojo.doc.createElement("tr");
var row3= dojo.doc.createElement("tr");
dojo.forEach(grid.layout.cells, function(cell, index){
//Add a new "td" element to one of the three rows
});
dojo.place(addRow, table);
dojo.place(removeRow, table);
dojo.place(findReplaceRow, table);
dojo.place(table, container);
});
What's frustrating is:
Using the Dojo debugger I can see that the HTML is being properly generated for the table.
I can take that HTML and put just the table in an empty HTML file and it renders the checkBoxes in the table just fine.
The page renders correctly in Firefox, just not IE6.
The HTML that is being generated looks like so:
<div id="checkBoxContainer">
<table>
<tr>
<td>
<div class="dijitReset dijitInline dijitCheckBox"
role="presentation" widgetid="dijit_form_CheckBox_0"
wairole="presentation">
<input class="dijitReset dijitCheckBoxInput"
id="dijit_form_CheckBox_0"
tabindex="0" type="checkbox"
name="" dojoattachevent=
"onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
dojoattachpoint="focusNode" unselectable="on"
aria-pressed="false"/>
</div>
<label for="dijit_form_CheckBox_0">
Column 1
</label>
</td>
<td>
<div class="dijitReset dijitInline dijitCheckBox"
role="presentation" widgetid="dijit_form_CheckBox_1"
wairole="presentation">
<input class="dijitReset dijitCheckBoxInput"
id="dijit_form_CheckBox_1"
tabindex="0" type="checkbox"
name="" dojoattachevent=
"onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
dojoattachpoint="focusNode" unselectable="on"
aria-pressed="false"/>
</div>
</td>
</tr>
<tr>
...
</tr>
</table>
</div>
I would have posted to the official DOJO forums, but it says they're deprecated and they're using a mailing list now. They said if a mailing list doesn't work for you, use StackOverflow.com. So, here I am!
It looks like you forgot to create a <tbody> element.
I also encountered this issue when trying to generate a table using dojo in IE7. The html is there but nothing is rendered. Again, the solution is to use thead, tbody tags.