www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Opening links in multiple tabs of browser

Hybrid View

  1. #1
    Join Date
    Dec 2013
    Posts
    12

    Question Opening links in multiple tabs of browser

    Hello Folks,

    To start off with ..Im very new to Javascript and Im in the process of learning this language.
    I have been trying to create a form using HTML and Javascript.

    The form has a number of check boxes.(possibly around 20 or so checks boxes.. The aim of the form is for the user to select the desired number of check boxes and upon clicking the submit button, the links associated with the checked check boxes should open in multiple tabs of the browser .
    If no check box is selected a message box should prompt the user to check atleast one... I hope im making sense..

    I have added my code below for reference
    Code:
    <html>
    <head>
    <title>Checkbox Project</title>
    <script type="text/javascript" language="javascript">
    <!-- //
    function CheckCheckboxes(){
        var elLength = document.MyForm.elements.length;
    
        for (i=0; i<elLength; i++)
        {
            var type = MyForm.elements[i].type;
            if (type=="checkbox" && MyForm.elements[i].checked){
                alert("Form element in position " + i + " is of type checkbox and is checked.");
            }
            else if (type=="checkbox") {
                alert("Form element in position " + i + " is of type checkbox and is not checked.");
            }
            else {
            }
        }
    }
    // -->
    </script>
    </head>
    <body>
    <form action="">
    <table align="left" border="1" style="border-collapse: collapse;">
    
        <tr style="height:30px">
            <td colspan="8"><center>Companies</center></td>
        </tr>
        
        <tr>
             <td><input type="checkbox" name="Google" onclick="if(this.checked){OpenWindow(this.value)}"value="www.google.com">Google </td> 
             <td><input type="checkbox" name="Apple" onclick="if(this.checked){OpenWindow(this.value)}"value="www.apple.com">Apple </td> 
             <td><input type="checkbox" name="Microsoft" onclick="if(this.checked){OpenWindow(this.value)}"value="www.Microsoft.com">Microsoft </td> 
             <td><input type="checkbox" name="facebook" onclick="if(this.checked){OpenWindow(this.value)}"value="www.facebook.com">Facebook </td> 
            
            </td> 
    	 <td><br /><input type="submit" value="Send Form" onclick="CheckCheckboxes()"/></td>
       </tr>
    	
    </table>
    </body>
    </html>
    Any help on the my above request is appreciated ...

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    This seems to work ok in FireFox and IE, I don't think Chrome will allow more than one new tab at once (maybe it's just me?):

    Code:
    <html>
    <head>
    <title>Checkbox Project</title>
    <script type="text/javascript">
    
    function CheckCheckboxes(form)
    {
    	var
    		i, counter = 0;
    
    	for (i = 0; i < form.elements.length; ++i) {
    		if ('checkbox' === form.elements[i].type && form.elements[i].checked) {++counter;
    			window.open('http://' + form.elements[i].value, '_blank');
    		}
    	}
    	if (!counter) {
    		alert('Please check at least one!');
    	}
    }
    
    </script>
    </head>
    <body>
    <form onsubmit="CheckCheckboxes(this); return false;">
    <table align="left" border="1" style="border-collapse: collapse;">
    
        <tr style="height:30px">
            <td colspan="8"><center>Companies</center></td>
        </tr>
    
        <tr>
             <td><input type="checkbox" name="Google" value="www.google.com" />Google</td>
             <td><input type="checkbox" name="Apple" value="www.apple.com" />Apple</td>
             <td><input type="checkbox" name="Microsoft" value="www.Microsoft.com" />Microsoft</td>
             <td><input type="checkbox" name="facebook" value="www.facebook.com" />Facebook</td>
    
            </td>
    	 <td><br /><input type="submit" value="Send Form" /></td>
       </tr>
    
    </table>
    </form>
    </body>
    </html>
    Last edited by bionoid; 12-10-2013 at 12:58 PM.
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Dec 2013
    Posts
    12
    @ bionoid

    Thank you very much for the input, but my intention was to open all the links associated with the check boxes. ie. say if im clicking on google and apple ..both should open in new tabs ..suppose i click all the check boxes then all the links should open...am i making sense ?

  4. #4
    Join Date
    Dec 2013
    Posts
    12
    sorry, please disregard my comment earlier...the code work well in Firefox...ill do some more tests and get back ...thanks a million times over....

  5. #5
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    I think you updated your post quick enough that I didn't get your previous comment, even through email
    JavaScript: Learn | Validate | Compact | bionoid

  6. #6
    Join Date
    Dec 2013
    Posts
    12
    ....ya I was over excited when I saw your response... although I do have another doubt... say I want to include radio buttons as well where should I be going about adding the code....I ll explain a little better

    The form has 3 radio buttons on the top ... 1. radio -IT, 2.Radio- shopping 3.Radio- Mails
    when I click the first radio button, the first set of check boxes(above) appear, if i click the second radio button, in the exact same location,the check boxes for IT should be replaced with the check boxes for shopping ... Is this possible ?

  7. #7
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    Yes, of course it is possible
    JavaScript: Learn | Validate | Compact | bionoid

  8. #8
    Join Date
    Dec 2013
    Posts
    12
    Cool ... Ill try writing the code and get back with the results...

  9. #9
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    Saw you looking around and decided to give you a head start...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Checkbox Groups</title>
    
    		<script type="text/javascript">
    
    			function showCheckboxGroup()
    			{
    				var
    					i, j;
    
    				for (i = 0, j = document.getElementsByName('checkbox_group'); i < j.length; ++i) {
    					document.getElementById('checkbox_group_' + j[i].value).style.display = j[i].checked ? '' : 'none';
    				}
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		<div>
    			<input type="radio" name="checkbox_group" value="1" onclick="showCheckboxGroup();" checked="checked" /> IT
    			<input type="radio" name="checkbox_group" value="2" onclick="showCheckboxGroup();" /> Shopping
    			<input type="radio" name="checkbox_group" value="3" onclick="showCheckboxGroup();" /> Mails
    		</div>
    		<div id="checkbox_group_1" style="padding: 10px; border: 1px solid #000; margin-top: 10px;">
    			IT CHECKBOXES
    		</div>
    		<div id="checkbox_group_2" style="padding: 10px; border: 1px solid #000; margin-top: 10px;">
    			SHOPPING CHECKBOXES
    		</div>
    		<div id="checkbox_group_3" style="padding: 10px; border: 1px solid #000; margin-top: 10px;">
    			MAILS CHECKBOXES
    		</div>
    		<script type="text/javascript">
    			showCheckboxGroup();
    		</script>
    
    	</body>
    </html>
    JavaScript: Learn | Validate | Compact | bionoid

  10. #10
    Join Date
    Dec 2013
    Posts
    12
    Now Im mortified ....Anyways thanks a lot ..Im going to try this and get back with the results...

  11. #11
    Join Date
    Dec 2013
    Posts
    12
    Hi bionoid ,

    The code works well for the above given example. But some how when i use this same format for my application .. it does not work .. that is when I click the second radio button .. the code in <div id="checkbox_group_2"> </div> does not show up ...? Any idea why Am I missing something here ?...I have been breaking my head trying to find an answer...Also is there a way to make this concept work html codes that have many lines ?

  12. #12
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    I don't know how you've applied the code into your situation. Please post the code you have, and I'll take a look at it. Don't forget to place it within [code ][/code ] tags to preserve the formatting.
    JavaScript: Learn | Validate | Compact | bionoid

  13. #13
    Join Date
    Dec 2013
    Posts
    12
    Hey Im unable to post the code "The text that you have entered is too long (13650 characters). Please shorten it to 10000 characters long."
    What do I do ?

  14. #14
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    There are a few ways:

    - You could just post the code that you wish attention on.
    - Upload the content as an attachment. (if the entire source is really necessary)
    - If you have the code published on the internet, just send the url.
    JavaScript: Learn | Validate | Compact | bionoid

  15. #15
    Join Date
    Dec 2013
    Posts
    12
    part-1
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="utf-8" />
     <title>project</title>
     <script type="text/javascript">
    
                            function showCheckboxGroup()
                            {
                                    var
                                            i, j;
    
    
                                    for (i = 0, j = document.getElementsByName('checkbox_group'); i < j.length; ++i) 
                                    {
                                            document.getElementById('checkbox_group_' + j[i].value).style.display = j[i].checked ? '' : 'none';
                                    }
                            }
    
                           function CheckCheckboxes(form)
                           {
    	                    var4
    		            i, counter = 0;
    
    	                    for (i = 0; i < form.elements.length; ++i) 
                                  {    
    		                  if ('checkbox' === form.elements[i].type && form.elements[i].checked) 
                                  { 
                                      ++counter;
    			          window.open('http://' + form.elements[i].value, '_blank');
    		              }
    	                 }
    	                if (!counter) 
                             {
    		           alert('Please check at least one!');
    	                 }
                          }
                          showCheckboxGroup();{}
     
                         function resetForm(form) 
                         {
                           // clearing inputs
                              var inputs = form.getElementsByTagName('input');
                              for (var i = 0; i<inputs.length; i++) {
                              switch (inputs[i].type) {
                              // case 'hidden':
                              case 'text':
                              inputs[i].value = '';
                              break;
                              case 'radio':
                              case 'checkbox':
                              inputs[i].checked = false;   
                                    }
                                } 
                          // clearing selects
                             var selects = form.getElementsByTagName('select');
                             for (var i = 0; i<selects.length; i++)
                             selects[i].selectedIndex = 0;
                             return false;
                           }
    
    </script>
    </head>
    <body> 
    <form onsubmit="CheckCheckboxes(this); return false;">
       <div>
           <input type="radio" name="checkbox_group" value="1" onclick="showCheckboxGroup();" checked="checked" /> Radio1
           <input type="radio" name="checkbox_group" value="2" onclick="showCheckboxGroup();" /> Radio2
           <input type="radio" name="checkbox_group" value="3" onclick="showCheckboxGroup();" /> Radio3
    
       <div id="checkbox_group_1" >    
       <table  width="100%" border="0">
        <tr style="height:30px;border-style:border-collapse:collapse;solid;border-color: #abd5f5;bgcolor="#a3c5e7" >
         <td colspan="10" style="border-style:border-collapse:collapse;solid;border-color: #abd5f5;">
       <table>
       <tr align="left" bgcolor="#a3c5e7">
        <td ALIGN= "LEFT"rowspan="2" style="border-right: 0px;">
         <div style='overflow:hidden;max-height:30px'>
          <FONT COLOR="#369",Cambria>
           <B>
            <CENTER>
             Project
            </CENTER>
           </B>
         </td>
        <td style="width:6%;">
         <FONT COLOR="#369",Cambria SIZE=3>
           XXXXXXX
        </td>
        <td style="width:6%;">
         <input name="aaa" type="text" maxlength="10" size="12">
        <td>
        <td align="left" style="width:5%;">
         <FONT COLOR="#369",Cambria >
          XXXXXXX
         </td>
        <td width="6">
         <input name="bbb" type="text"maxlength="6" size="6">
        </td>
        <td style="width:2%;">
         <FONT COLOR="#369",Cambria >
          XXXXXXX
        </td>
        <td style="width:22%;" ><input name="cccccc" type="text" size="53" >
        </td>
        <td style="width:5%;"><FONT COLOR="#369",Cambria SIZE=3>
         xxxxxxxx
        </td>
        <td width="14">
         <input name="ddddddd" type="text"maxlength="14" size="14">
        </td>
        
        <td align="left" width="3"><input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);"></td>
      </tr>
    </table>
    <br>
    
    <table  width="100%" align="left" border="1" style="border-collapse:collapse;solid;border-color: #abd5f5">
    
        <tr style="height:30px" bgcolor=" #d0e5f5">
            <td><center>xxxxxxxxxxxxxxxx</center></td>
            <td align="justify"> <center>xxxxxxxxxxxxxxxxxxxxxxxx</center> </td>
        </tr>
    <tr>
        <td>
    <table width="100%" align="left" border="1" style="border-collapse:collapse;solid;border-color: #abd5f5">
    </tr>
    <tr style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5" bgcolor="#f1f5fc">
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="a" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="b" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="c" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="d" value="[link] />XXXXXXXXX</td>
    </tr>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="e" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="f" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="g" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="h" value="[link] />XXXXXXXXX</td>
    <tr>
    <tr style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5" bgcolor="#f1f5fc">
    <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="i" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="j" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="j" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="k" value="[link] />XXXXXXXXX</td>
    </tr>
    <tr style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5" bgcolor="#f1f5fc">
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="l" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="m" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="n" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="o" value="[link] />XXXXXXXXX</td>
    </tr>
    <tr style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5" bgcolor="#f1f5fc">
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="p" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="q" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="r" value="[link] />XXXXXXXXX</td>
     <td style="height:30px;border-collapse:collapse;solid;border-color: #abd5f5"><input type="checkbox"name="s" value="[link] />XXXXXXXXX</td> 
    </tr>
    </table>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles