One more: Online Designer?

[jmarcv]

You dont want to use hidden vars the way you do. And then, remember what I said about stacking javascript. You want ONE hidden var that will contain the choice, like so:

<input name="chosenBackground" type="hidden" id="chosenBackground">

Then you simply update the hidden var the same way you update the template when a user clicks

      <img src="images/pics/eagle_th.jpg" alt="eagle" style="cursor:pointer" onclick="document.getElementById ('cardTemplate').style.backgroundImage='url(images/pics/eagle.jpg);document.getElementById ('chosenBackground').value=this.src;">
 
      <img src="images/pics/pond_th.jpg" alt="pond" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/pond.jpg);document.getElementById ('chosenBackground').value=this.src;">
 
... etc....

PS - use title in place of alt to get it to work in firefox and safari

[rlhanson]

okay, that makes much more sense, thank you.

[rlhanson]

Hello John-Marc,

I wanted to ask a question on the instructions you gave me last...

<img src="images/pics/eagle_th.jpg" alt="eagle" style="cursor:pointer" onclick="document.getElementById ('cardTemplate').style.backgroundImage='url(images/pics/eagle.jpg);document.getElementById ('chosenBackground').value=this.src;">

Is this missing a single quote somewhere after:

).style.backgroundImage='url(images/pics/eagle.jpg);document.getElementById ('chosenBackground').value=this.src;">

The issues I am having:

Once I updated the code, the images of the eagle, pond, etc. quit showing in the template. When I add a single quote after

'url(images/pics/eagle.jpg)'

they work again.

However, neither method results in an entry in my feedback form results as far as background choice.

(As if there was no time that went by, right?! LOL)

[rlhanson]

John-Marc,
I'm thinking of going a different direction than what I posted earlier.

This is what I would like to accomplish...

I would like the client to select a background (with a predetermined layout) which is loaded into the cardTemplate. Similiar to what we have going on now.

I still want the input fields to the left, but would like to have the background and corresponding layout to be changeable while retaining the user information that is in the input fields.

Can this be accomplished with an iframe or would this have to part of a DIV?

I know I could create a long version where the client picks out the background and layout, inputs the info and submits the form. Where I stand now, would not to be able to allow the choice of changing backgrounds once the user starts the process unless they are willing to completely start over.

Does this make sense?

[rlhanson]

Untitled Document

I can receive the background information - now I just need to pass the form info from one page to another for layout changes or find a way to dynamically change the layout by selection.

[jmarcv]

Yes, I have been preoccupied!

Pass the form info. Well, it IS being passed, so I will assume you mean you want to prefill the form with data passed. Thats where PHP comes in. But you just opened a big canno-worms.

I am not sure that is a good idea, better to do the DHTML on one page and submit it, but.....


Text and hidden fields are easy.

Before:

<input name="title" type="text" id="title" tabindex="8" size="25" maxlength="25" onChange="document.getElementById('titleS').innerHTML=this.value;" />

After - (in the php code you submit the form to.)

<input name="title" type="text" id="title" tabindex="8" size="25" maxlength="25"  value="<?php echo $_POST['title'];?>" onChange="document.getElementById('titleS').innerHTML=this.value;" />

Note we added a value attrib and used php to fill in the value.
Now, you have an additional problem. Your preview needs to display also, and so then you need to do this also if that is the case:

<script>document.getElementById('titleS').innerHTML=="<?php echo $_POST['title'];?>" </script>

Radio buttons - this is where things get ugly.


What you have

<input name="background" type="radio" id="background" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/rgbblue.jpg)'" value="blue" />
<input name="background" type="radio" value="yellow" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/yellow.jpg)'" />

What you need - the inellegant version. I won't be able to give you a lesson in arrays, which would streamline this tremedously.
First, to make things easier, we need to change the values to the actual image name. Then we use the CHECKED attrib to select the proper radio

<?php $chk=($_POST['background']=='rgbblue.jpg' ? 'CHECKED' : ''); ?>
<input name="background" type="radio" value="rgbblue.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/rgbblue.jpg)'" <?php echo $chk; ?>/>
<?php $chk=($_POST['background']=='yellow.jpg' ? 'CHECKED' : ''); ?>
<input name="background" type="radio" value="yellow.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/yellow.jpg)'" <?php echo $chk; ?>/>
.....
<script>document.getElementById('cardTemplate').style.backgroundImage='url(images/<?php echo $_POST['background'];?>)'" </script>

You may recall from a few pages back that this:
$chk=($_POST['background']=='rgbblue.jpg' ? 'CHECKED' : '');
is an if else loop and php supports this syntax also. Note that this one-line version is the same as the full syntax:

if ($_POST['background']=='rgbblue.jpg') {
 $chk='rgbblue.jpg'
}
else {
 $chk='';
}

