SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form field fill button

    Hi Guys,

    I need to create a form field fill button that automatically copies data from one field to all other fields. My form looks like this:

    HTML Code:
    <form id="form1" name="form1" method="post" action="">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="15%">Field #1:</td>
          <td width="85%"><input type="text" name="field_name[10]" id="field_name[10]" /> 
            <a href="#">Fill Below</a></td>
        </tr>
        <tr>
          <td>Field#2:</td>
          <td><input type="text" name="field_name[11]" id="field_name[11]" />
          <a href="#">Fill Below</a></td>
        </tr>
        <tr>
          <td>Field#3:</td>
          <td><input type="text" name="field_name[17]" id="field_name[17]" />
          <a href="#">Fill Below</a></td>
        </tr>
        <tr>
          <td>Field#4:</td>
          <td><input type="text" name="field_name[31]" id="field_name[31]" />
          <a href="#">Fill Below</a></td>
        </tr>
        <tr>
          <td>Field#5:</td>
          <td><input type="text" name="field_name[34]" id="field_name[34]" />
          <a href="#">Fill Below</a></td>
        </tr>
        <tr>
          <td><input type="submit" name="Submit" id="Submit" value="Submit" /></td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </form>
    When the user clicks 'Fill Below' I want all the fields to be populated with the same value as the field that was typed in..How can I do this?

    Thanks in advance.

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't do this using Javascript. If you have PHP enabled on your server, just check if $_POST['foo'] is set, and if so, echo out the value..
    <input value="<?php echo (isset($_POST['foo'])) ? $_POST['foo'] : ''; ?>">

  3. #3
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    You shouldn't do this using Javascript. If you have PHP enabled on your server, just check if $_POST['foo'] is set, and if so, echo out the value..
    <input value="<?php echo (isset($_POST['foo'])) ? $_POST['foo'] : ''; ?>">
    I don't think you understand what I need...Please re-read my first post

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I agree with SoulScratch, the server should do this so that it will still work when javascript is disabled or not present.

    When it works from the server, then you can overlay javascript to improve the user experience.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    I agree with SoulScratch, the server should do this so that it will still work when javascript is disabled or not present.

    When it works from the server, then you can overlay javascript to improve the user experience.
    Guys,

    Thanks for your comments, but it really needs to be done using JavaScript. If anyone here has used Sedo, they will know what I am talking about in the domain management section there is a 'Fill Down' feature so that its easy to populate a hundered fields with the same value by pressing 1 button without the page refreshing!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Get it working first with the page refreshing, then use javascript to do it without refreshing. That is the advice we have for you.

    Once you have it working with the page refresh, you would take your existing code and modify it as follows:

    Add a class attribute to indicate the fillForm elements

    Code html4strict:
    <a href="fillBelow.php" class="fillForm">Fill Below</a>

    Then search for those fillForm elements and modify them to use a script instead.

    Code javascript:
    var form = document.getElementById('form1');
    var links = form.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        if (links[i].className.match(/\bfillForm\b/)) {
            links[i].onclick = fillForm;
        }
    }

    After which the fillForm function can do the work instead of the server.

    Code javascript:
    function fillForm() {
        // for each element
        var el;
        var fillFlag = false;
        var fillValue = '';
        for (var i = 0; i < this.form.elements.length; i++) {
            el = this.form.elements[i];
            // wait until we reach the selected one
            if (this === el) {
                fillFlag = true;
                fillValue = this.value;
            }
            // then fill in the rest
            if (fillFlag === true) {
                el.value = fillValue;
            }
        }
        // prevent link from being followed
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guys,

    I found the script I am looking for and modified it to my needs, however there is one line that is causing my script from working properly (see script below).

    Code:
    <!--
    function changeValue(where,what,type) {
    	
    	 	what = document.getElementById(what);	 	
    	 	
    	 	if(type == 'select') {
    	 		field = what.options[what.selectedIndex];
    	 		text = field.text;
    		 	value = field.value;
    	 	}
    	 	if(type == 'text') {
    	 		text = what.value;
    		 	value = what.value;
    	 	}
    
    	 	form = document.editdomains;
    		
    		if(value != '-1') {
    			for(i=0; i < form.elements.length; i++) {
    				field = form.elements[i];
    				if(field.name.substr(0,9) == 'domain') { 
    					if(field.checked == true) {
    						domainid = field.name.match(/[0-9]+/);
    						if(document.getElementById(where+'Show['+domainid+']') ) {
    							document.getElementById(where+'Show['+domainid+']').innerHTML = '(changed to:)<br />'+text;
    						}
    						if( document.getElementById(where+'['+domainid+']') && document.getElementById(where+'['+domainid+']').disabled == false) {
    							document.getElementById(where+'['+domainid+']').value = value;
    						}
    					}
    				}
    			}
    		}
    	 }
    // -->

    The problem line is
    Code:
    if(field.name.substr(0,9) == 'domain') {
    I tried hardcoding one of the field names into the line above, like shown below and it works!

    Code:
    'if(field.name == 'domain[123]') {'
    Just can't figure out how to get it working dynamically like it should. Any ideas? I tried it in IE7 and FF but no luck!

    Thanks in advance.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    substr(0,9) takes the first 9 characters, and you're wanting to check if the first 6 characters match "domain"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •