rizwansyed

Hi Guys

Am having a huge html code and it is not aligned properly.

Am using Notepad++ to edit the code.

How can i make it properly aligned using online tools or with in notepad++?

Is there a way to do it?

Thanks and Regards

Rizwan Syed

Hi Guys,

I came across the below code for sending a request for downloading a file from server.

<a href="file link" download target="_blank">Click here to download</a>

But on server side am handling many requests with GET and POST along with resource name.

How can i change above line of code so that i can submit it to server with resource and GET/POST request.

Please help 

Thanks and Regards

Rizwan Syed

Hi

How can i solve it?

Please suggest

Hi

I need to get some data whenever page loads (as it is static data not dynamic).

I used onload event but it works only for first text box and i have many text boxes in other tabs also where i need to get data only once.

I tried with addeventlistener but it has some dependency like , button click or clicking anywhere in document.

I want is, load all the static data when ever webpage opens first time without clciking anything.

I have 6 to 7 tabs where many textboxes are there and where the value should be dispalyed on webpage load

Any suggestions how to proceed

Hi

I am using onsubmit button for user login

onsubmit="return vald1();myFunctiona010(event)" 

It has two functions to be called.

One is to prevent default (preventing from going to next page) and other one to get signout option.

Problem is , i need to click 2 times to get signout button.

Is it possible to do it in one click(prevent default and getting signout option).

Hi

I have a code  where am using a select drop down and for 5th variable a text box will be opened and need to enter the value.

But the entered value is not submitting at the server .

 <form action="/COHARToutputsimulation" id="chout" method="post" target="formDestination">

                        <font size="5"> <strong>Output Simulation-HART:
</font></strong>
<select name="selected" onchange="cooutsim(this.value)">
  <option value="0"> Simulate - 4 mA</option>
  <option value="1">Simulate - 8 mA</option>
  <option value="2">Simulate - 12 mA</option>
  <option value="3">Simulate - 16 mA</option>
  <option value="4">Simulate - 20 mA</option>
  <option value="5">Simulate value </option>
</select>
   
<input type="text" id="ousi" size="10px" style="display:none;">
&emsp;
<input type="submit" style="font-size:10pt;" onclick="chrtout(event)">
</form>
<script>
function cooutsim(val)
{
	if(val == 5)
	{
		document.getElementById("ousi").style.display="inline";
	}
	else
	{
		document.getElementById("ousi").style.display="none";
	}
}
function chrtout(event) {
   var myForm  = document.getElementById('chout');
   event.preventDefault();
   formData = new FormData(myForm);
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
         document.getElementById("chout").innerHTML =this.responseText;
       }
     };

     xhttp.open("POST", "COHARToutputsimulation",true);
     xhttp.send(formData);
     return true;

   }
</script>

What is the issue am not getting.

Please suggest

Thanks and Regards

Rizwan Syed

Hi Guys,

I am using ajax form data to send a data to server.

In that i have 1 textbox and 2 buttons  which uses event.preventdefault();

On my server , only text box value is received , button values are not received.

Instead of 

<input name="subject" type="submit" id="pingfromws1" value="Start" onclick="pingg3(event)">
<input name="subject" type="submit" id="pingfromws2" value="Stop" onclick="pingg3(event)">

i gave button also..still the value of pressed button is not submitted to server.

<form action="/pingfromws.txt" method="post" id="pingfromws" >
<label><strong>Ping:</label></strong><input name="ip" id="ip"  type="text"
min="0" max="255">

<input name="subject" type="submit" id="pingfromws1" value="Start" onclick="pingg3(event)">
<input name="subject" type="submit" id="pingfromws2" value="Stop" onclick="pingg3(event)">  
<p id="pin1" style="display:inline;font-size:17px;"></p>


</form>
<script>
 function pingg3(event) 
 {
var myForm  = document.getElementById('pingfromws');
   event.preventDefault();
formData = new FormData(myForm); 
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
         document.getElementById("pingfromws").innerHTML =
this.responseText;
       }
     };
     xhttp.open("POST", "pingfromws.txt",true);
     xhttp.send(formData);
     return true;
   }
</script>

am using a formdata, so only form data is getting submitted and not button data.

If so, Then how can i send a button data along with above code....i need text value and button value to be submitted at once without submit redirection to other page.

How can i do that

Please provide the suggestions

Thanks and Regards

Rizwan Syed

Hi

Thanks for the suggestions.

Actually tried with width 40% directly.It was fine when compared with before code.

5 hours ago, dsonesuk said:

40% of the total parent container element width it is within, and its not the same as screen

So i just wanted to use direct screen size to avoid confusion on browser window size or other monitor size.

Thanks and Regards

Rizwan Syed

Hi

If browser window is full, then it will be similar to Monitor size.

I want to give 40% of screen width like screen.width*0.4 instead of

width: 800px;

How can i do it?

Thanks and Regards

Rizwan Syed

Hi

i have seen a property of screen.width;

If i use this property , it will be helpful.I thought to use like screen.width* 0.4

How to define it in style

<style>
div.check {
    background-color: lightgrey;
    width: 800px;
    border-style: solid;
    border-color: #92a8d1;
    display: inline-block;

}
</style>

Instead of 800px in above style content, i think i can try with width: 40% 

Whether the 40% will be taken form total width of screen?

Thanks and Regards

Rizwan Syed

Hi

I have attached two images.

 My web page should look similar to capture 1 image (monitor size is 1920*1080 ) but when monitor changes (monitor size is 1366*768) it changes similar to capture 3 (box comes under other not side by side as in capture1 image).

div.check am using to create a box of width 800px.

Is it possible to make its size in percentage of moinitor instead of 800px.

I mean based on monitor, its size should be changed?

<style>
div.check {
    background-color: lightgrey;
    width: 800px;
    border-style: solid;
    border-color: #92a8d1;
    display: inline-block;

}
</style>

<div class="check">
  //code for BOX 1
  </div>

<div class="check">
  //code for BOX 2
  </div>


<div class="check">
  //code for BOX 3
  </div>


<div class="check">
  //code for BOX 4
  </div>

Thanks and Regards

Rizwan Syed

Hi

My Web page changes when i try to open in different resolutions monitor.

Whole content is getting changed .It is not as expected.

I want my web page to be same irrespective of monitors.

Is there any settings to do or any sample web page which has help to do this

Please suggest

Thanks and Regards

Rizwan Syed

Hi

I need to manually select 12 and 24 hr time format

How to get a 12 hr and 24 hr time picker .?

Is there any code or link available

Hi

user names and their verification are authorized  on server side.But tabs are purely in html.

We need to restrict the tabs on based on users.

The code suggested by JMRKER was helpful but it has radio button instead of dropdown and i need tabs exactly as shown in image above. so that i can add my data which is already implemented.

Thanks and Regards

Rizwan Syed

Hi

I need a login option as shown below from dropdown and entering password.

Actually i require a tabs as shown below with user restrictions .Because under each tab , i have nested tabs and more data included already.

So i f get like above, it will be easy for me to proceed.please help on this

Thanks and Regards

Rizwan Syed

Hi

Actually i need to use the tabs menu and dropdown option instead of radio button for my requirement.

So i was trying that way.

Can you suggest me, how to get tabs and dropdown for same requirement

Thanks and Regards

Rizwan syed

Hi 

I tried the below code with my requirement.

https://www.w3schools.com/code/tryit.asp?filename=FW7UUNK298CD

Only the boxes are getting hidden but when i click user radio button nothing appears.

Please help what is wrong here.

Thanks and Regards

Rizwan Syed

Hi

I need to get the time picker and display in format of DD/MM/YYYY.

I checked below example it is showing on YYYY-MM-DD format

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_input_date_get

How can i change it

Thanks and Regards

Rizwan Syed

Hi

I need a multiple selection of drop down list  with select and disabled option for 3 elements.

Because 3 elements should be default selected and user should not able to deselect it.

<form action="/action_page.php" method="post" onclick="validate()"> 
            <select multiple="multiple" id="variable" name="variable"> 
                <option value="0" selected disabled>class1</option> 
                <option value="1" selected disabled>class2</option> 
                <option value="2" selected disabled>class3</option> 
                <option value="3">class4</option> 
                <option value="4">class5</option> 
                <option value="5">class6</option> 
                <option value="6">class7</option> 
                
            </select>
            <input type="submit" value = "Submit">
        </form>
        <script>
        function validate()
        {
            var selectpro = document.getElementById('variable');
            var promaxOptions = 5;
            var proCount = 0;
            for (var i = 0; i < selectpro.length; i++) {
                if (selectpro[i].selected) {
                    proCount++;
                    if (proCount > promaxOptions) {
                        alert("Already 5 variables selected")
                        return false;
                    }
                }
            }
            return true;
        }
        </script>

When submit button is pressed , class1, class2 and class3 should be submitted along with other class elements.

How to work on this

Please provide  the suggestions

Thanks and Regards

Rizwan Syed

Hi 

Being a new to html ,i need some clarification on below example.

I need a drop down list from a vertical menus as shown in figure.

For example , once i get the similar dropdown list as shown in figure.I should able to add form with get or post requests etc( but not for using href for linking htm file or links)  to channel A , channel B and channel C.(

I dont have any clue, how to do it.

Please help

Thanks and Regards

Rizwan Syed

Hi

It was some what similar for my requirement.

1.In the example posted above, how to get the tabs at top instead of down(as this is customer requirement )

2.How can i link with my below code so that it looks similar as below

i saw the horizontal tabs example from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

and created the below one.

 <!DOCTYPE html>
    <html>
    <title>FINAL TEST</title>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {font-family: Arial;}
    /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #fff;
        background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 55px;
        transition: 0.3s;
        font-size: 20px;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 0px solid #fff;
        border-top: none;
    }
    </style>
    </head>
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'home')">Home</button>
      <button class="tablinks" onclick="openCity(event, 'Settings')">Settings</button>
      <button class="tablinks" onclick="openCity(event, 'Changes')">Changes</button>
      <button class="tablinks" onclick="openCity(event, 'Total')">Total</button>
      <button class="tablinks" onclick="openCity(event, 'Input')">Input</button>
      <button class="tablinks" onclick="openCity(event, 'Output')">Output</button>
      <button class="tablinks" onclick="openCity(event, 'Calibration')">Calibration</button>
      <button class="tablinks" onclick="openCity(event, 'selftest')">Selftest</button>
    </div>

    <div id="home" class="tabcontent">
    Number 1
     </div>
    <div id="Settings" class="tabcontent"> 
    Number 2
    </div>
    <div id="Changes" class="tabcontent">
    Number 3
     </div>
    <div id="Total" class="tabcontent">
    Number 4
     </div>
    <div id="Input" class="tabcontent">
    Number 5
     </div>
    <div id="Output" class="tabcontent">
    Number 6
     </div>
    <div id="Calibration" class="tabcontent">
    Number 7
     </div>
    <div id="selftest" class="tabcontent">
    Number 8
     </div>
    
     <script>
    var tablinks = document.getElementsByClassName("tablinks");
    var tabcontent = document.getElementsByClassName("tabcontent");
                if (localStorage.activeLI) {
                    tablinks[localStorage.activeLI].className += " active";
                   tabcontent[localStorage.activeLI].style.display = "block"
                }

    function openCity(evt, cityName) {
        var i;
        
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
        
         for (i = 0; i < tablinks.length; i++) {
                               
              if (tablinks[i].className.indexOf("active") !== -1) {
                    localStorage.activeLI = i;
              }
        }   
        
        
    }
    </script>
         
    </body>
    </html> 

Please suggest

Thanks and Regards

Rizwan Syed

Hi

I have a option of login in my code with 4 users as dropdown  and i have 8 tabs in my page.

user1 should access only 2 tabs and other tabs i need to block for user1.

user2 should access only 4 tabs and other tabs i need to block for user2.

user3 should access only 6 tabs and other tabs i need to block for user3.

user4 should have access to all blocks.

How to proceed with this

Thanks and Regards

Rizwan Syed

Hi 

I need a text to insert in a horizontal thick line.

How to do it.Please suggest

Thanks and Regards

Rizwan Syed

Hi

I have nested tabs being used.

When ever i click on one tab , it is being blocked and other one also gets blocked when i click it.(as shown in image attached).

<script>
function openCitya(evt, cityName) {
    var i, tabcontenta, tablinksa;
    tabcontenta = document.getElementsByClassName("tabcontenta");
    for (i = 0; i < tabcontenta.length; i++) {
        tabcontenta[i].style.display = "none";
    }
    tablinksa = document.getElementsByClassName("tablinksa");
    for (i = 0; i < tablinksa.length; i++) {
        tablinksa[i].className = tablinksa[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>



<meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {font-family: Arial;}

    /* Style the tab */
    .taba {
        overflow: hidden;
        border: 0px solid #fff;
        background-color: #f1f1f1;;
    }

    /* Style the buttons inside the tab */
    .taba button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
    }

    /* Change background color of buttons on hover */
    .taba button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .taba button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontenta {
        display: none;
        padding: 6px 12px;
        border: 0px solid #fff;
        border-top: none;
    }
    </style>
    <body>

It is not getting release.

Please suggest

Thanks and Regards

Rizwan Syed

Hi

I have 3 submit buttons.

When ever i click on one button, the other 2 buttons test should not be visible.

<form action="/action_page.php">
   Rate :&emsp;<input type="text" name="firstname" size="45"><br><br>
   Value:&nbsp;&nbsp; <input type="text" name="lastname" size="45">
  <br><br>

<body>
<button type="button" onclick="tot1_reset()">Reset</button>
<p id="tot1_reset"></p>
<script>
function tot1_reset() {
    document.getElementById("tot1_reset").innerHTML = "is reset ";
}
</script>

<button type="button" onclick="tot1_start()">Start</button>
<p id="tot1_start"></p>
<script>
function tot1_start() {
    document.getElementById("tot1_start").innerHTML = " is running ";
}
</script>

<button type="button" onclick="tot1_stop()">Stop</button>
<p id="tot1_stop"></p>
<script>
function tot1_stop() {
    document.getElementById("tot1_stop").innerHTML = " is Stopped ";
}
</script>
</body>
</form>

I have attached a image related to my output.

Please help

Thanks and Regards

Rizwan Syed