And finally, the ugliness of a select box.
Before:

        <select name="SIZEcompanyName" onchange="document.getElementById('companyName').style.fontSize=this.options[this.selectedIndex].value;">
          <option value="8pt">8</option>
          <option value="10pt">10</option>
          <option value="12pt">12</option>
          <option value="14pt">14</option>
          <option value="18pt" selected="selected">18</option>
          </select>

        <select name="SIZEcompanyName" onchange="document.getElementById('companyName').style.fontSize=this.options[this.selectedIndex].value;">
<? $chk=($_POST['SIZEcompanyName']=='8pt' ? 'SELECTED' : ''); ?>
          <option value="8pt" <?php echo $chk; ?>>8</option>
<? $chk=($_POST['SIZEcompanyName']=='10pt' ? 'SELECTED' : ''); ?>
          <option value="10pt"<?php echo $chk; ?>>10</option>
<? $chk=($_POST['SIZEcompanyName']=='12pt' ? 'SELECTED' : ''); ?>
          <option value="12pt"<?php echo $chk; ?>>12</option>
<? $chk=($_POST['SIZEcompanyName']=='14pt' ? 'SELECTED' : ''); ?>
          <option value="14pt"<?php echo $chk; ?>>14</option>
<? $chk=($_POST['SIZEcompanyName']=='18pt' ? 'SELECTED' : ''); ?>
          <option value="18pt" <?php echo $chk; ?>>18</option>
          </select>
<script>document.getElementById('companyName').style.fontSize='<?php echo $_POST['SIZEcompanyName'];?>)'; </script>

Dose that help?

[rlhanson]

John-Marc - Thank you! I know you have been busy and I appreciate you taking time to respond.

I changed everything to radio buttons for the background selection as I could not get to the point where the selection was actually listed in my feedback form email using the hidden type.

I have been reading a little and thinking a lot about this layout issue I am trying to get myself wrapped around.

I know there is a way, and I believe it is an array with php that would allow me to somehow say (in code) if "centered" layout is selected then display this table, if "left" layout is selected then display that table...
which, if I am thinking about this right, would alleviate any issues of having to "prefill the form with data passed" ... correct?

I have to figure out how I make a table display as part of a $var= statement right?
Then it would just be a matter of an if or else statement...right?

Or am I just thinking this in too simple of terms?

I will try what you suggested though - I totally appreciate the information!

Nice to hear from you again!

[jmarcv]

I know there is a way, and I believe it is an array with php that would allow me to somehow say (in code) if "centered" layout is selected then display this table, if "left" layout is selected then display that table...
which, if I am thinking about this right, would alleviate any issues of having to "prefill the form with data passed" ... correct?

Incorrect. Arrays are totally different animals. You can output html in php, and when you want to use php you enclose it in this:

<?php
?>

In all my examples, you will see that I used 'echo' (there is a print command that is identical) to have the value of a POST var go to the html output. And I had it go out in an HTML value attrib.
That is how you mix html and php

I have to figure out how I make a table display as part of a $var= statement right?
Then it would just be a matter of an if or else statement...right?

Yes, you could do this:

<?php
$var_title='<input name="title" type="text" id="title" tabindex="8" size="25" maxlength="25" value="' . $_POST['title'] . '" onChange="document.getElementById('titleS').innerHTML=this.value;" />';
if ($_POST['layout']==1){
?>
<table id=1><tr><td> 1 <?php echo $var_title;?></td></tr></table>
<?php
} elseif ($_POST['layout']==2) {
?>
<table id=2><tr><td> 2 </td><td> 2 <?php echo $var_title;?></td></tr></table>
<?php
} elseif ($_POST['layout']==3) {
?>
<table id=3><tr><td> 3 </td><td> 3 </td><td> 3 <?php echo $var_title;?></td></tr></table>
<?php
}
?>

It can get very tricky.

[rlhanson]

Would I have $var for each (companyName, Name, title, etc) but display the table layouts for 1, 2, and 3 with the php echo (or print) in the correct places for each layout?

I would have a checkbox or radio button to select each layout option so using your example, the input name would be "layout" and the id="1" (2 or 3) .. is that correct?

And the php code would have to come before the layout selection or would I have to have the layout selection part of the php code also?

[jmarcv]

Would I have $var for each (companyName, Name, title, etc) but display the table layouts for 1, 2, and 3 with the php echo (or print) in the correct places for each layout?

Yes, otherwise how to you make a distinction?

I would have a checkbox or radio button to select each layout option so using your example, the input name would be "layout" and the id="1" (2 or 3) .. is that correct?

The id is not really needed, it was more of an example. id is only used by getelementByID so I would guess you won't be using it. It was more illustrative than functional.
... but yes, again, if you are going to be reading a $_POST['layout'] to make the decision, it has to be created somehow in the form.

And the php code would have to come before the layout selection or would I have to have the layout selection part of the php code also?

Well, in my example the php code is throughout, so I will assume you mean the php code to make the html form elements in vars, the answer is simply, before you can use a var it needs to be created, so yes, you create all the elements do be placed in the templates once, THEN you output those vars as many times as you want in as many templates as you want. So when you change something, you change it in ONE place and all possibilities are covered.