Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    Check for duplicates

    Hi, I have a little script here that when ran creates DIV boxes, it also sets a id for the div box by prompting the user to name the DIV box.

    My question is can I preform some sort of duplicate checker to see if the user has already created a DIV box with the same (id), and if so then alert them they must pick a different name?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script>
    function addDiv()
    {
    var getId = prompt('Name New Div.','');
    var getWrap = document.getElementById("wrap");
    var createDiv = document.createElement("div");
    createDiv.setAttribute('id',getId);
    createDiv.style.width="128px";
    createDiv.style.height="128px";
    createDiv.style.float="left";
    createDiv.style.marginTop="5px";
    createDiv.style.backgroundColor="#000";
    getWrap.appendChild(createDiv);
    }
    </script>
    </head>
    
    <body>
    <button type="button" onclick="addDiv()">ADD NEW DIV</button>
    <div id="wrap">
    </div>
    </body>
    </html>
    Last edited by ubh; 09-12-2008 at 05:05 PM.

  • #2
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Try this:

    Code:
    function check4Dupes(name){
     var divs = document.getElementsByTagName('div');
     for (i=0; i<divs.length; i++){
    	if(divs[i].id == name){
        return false;
    }
    }
    return true;
    }
    
    function addDiv()
    {
    var getId = prompt('Name New Div.','');
    if(getId){
    if(check4Dupes(getId)){
    var getWrap = document.getElementById("wrap");
    var createDiv = document.createElement("div");
    createDiv.setAttribute('id',getId);
    createDiv.style.width="128px";
    createDiv.style.height="128px";
    createDiv.style.float="left";
    createDiv.style.marginTop="5px";
    createDiv.style.backgroundColor="#000";
    getWrap.appendChild(createDiv);
    }else{
    alert('div id already exists!');
    }
    }
    }
    That should do the trick


    ...or this (which is basically me having a play), to allow them to choose another name straight away:

    Code:
    function check4Dupes(name){
     var divs = document.getElementsByTagName('div');
     for (i=0; i<divs.length; i++){
    	if(divs[i].id == name){
        return false;
    }
    }
    return true;
    }
    
    function addDiv()
    {
    var getId = prompt('Name New Div.','');
    if(getId){
    if(check4Dupes(getId)){
    var getWrap = document.getElementById("wrap");
    var createDiv = document.createElement("div");
    createDiv.setAttribute('id',getId);
    createDiv.style.width="128px";
    createDiv.style.height="128px";
    createDiv.style.float="left";
    createDiv.style.marginTop="5px";
    createDiv.style.backgroundColor="#000";
    getWrap.appendChild(createDiv);
    }else{
    alert('Div already Exists! Pick a new name');
    addDiv();
    }
    }
    }
    Last edited by Mikebert4; 09-12-2008 at 05:43 PM. Reason: missed a line :(

  • Users who have thanked Mikebert4 for this post:

    ubh (09-13-2008)

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    Code:
    function goodId(element,str){
    	var hoo;
    	if(!str){
    		str= element.tagName;
    		hoo= str+'_1';
    	}
    	else hoo=str;
    	var n=1;
    	while(document.getElementById(hoo))hoo=str+'_'+(++n);
    	element.setAttribute('id',hoo);
    }
    You don't want a name that was used anywhere in the document.
    replace createDiv.setAttribute('id',getId) with goodId(createDiv,getId)
    Last edited by mrhoo; 09-12-2008 at 05:53 PM.

  • Users who have thanked mrhoo for this post:

    ubh (09-13-2008)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type = "text/javascript>
    
    function addDiv() {
    var getId = prompt('Name New Div. (Min 5 characters)','');  // reduce chances of duplication
    if (getId == "" || getId == null || getId.length < 6) {
    alert ("Invalid Input!  Must be 5 characters minumum");
    return false;
    }
    
    var divs = document.getElementsByTagName('div');
    if (divs) {
    for (var i = 0; i < divs.length; i++) {
    if (divs[i].id == getId) {
    alert ("That div name already exists - try again");
    return false;
    }
    }
    }
    
    var getWrap = document.getElementById("wrap");
    var createDiv = document.createElement("div");
    createDiv.setAttribute('id',getId);
    createDiv.style.width="128px";
    createDiv.style.height="128px";
    createDiv.style.float="left";
    createDiv.style.marginTop="5px";
    createDiv.style.backgroundColor="#000";
    getWrap.appendChild(createDiv);
    }
    </script>
    </head>
    
    <body>
    <button type="button" onclick="addDiv()">ADD NEW DIV</button>
    <div id="wrap">
    </div>
    </body>
    </html>

    Take my advice, I don't use it anyway.
    Last edited by Philip M; 09-12-2008 at 06:21 PM. Reason: Add test for blank input and fix cancel button - as per Mikebert4

  • Users who have thanked Philip M for this post:

    ubh (09-13-2008)

  • #5
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script>
    function addDiv()
    {
    var getId = prompt('Name New Div.','');
    
    if(!getId){return false;}
    
    var divs = document.getElementsByTagName('div');
    if (divs) {
    for (var i = 0; i < divs.length; i++) {
    if (divs[i].id == getId) {
    alert ("That div name already exists - try again");
    return false;
    }
    }
    }
    
    var getWrap = document.getElementById("wrap");
    var createDiv = document.createElement("div");
    createDiv.setAttribute('id',getId);
    createDiv.style.width="128px";
    createDiv.style.height="128px";
    createDiv.style.float="left";
    createDiv.style.marginTop="5px";
    createDiv.style.backgroundColor="#000";
    getWrap.appendChild(createDiv);
    }
    </script>
    </head>
    
    <body>
    <button type="button" onclick="addDiv()">ADD NEW DIV</button>
    <div id="wrap">
    </div>
    </body>
    </html>
    My turn again! - this'll handle the 'cancel' button on the prompt correctly as well.

    (in case you feel swamped, all these solutions work )

  • Users who have thanked Mikebert4 for this post:

    ubh (09-13-2008)

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    or
    Code:
    function addDiv()
    {
    var getId = prompt('Name New Div.','');
    if (document.getElementById(getId)){
     alert('Duplicate');
     return false;
    }
    var getWrap = document.getElementById("wrap");
    var createDiv = document.createElement("div");
    createDiv.setAttribute('id',getId);
    createDiv.style.width="128px";
    createDiv.style.height="128px";
    createDiv.style.float="left";
    createDiv.style.marginTop="5px";
    createDiv.style.backgroundColor="#000";
    getWrap.appendChild(createDiv);
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    ubh (09-13-2008)

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    =mrhoo;733058
    You don't want a name that was used anywhere in the document.
    Yes, good point.

    One solution is to name other elements in an exotic way that is unlikely to be duplicated.

    e.g. form name = "krv728formname"

  • Users who have thanked Philip M for this post:

    ubh (09-13-2008)

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    function addDiv()
    {
    var getId = prompt('Name New Div.','');
    if (document.getElementById(getId)){
     alert('Duplicate');
     return false;
    }
    That does not work - the id must be a literal string.

  • Users who have thanked Philip M for this post:

    ubh (09-13-2008)

  • #9
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    WOOW thanks you all for your responses so much!!
    I have everything working perfect now, thanks to you guys!!

    You know I will have more questions down the line but for now thanks everyone!!

  • #10
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    It may be critical to ensure that the ID is of an allowable format.
    Code:
    <script type='text/javascript'>
    function addDiv()
    {
     do
     {
      var getId = prompt('Name New Div.', getId||""), result=0;
    
      if( typeof getId==='string' )
      {
        if( !(getId = getId.replace(/^\s|\s$/g, '')).length || !/^[a-z][a-z0-9_\:\.]*$/i.test( getId ) )
         alert('Incorrect format');
        else
         if( document.getElementById(getId) )
          alert('ID already in use in the document');
         else
          result = 2;
      }
      else
       result = 1;
       
     }while( !result );
      
     if(result==2)
     {   
      var getWrap = document.getElementById("wrap");
      var createDiv = document.createElement("div");
      createDiv.setAttribute('id',getId);
      createDiv.style.width="128px";
      createDiv.style.height="128px";
      createDiv.style.float="left";
      createDiv.style.marginTop="5px";
      createDiv.style.backgroundColor="#000";
      getWrap.appendChild(createDiv);
     }
    }
    </script>

  • #11
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by Philip M View Post
    That does not work - the id must be a literal string.
    I'm literally baffled by that.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by Arty Effem View Post
    I'm literally baffled by that.
    Sorry, my brain hit a bad sector. Apologies to Vic.

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Apologies to Vic.
    I had just retested it but no problem.

    with more testing

    Code:
    var tt=true;
    function addDiv()
    {
    var getId = prompt('Name New Div.','');
    if (document.getElementById(getId)||window[getId]||!getId){
     alert('Duplicate');
     return false;
    }
    var getWrap = document.getElementById("wrap");
    var createDiv = document.createElement("div");
    createDiv.setAttribute('id',getId);
    createDiv.style.width="128px";
    createDiv.style.height="128px";
    createDiv.style.float="left";
    createDiv.style.marginTop="5px";
    createDiv.style.backgroundColor="#000";
    getWrap.appendChild(createDiv);
    }
    as cancel produced a div, realy needs a reg ex to ensure a valid id name but thats Philip M province
    Last edited by vwphillips; 09-13-2008 at 12:49 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by vwphillips View Post
    as cancel produced a div, realy needs a reg ex to ensure a valid id name but thats Philip M province
    Here is the final version incorporating Vic's comment:-

    Code:
    <script type = "text/javascript">
    
    function addDiv() {
    var getId = prompt('Name New Div.','');
    if (getId) {
    getId = getId.replace(/^\s+|\s+$/g,""); // strip leading and trailing spaces
    }
    if ((getId == "") || (getId == null) || (getId.length < 6 )) {
    alert ("Invalid Input!  Must be 5 characters minumum");
    return false;
    }
    if (/\W/.test(getId)) {
    alert ("Invalid input! Name may contain letters and numbers only");
    return false;
    }
    if (document.getElementById(getId)||window[getId]||!getId){
     alert('Duplicate name - please try again!');
     return false;
    }
    var getWrap = document.getElementById("wrap");
    var createDiv = document.createElement("div");
    createDiv.setAttribute('id',getId);
    createDiv.style.width="128px";
    createDiv.style.height="128px";
    createDiv.style.float="left";
    createDiv.style.marginTop="5px";
    createDiv.style.backgroundColor="#000";
    getWrap.appendChild(createDiv);
    }
    </script>
    
    <button type="button" onclick="addDiv()">ADD NEW DIV</button>
    <div id="wrap">
    </div>
    Last edited by Philip M; 09-13-2008 at 02:00 PM.

  • #15
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    ... did I miss somthing? why are we imposing a minimum string length?

    anyway - based on the fact that -any- whitespace is bad news for id's, I'd propose the following slight modification to Philip M's code.


    Code:
    <script type = "text/javascript">
    <!--
    
    function addDiv() {
    var getId = prompt('Name New Div.','');
    if (getId) {
    getId = getId.replace(/\s/g,""); // strip whitespace
    }else{
    return false; // handles cancel button
    }
    if ((getId == "") || (getId == null)) { //handles null/blank input
    alert ("The Div must have a name!");
    return false;
    }
    if (/\W/.test(getId)) { //handles invalid characters
    alert ("Invalid input! Name may contain letters and numbers only");
    return false;
    }
    if (document.getElementById(getId)||window[getId]){ //handles duplicates
     alert('Duplicate name - please try again!');
     return false;
    }
    var getWrap = document.getElementById("wrap");
    var createDiv = document.createElement("div");
    createDiv.setAttribute('id',getId);
    createDiv.style.width="128px";
    createDiv.style.height="128px";
    createDiv.style.float="left";
    createDiv.style.marginTop="5px";
    createDiv.style.backgroundColor="#000";
    getWrap.appendChild(createDiv);
    }
    </script>
    
    <button type="button" onclick="addDiv()">ADD NEW DIV</button>
    <div id="wrap">
    </div>
    //-->
    This little snippit is turning into a fine example of how a first solution - even a workable one - to any problem is rarely the best, rarely 'robust' and almost never elegant.

    also - threads like this are good exercise keep it coming


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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