form button action

captainmerton · 03-02-2011, 05:51 PM

Hi - I have a form for uplaoding inamges to my website. Sometimes if the image size is large it takes 5 seconds or so. I want to try and use javascript to kick off an action that adds an image href indicating "Image Upload Processing" when the Submit button is pressed. How would i best go about doing this? My php is good but javascript isnt so advanced. here's th form html:

PHP Code:


			
<form name="addimage" method="post" enctype="multipart/form-data"  action="">

<table class="forms">

    <tr>

    <td colspan="2">

    <h3>Add Picture</h3>

    </td>

    </tr>



    </tr>

    <tr>

    <td colspan="2"><span class='red'>

        </span></td>

    </tr>

    <tr>

    <td>

        <label for="alt">Image Text*</label>



    </td>

    <td>

        <input type='text' name='alt' id='alt' size='20' maxlength='100'>

    </td>

    </tr>

    <tr>

    <td><input type="file" name="image"></td>

     <td><input name="Submit" type="submit" value="Upload Picture"></td>

    </tr>



</table>

</form>

tony · 03-02-2011, 07:23 PM

That could be done deferent ways. One way is having backend script that handles the upload with ajax dealing with the waiting (while showing the uploading image) and responding to the result of the backend script.
It's been a while since I've done AJAX, but here it is a simple tutorial.

captainmerton · 03-02-2011, 08:08 PM

I'm not looking to do something too complicated i.e. when some clicks the "Upload Picture" button i just want an image to appear so looking to run a simple function onClick but struggling to know how to make the function work. So onClick i require the following html added:

PHP Code:


			
    <tr>

    <td colspan="2">

        <img src='images/pleasewait.gif'>

    </td>

    </tr>

wGEric · 03-08-2011, 05:22 PM

Add the image to the page and use css display: none to hide the image. Set an onsubmit event for the form that would then switch the css for the image to display: block or whatever you want it to be to show the image.

captainmerton · 03-08-2011, 05:52 PM

Thanks - I'm halfway there. I've added the image:

PHP Code:


			
<img class="pleasewait" src="images/pleasewait.gif">

and the CSS:

PHP Code:


			
img.pleasewait {display: none;}

And the image is not shown. What should my form onSubmit javascript be?

tony · 03-08-2011, 06:08 PM

I would suggest separate the javascript and the html:

javascript Code:

<script>
document.getElementsByName("addimage").onSubmit = function (e) {
    document.getElementsByClassName("pleasewait")
        .setAttribute("style","display: block;");
};
</script>

that is a very crude javascript example (not even tested). It does not takes into consideration other factors. I would suggest to use a framework like jQuery.

captainmerton · 03-08-2011, 06:40 PM

I cant get this to work. Think i need to go read a javascript book. So i still have the img in the html then hidden using the css as detailed above. I assume i can just cut and paste the script section above into my html and it should work or am i missing something?

The form remains unchanged apart from the img:

PHP Code:


			
<form name="addimage" method="post" enctype="multipart/form-data"  action="">

<table class="forms">

    <tr>

    <td colspan="2">

    <h3>Add Picture</h3>

    </td>

    </tr>

    <tr>

    <td colspan="2"><img class="pleasewait" src="images/pleasewait.gif"></td>

    </tr>

    <tr>

    <td>

        <label for="alt">Image Text*</label>

    </td>

    <td>

        <input type='text' name='alt' id='alt' size='20' maxlength='100'>

    </td>

    </tr>

    <tr>

    <td><input type="file" name="image"></td>

     <td><input name="Submit" type="submit" value="Upload Picture"></td>

    </tr>

</table>

</form>

tony · 03-08-2011, 07:39 PM

to test the code I posted (or any javascript code) you can put it anywhere in the html document, I will suggest right before the <body> tag closes. Oh an I forgot to return true; so it will be something like this.

javascript Code:

<script>
document.getElementsByName("addimage").onSubmit = function (e) {
    document.getElementsByClassName("pleasewait")
        .setAttribute("style","display: block;");
    return true;
};
</script>
</body>

In jQuery it would be something like:
(assuming the jQuery js file has already been included)

javascript Code:

