how to have javascript values survive w2p refresh

[Alex Glaros]

I want to capture subject-line and message-body before user hits "submit" button.

Question 1:

The (1) get-recipients part and (2) enter subject-line and message-body parts are on the same page. If user types something into subject-line/message-body BEFORE choosing any message recipients, the subject-line and message-body are erased with page refresh when recipients are added.

I added some javascript and now the subject line javascript value survives through the store procedure below, but I can't get the message body value to survive. It gets wiped clean unless it's the very last event. 

Question 2:  

the store procedure that works (for subject line) doesn't keep the very latest value unless a new recipient is added or deleted before hand. Otherwise, it doesn't grab what user is typing and goes on to the next URL with the last iteration, not current.

Question 3:

This part, correctly transports the arguments to the next url, but is it the best way?  function goToURL(){

window.location="{{=URL('default', 'siteMap') + '/'}}" + subjectLineFromStorage ;}

Thanks,

Alex Glaros

{{extend 'layout.html'}}

<table>

    <tr><td><!--------------- COLUMN 1 ------------------->

 <h3>

            Choose recipients

        </h3>

            {{=grid}}</td>

        <td style="padding:0px 10px 10px 10px"> <!------------------- COLUMN 2 -------------------->

            <h3>

                Recipient list

            </h3>

            <table class="table table-striped">

            {{for row in selectedIndividuals:}}

                <tr><td>

                {{=row.TempInternalMessageRecipient.recipientOfMessage}} {{=row.auth_user.first_name}} {{=row.auth_user.last_name}} &nbsp;</td><td>

                {{=A("deselect", _href=URL('default','remove_from_recipient_list', args=row.auth_user.id), _class='btn btn-mini', ajax=True)}} </td>

               </tr>

                {{pass}}

            </table>

        </td>

        <td> <!----------------------------- COLUMN 3 ----------------------->

               

<!------------javascript stuff below ------------>

<h3>Compose</h3>

<form action="javascript:goToURL()"  onSubmit="javascript:goToURL();">

Subject:  <input type="text" id="subjectID" onchange="storeSubjectLine()"/><br/>

Message:  <input type="text" id="messageBodyID" onchange="storeMessageBody()"/><br/>

<input type="submit" value="submit"/>

</form>

<script>

 //getting the  value from the storage 

 var subjectLineFromStorage = localStorage.getItem("storeTheSubjectLine");

 var messageFromStorage = localStorage.getItem("storeTheMessageBody");

//checking the value is not empty

if(subjectLineFromStorage!=undefined&&subjectLineFromStorage!=null&&subjectLineFromStorage.trim().length!=0&& typeof subjectLineFromStorage == "string"){

    document.getElementById("subjectID").value=subjectLineFromStorage;

}

//storing the value in the storage

function storeSubjectLine(){

var nameInputVal = document.getElementById("subjectID").value;

localStorage.setItem("storeTheSubjectLine",nameInputVal);

//window.location="{{=URL('default', 'siteMap') + '/'}}" + subjectLineFromStorage;

}

//storing the value in the storage

function storeMessageBody(){

var nameInputVal2 = document.getElementById("messageBodyID").value;

localStorage.setItem("storeTheMessageBody",nameInputVal2);

//window.location="{{=URL('default', 'siteMap') + '/'}}" + messageFromStorage;

}

function goToURL(){

window.location="{{=URL('default', 'siteMap') + '/'}}" + subjectLineFromStorage ;

}

</script>

<!------ javascript stuff above -------------------->

        </td>

    </tr>

</table>

[Alex Glaros]

whole problem solved by deleting all JavaScript and simply running recipient selection function in iframe.