Using Cookies to Refill A Javascript Webform

Question

I've got a series of Javascript forms I need to develop for a web application, but I'm using Simfatic for the heavy lifting, and I don't know very much about these technologies. I've tried using both php and javascript for adding and calling the cookies to refill the phone number portion of this small form, but I can't even get it to create the cookie, let alone call it back to fill that portion of the form back in when revisiting the page. I'd like to have the cookie be persistent across all the forms in the series, but right now I'll settle for actually writing the cookie to begin with. Wondering if anybody can point me to where I'm off. Thank you, here's my code.

<html>
    <head>
        <title>
        FCT Trip Tracker
        </title>
<script type="text/javascript">
    var today = new Date();
    var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000);
    function setCookie(name, value)
    {
    document.cookie=name + "=" + escape(value) + "; path =/; expires=" + expiry.toGMTString();
    }
</script>
<script type="text/javascript>
        function writeCookie() {
            if( document.fct1b.phoneno.value == "" ){
                alert("Enter some value!");
                return;
            }
            cookievalue= escape(document.fct1b.phoneno.value) + ";";
            document.cookie="phoneno=" + cookievalue );
        }
</script>
<script type="text/javascript">
        if(phoneno = getCookie("phoneno")) document.fct1b.phoneno.value = phoneno;
</script>
    </head>
<body>
    <script src='http://location.jgi.local/1b/scripts/jquery-1.7.2.min.js' type='text/javascript'></script>
<script src='http://location.jgi.local/1b/scripts/jquery.sim.utils.js' type='text/javascript'></script>
<script src='http://location.jgi.local/1b/scripts/sfm_validatorv7.js' type='text/javascript'></script>
<link rel='stylesheet' type='text/css' href='http://location.jgi.local/1b/style/fct1b.css'>
<form id='fct1b' class='sfm_form' novalidate='novalidate' method='post' action='http://location.jgi.local/1b/fct1b.php' accept-charset='UTF-8'>
   <div id='fct1b_errorloc' class='error_strings' style='text-align:left'></div>
   <div id='fct1b_outer_div_p1' class='form_outer_div'>
      <div style='position:relative' id='fct1b_inner_div'>
         <input type='hidden' name='sfm_form_submitted' value='yes'>
         <div id='label1_container' class='sfm_form_label'>
            <label id='label1' for='phoneno'>Phone # :</label>
         </div>
         <div id='phoneno_container' class='sfm_element_container'>
            <input type='text' name='phoneno' id='phoneno' class='sfm_textbox_common sfm_textbox' size='20' value>
         </div>
         <div id='label_container' class='sfm_form_label'>
            <label id='label' for='trailerno'>Trailer # :</label>
         </div>
         <div id='trailerno_container' class='sfm_element_container'>
            <input type='text' name='trailerno' id='trailerno' class='sfm_textbox_common sfm_textbox' size='20' value>
         </div>
         <div id='Submit_container' class='loading_div sfm_element_container'>
            <input type='submit' name='Submit' value='Submit' id='Submit' onclick="writeCookie();"/>
         </div>
      </div>
   </div>
</form>
<script type='text/javascript'>
$(function()
{
   sfm_show_loading_on_formsubmit('fct1b','Submit');
});
</script>
<script type='text/javascript'>
var fct1bValidator = new Validator("fct1b");
fct1bValidator.addValidation("phoneno",{required:true,message:"Please fill in phoneno"} );
fct1bValidator.addValidation("trailerno",{required:true,message:"Please fill in trailerno"} );
</script>
    </body>
</html>

Answer 1

Firstly, the reason why the value of the input is not read when creating the cookie, is because JavaScript can't find the form element.

There are two ways to solve that:

Add the following attribute to the <form> tag: name="fct1b"
You can only access elements using document.fct1b.phoneno if the elements you try to access have a name attribute on them.
If the element does not have a name attribute, you can use the getElementById or querySelector functions to retrieve a DOM element. Then you would have to write it as such: document.getElementById('fct1b').phoneno.value

Using Cookies to Refill A Javascript Webform

Question

1 answers

solution1
0 2020-11-30 14:30:48

Using Cookies to Refill A Javascript Webform

Question

1 answers

solution1 0 2020-11-30 14:30:48

solution1
0 2020-11-30 14:30:48