<script>
$('form[name="addimage"]').live('submit', function () {
    $('.pleasewait').css('display','none');
    return true;
};
</script>
</body>

captainmerton · 03-08-2011, 07:54 PM

Can i debug the code in firefox? It isnt working i.e. nothing is happening:

PHP Code:


			
<script>

document.getElementsByName("addimage").onSubmit = function (e) {

    document.getElementsByClassName("pleasewait")

        .setAttribute("style","display: block;");

    return true;

};

</script>

<form name="addimage" method="post" enctype="multipart/form-data"  action="">

<table class="forms">

    <tr>

    <td colspan="2">

    <h3>Add Picture</h3>

    </td>

    </tr>

    <tr>

    <td colspan="2"><img class="pleasewait" src="images/pleasewait.gif"><span class='red'>

    <?php print $view->getFeedback(); ?>

    </span></td>

    </tr>

    <tr>

    <td>

        <label for="alt">Image Text*</label>

    </td>

    <td>

        <input type='text' name='alt' id='alt' size='20' maxlength='100'>

    </td>

    </tr>

    <tr>

    <td><input type="file" name="image"></td>

     <td><input name="Submit" type="submit" value="Upload Picture"></td>

    </tr>

</table>

</form>

wGEric · 03-09-2011, 04:57 PM

The <script> needs to go below the form. What is happening is the <script> is looking for elements on the page that don't exist yet because the browser hasn't gone that far down the page.

For debugging in Firefox you can use the Error Console or Firebug.

The following code uses IDs to target the elements and changes the CSS instead of changing an attribute. Also the event name is all lowercase.

HTML Code:

<style>
#pleasewait {
    display: none;
}
</style>
<form name="addimage" id="addimage" method="post" enctype="multipart/form-data"  action="">
<table class="forms">
    <tr>
    <td colspan="2">
    <h3>Add Picture</h3>
    </td>
    </tr>
    <tr>
    <td colspan="2"><img class="pleasewait" id="pleasewait" src="http://www.talkphp.com/images/pleasewait.gif"><span class='red'>
   <?php print $view->getFeedback(); ?> 
    </span></td>
    </tr>
    <tr>
    <td>
        <label for="alt">Image Text*</label>
    </td>
    <td>
        <input type='text' name='alt' id='alt' size='20' maxlength='100'>
    </td>
    </tr>
    <tr>
    <td><input type="file" name="image"></td>
     <td><input name="Submit" type="submit" value="Upload Picture"></td>
    </tr>
</table>
</form>
<script>
document.getElementById('addimage').onsubmit = function (e) {
    document.getElementById("pleasewait").style.display = 'block';
};
</script>

captainmerton · 03-09-2011, 05:47 PM

Sorted. many thanks to all for your help.

captainmerton · 05-02-2011, 09:07 AM

I've been using the above javascript to hife css divs and then unhide on click etc. Quick question. Using the following javascript (as an example):

PHP Code:


			
<script>

document.getElementById('unhide').onclick = function (e) {

    document.getElementById("hiddendiv").style.display = 'block';

};

</script>

...I've been trying to onclick reveal all the div ids hiddendiv. This works ok however it finds the first occurance of this then unhides it and doesnt do any other later occurances. Is there a way round this before i use the javascript to unhide all potential occurances i.e. hiddendiv1, hiddendiv2 etc?

tony · 05-02-2011, 01:16 PM

It is because IDs are unique within an html document. If you want to target multiple elements use a class. I know the getElementsByClass method is fairly supported in modern browsers but to make sure you can have a safe-alternate in case the browser doesn't support it. Like the Dustin Diaz method:

javascript Code:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

But if you are going to this lengths and if you are allowed by the project requirements, I would suggest you use jquery or another framework like mootools or any other. They make this stuff easier. For example in jquery:

javascript Code:

$('.unhide').live('click', function (e) {
    $('.hiddendiv').toggle();
});

captainmerton · 05-03-2011, 05:56 PM

Going to assume the browser supports it. Still having problems however when i try and unhide the class. Here's the main pieces of code:

PHP Code:


			
<div id='editmypicturesclick'>Edit</div>



<span class='editmypictures'>Delete</span>



<script>

document.getElementById('editmypicturesclick').onclick = function (e) {

    document.getElementByClass('editmypictures').style.display = 'block';

};

</script>

And here's the CSS:

PHP Code:


			
.editmypictures {float:left; width:100%; display: none;}

When i change the CSS display style to Block then the Delete text appears. Its the onclick on the Edit text that doesnt seem to work. Any ideas?

By the way - many thanks for the help thus far Tony.

tony · 05-03-2011, 06:25 PM

so when somebody clicks the #editmypictureclick it will hide or unhide the .editmypictures element based on if it is hidden or not. Right now your code only displays as block. Just put a condition if it is none change it to block, if not, the other way:

javascript Code:

document.getElementById('editmypicturesclick').onclick = function (e) { 
    var delete_el = document.getElementByClassName('editmypictures');
    delete_el.style.display = (delete_el.style.display == 'none') ? 'block' : 'none';
};

notice that the actual name of the method is getElementByClassName not getElementByClass at least from mozilla docs.

captainmerton · 05-03-2011, 07:20 PM

Looking to nothing more complicated than simply unhiding a lot of elements when the Edit div id is clicked. I've changed the function name to getElementByClassName:

PHP Code:


			
<script>

document.getElementById('editmypicturesclick').onclick = function (e) {

    document.getElementByClassName('editmypictures').style.display = 'block';

};

</script>

Still wont work. It works when i use this with DIV IDs but something about the way I'm doing it with a class is stopping it from working?