[SOLVED] Keep javascript value on page refresh?

[Jason28]

First I would like to say thanks to everyone here for their help in the past. I had someone add an option so that when the user clicked a button, the row would duplicate so users can add more data into a submit field.  Like one textarea, then they would click on a link:

 

<a href="javascript:addRow();">Add Another Row</a>

 

And it duplicates that row.  It works great, however if a user left out a required field and the page reloads to display the error, the rows that the addRow function created are reset.

 

My question is there an easy way for it to retain those rows so in case a user messes up they do not have to start all over again?  Here is the javascript code:

 

function addRow() {
  var row = document.getElementById('row');
  var newRow = row.cloneNode(true);
  row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}

 

I asked the person who added this code about this and he said that he didn't know how to do it.  Thanks a lot!

[rhodesa]

this should be a server side action. so when you are redisplaying the page, display the POST values in the INPUTs. and, for this one, make sure you display as rows as were submitted

[Jason28]

It is not the values that I need saved but the rows that the javascript created.  When the page refreshes all of the cloned rows disappear.

[rhodesa]

here is an example of what i mean:

<?php
  if($_SERVER['REQUEST_METHOD'] == 'POST'){
    print "ERROR FOUND";
  }
?>
<script type="text/javascript">
function addRow() {
  var row = document.getElementById('rows').rows[0];
  var newRow = row.cloneNode(true);
  row.parentNode.appendChild(newRow);
}
</script>
<form method="POST" action="">
  <a href="#" onclick="addRow();return false;">Add Row</a>
  <table id="rows">
<?php
  if(isset($_POST['myinput']) && is_array($_POST['myinput'])){
    foreach($_POST['myinput'] as $input){
?>  
    <tr>
      <td>Enter some data: </td>
      <td><input type="text" name="myinput[]" value="<?php echo $input; ?>" /></td>
    </tr>
<?php
    }
  }else{
?>  
    <tr>
      <td>Enter some data: </td>
      <td><input type="text" name="myinput[]" /></td>
    </tr>
<?php
  }
?>
  </table>
  <input type="submit" value="Submit Data" />
</form>

[Jason28]

Yeah, I was hoping this could be achieved without having to rewrite the php handling of errors though. 

[rhodesa]

the other option is to store update your javascript function to track all the info in cookies. you would want to attach it to the onsubmit event for the form, loop over all the data, and populate cookies. then, on page load, check for the cookies and regenerate the rows based on the cookies.

[Jason28]

Ok thanks for the replies, I thought it may have been a simple fix but no worries I will just make sure that the error messages appear on the same page in php then.

[rhodesa]

the other thing you can do is validate all the data with JS before the form is submitted

[Jason28]

Thanks, yeah that is another thing I do not know how to do with javascript since those fields are in an array form as you already know when they are duplicated.

[rhodesa]

function validate ( ) {
  var form = document.getElementById('formName');
  for(n=0;n < form.length;n++){
    if(form[n].name == 'myinput[]'){
      alert(form[n].value);
    }
  }
}

[Jason28]

Thanks bud, I will have to try that out later since I am busy right now.

[Jason28]

Hello again, sorry for the long delay but I wanted to postpone the headache of me struggling on this hehe.  Ok, it somewhat works, but here are some changes I have made and I am not sure how to write it so that it only errors if the add_desc[] is not empty and the amount field is empty.  Here is my non-working version:

 

function entry() 
{
  var form = document.getElementById('entry_form');
  
  for(n=0;n < form.length;n++)
  {
   if ( form[n].name == 'add_desc[]' && form[n].value != "" )
   {
	   if(form[n].name == 'add_amnt[]' && form[n].value == "")
	   {
		   alert("Please enter the amount of this transaction.");
		   return(false);
	   }
   }
  }
  
  return true;
}

 

I know it is wrong since I do not know how to make it like "if add_desc is empty, then check add_amnt field for value".  If you could provide me with a working version of the changes I have made that would be great.  Thanks a lot

[rhodesa]

hum...didn't realize you had paired fields like that. what about something like this:

<script>
function entry()
{
  var form = document.getElementById('entry_form');
  for(n=0;n < form.length;n++)
  {
    if ( form[n].name == 'add_desc[]' && form[n].value != "" )
    {
      if( form[n+1].name == 'add_amnt[]' && form[n+1].value == "" )
      {
        alert("Please enter the amount of this transaction.");
        form[n+1].focus();
        return false;
      }
    }
  }
  alert('Form Looks Good');
  return true;
}
function addRow() {
  var row = document.getElementById('row');
  var newRow = row.cloneNode(true);
  row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}
</script>
<input type="button" value="Add Row" onclick="addRow()" />
<form id="entry_form">
  <div id="row">
    <input type="text" name="add_desc[]" />
    <input type="text" name="add_amnt[]" />
  </div>
  <div id="submit_row"><input type="button" value="test" onclick="entry()" /></div>
</form>

[Jason28]

Thanks a lot for all of your help.  The odd thing is that your example works, and I am double checking what I have and it is not working for some reason.  Here is how the form looks on my page:

 

(removed)

 

I copied the change you made to the function so it should work, but it doesn't.  Your example does exactly what I want, and my problem is that it always displays the Form Looks Good Alert even when the amount field is empty.

[rhodesa]

yeah...mine assumes that the amount is the input after description...change +1 to +2 in the script

[Jason28]

Thanks a lot man!   So far so good, thanks for all of your time on this.