Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts

    special characters and escaping

    Hi I have a form generated by jQuery. When the user types text in the input field it works fine. However, when she tries to insert an ampersand, it doesnt display the form results. I have a call function to display the form values back on my template before sending to the action page.

    Anyway, I've tried escaping the & with back slashes with no luck. Is there another way to insert an ampersand in my form input fields?
    Last edited by teedoff; 01-19-2011 at 08:54 PM.
    Teed

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    2 chunks out of a form I am currently writing:

    Code:
    teamInfo = $('#current').html();
    
    teamInfo = teamInfo.replace('&', '|');
    the second line is replacing all the ampersands with vertical pipes. I figured there should be no reason for a vertical pipe to make it in to the variable other wise. Later I just do the opposite the switch back to ampersands.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I'm sorry you lost me...lol Im very new to js and jQuery. Are you saying I can insert some code similar to what you suggested in order to replace one character ina form field with another ie "&"?

    If so, not exactly sure where to put this code. I would guess it needs to be right after the form and right before where the call function displays the results correct?
    Teed

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    you said, "I have a call function to display the form values back on my template before sending to the action page." Is that being done as the user types or is there a submission before it happens?

    If there is some kind of submission then something like:

    Code:
    <form id="form">
    <input type="text" id="user_input" />
    <input type="submit" value="submit" />
    </form>
    PHP Code:
    //jQuery
    $('form#form').submit(function(){
         var 
    userVal = $('#user_input').val(); // grab the user input
         
    var userVal userVal.replace('&''|'); // replace all the ampersands with pipes
         
    alert(userVal); // you should see the replacement
    }); 
    That shows how it will work, now what you actually need to make it work for you would depend on the rest of your code.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by harbingerOTV View Post
    you said, "I have a call function to display the form values back on my template before sending to the action page." Is that being done as the user types or is there a submission before it happens?

    If there is some kind of submission then something like:

    Code:
    <form id="form">
    <input type="text" id="user_input" />
    <input type="submit" value="submit" />
    </form>
    PHP Code:
    //jQuery
    $('form#form').submit(function(){
         var 
    userVal = $('#user_input').val(); // grab the user input
         
    var userVal userVal.replace('&''|'); // replace all the ampersands with pipes
         
    alert(userVal); // you should see the replacement
    }); 
    That shows how it will work, now what you actually need to make it work for you would depend on the rest of your code.
    Ok Sorry, yes its submission that calls the form values from a temp file that store the form values in a list. Then the list is "called" and displayed on the current page. (in a list as well)

    Code:
    <form>
      <div id="items">
        <fieldset class="product-grouping">
          <legend>Item 1</legend>
          <div class="vendor" style="padding-left: 30px;"> <span>Vendor: </span>
            <input type="text" class="vendor-input" name="vendor" />
            <a href="#" class="add-vendor">add vendor</a>
            <div class="vendor-products" style="padding-left: 60px;">
              <div class="product"> <span>Product: </span>
                <input type="text" class="product-input" name="product" />
                <a href="#" class="add-product">add product</a> </div>
            </div>
          </div>
        </fieldset>
      </div>
      <input type="button" id="add-item" value="add item" />
      <input type="button" id="submit" value="submit" />
    </form>
    I can link to my application if you need to see it. Sorry I;m not doing a better job of describing my issue, as I said I'm very new to js.

    btw: not that this should matter, but my application is a coldfusion template with jQuery to simply create a dynamic list. Shouldnt have a bearing on why the ampersand cant be used.
    Last edited by teedoff; 01-18-2011 at 10:40 PM.
    Teed

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Are you using jQuery ajax to send this to the backend? If so that would be the issue. For example if the user inputs a value of "Ham & Sons" into the input "vendor" it is going to be passed as:

    Code:
    YourPage.cfm?vender=Ham & Sons
    The URL string containf the "&" is looking for another variable. By changing it to a vertical pipe it would look like:

    Code:
    YourPage.cfm?vender=Ham | Sons
    and be passed alright. That can be stored just fine. Then when you want to redisplay the info, you can change all the vertical pipes back to ampersands.

    Am I on track? If nt, yep, might need to see more of the relevant code, especially the jQuery of what happens on submit and on callback.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    do the values not store, or do they just not display? "&" means something in an html tag that it doesn't in a textbox; you might simply need to escape the data for display purposes.

    search for html escape and youll find suitable code. heck, there's even a good html escape function in all IIS and IE error pages...
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by harbingerOTV View Post
    Are you using jQuery ajax to send this to the backend? If so that would be the issue. For example if the user inputs a value of "Ham & Sons" into the input "vendor" it is going to be passed as:

    Code:
    YourPage.cfm?vender=Ham & Sons
    The URL string containf the "&" is looking for another variable. By changing it to a vertical pipe it would look like:

    Code:
    YourPage.cfm?vender=Ham | Sons
    and be passed alright. That can be stored just fine. Then when you want to redisplay the info, you can change all the vertical pipes back to ampersands.

    Am I on track? If nt, yep, might need to see more of the relevant code, especially the jQuery of what happens on submit and on callback.
    Well. I think, lol its not a form value thats passed in the url.

    Here is the site.

    The form in question is the Cross Reference Form near the bottom of the page. Try typing text in the vendor or product form fields and include an apmersand. Then click the ajax submit button UNDER the cross ref form. It will say...loading..... but will never display the form results. To get an idea of how its supposed to work, remove the ampersand and click the button again and you will see the form results displayed.
    Teed

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    			$.ajax({
    				type: 'GET',
    				url: 'action.cfm?data=' + JSON.stringify(items),
    				dataType: 'html',
    				//complete: function(data){
    					//$('#results').html(data.responseText);
    					//$('#results').empty();
    					//$('#vendorProductList').show();
    				success: function() {
    								
    					$('#results').empty();			
    								
    					var vendorProductListHTML = 'vendorProductList.cfm?' + new Date().getTime();
    					//alert(calendarEventsHTML);
    					$('#vendorProductList').empty().hide();
    					$('#vendorProductList').load(vendorProductListHTML);
    					$('#vendorProductList').fadeIn(250);							
    								
    					//$('#vendorProductList').show();
    				},
    				error: function() {
    					alert('fail');
    				}
    			});
    I added the error : alert. It alerts fail on submit so the info is never being passed on.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Did you get the cross reference forms to work with any text? lol for some reason when I load my site from remote, it doesnt work period!

    Works locally though.
    Teed

  • #11
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Nope doesn't work at all.

    if i pass:
    Code:
    action.cfm?data={"Item 1":{"vendors":{"todd | sam":["stuff"]}}}
    error:
    Code:
    The error occurred in C:\inetpub\vhosts\teed-younger.com\httpdocs\pagebuilder2\action.cfm: line 24
    line 24:
    Code:
    24 : output = "#vendorProductList#">
    so in the above, the data is being passed but, CF barfs on line 24.

    if i pass:
    Code:
    action.cfm?data={"Item 1":{"vendors":{"todd & sam":["stuff"]}}}
    error:
    Code:
    The error occurred in C:\inetpub\vhosts\teed-younger.com\httpdocs\pagebuilder2\action.cfm: line 4
    line 4:
    Code:
    4 :   <cfset results = deserializeJSON(url.data)>
    In that test, the whole thing chokes because of the ampersand being passed.

    So I would think that you need to change that ampersand because IT IS being passed through the URL which WILL cause if to barf. Once that is working then move to line 24 of you CFM and see what the deal is.

    I haven't worked in CF in a couple years so not sure what I can help with at that point.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by rnd me View Post
    do the values not store, or do they just not display? "&" means something in an html tag that it doesn't in a textbox; you might simply need to escape the data for display purposes.

    search for html escape and youll find suitable code. heck, there's even a good html escape function in all IIS and IE error pages...
    Hi no the values are not stored or displayed because it chokes on the ampersand.

    The form values are supposed to be stored in another page within an unordered list. Then those lists are displayed BACK on the current page using a cffile save

    When I type plain text, the values are stored on this page then displayed with a cfinclude that pulls in the cffile save data.

    When I try the ampersand, it doesnt even get to the temporary file to even be saved.
    Yes as far as I know, I've tried every possible escape I can think of. I can display other common ascii code characters like apostrophes and commas, but others return a question mark. The & just chokes everything.
    Teed

  • #13
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    I did not quite understand the whole thread ... but whatever you do, you have to make sure the passed parameters are URI compliant. I.e. all of the non-compliant characters have been transformed into compliant ones

    E.g.
    " " => %20
    "&" => %26

    You can achieve this by using the encodeURIComponent(string) function on the parameter string in javascript before sending it.

  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well I was also told that my ajax function, which was a GET, should be changed to POST.

    Also that my JSON url.data needed to be included in my POST data instead.

    I'm totally lost at this point!

    So should I remove the url: 'action.cfm?data=' + JSON.stringify(items), from this:

    Code:
    $.ajax({
    				type: 'POST',
    				url: 'action.cfm?data=' + JSON.stringify(items),
    				dataType: 'html',
    				//complete: function(data){
    					//$('#results').html(data.responseText);
    					//$('#results').empty();
    					//$('#vendorProductList').show();
    				success: function() {
    								
    					$('#results').empty();			
    								
    					var vendorProductListHTML = 'vendorProductList.cfm?' + new Date().getTime();
    					//alert(calendarEventsHTML);
    					$('#vendorProductList').empty().hide();
    					$('#vendorProductList').load(vendorProductListHTML);
    					$('#vendorProductList').fadeIn(250);							
    								
    					//$('#vendorProductList').show();
    				},
    				error: function() {
    					alert('fail');
    				}
    
    			});
    							
    		});
    But then Im not sure where the POST data is. Where am I supposed to move that line to?
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •