Tag Archives: HTML & CSS

How to submit a form to a new window in post method using javascript?

HTML & CSS, Java Scripts, jQuery, ,

To submit a form to a new window in post method,

HTML

<form name="form_message_center_popup" id="form_message_center_popup" method="post" action="/folder/file.ext">
    <input type="text" name="user_name" id="user_name" value="abc"/>
    <input type="text" name="clientid" id="clientid" value="efg"/>
    <input type="button" onclick="form_submiter()" value="submit"/>
</form>

JavaScript

function customer_support_msg() {
    var customer_support = window.open("about:blank", "_form", "location=no, menubar=no, toolbar=no, fullscreen=yes, scrollbars=yes, resizable=yes, width=800, height=600, replace=true");
    document.forms["form_message_center_popup"].target='_form';
    document.forms["form_message_center_popup"].submit();
    return false;
}

Set custom validation message for HTML5 form required attribute.

HTML & CSS, Java Scripts,

Hi,
Set custom validation message for HTML5 form required attribute using the DOM function setCustomValidity . Please go through following example.

<input type="text" name="Username" id="Username" required="required" oninvalid="this.setCustomValidity('Username cannot be empty.')" />

Screenshot :

manukeerampanal

How to set a div fixed horizontally but not vertically?

HTML & CSS, Java Scripts, Uncategorized,

To set the divs’ position horizontally fixed but not vertically, use the following code :

HTML

<div id="container">
    <div id="manu"></div>
</div>

CSS

<style type="text/css">
#container {
 position:relative;
    width:700px;
 height:1000px;
    top:50px;
    left:50px;
 background-color:yellow;

}

#manu{
    position:fixed;
    width:100px;
    height:100px;
    background-color:blue;
    margin-top:20px;
    margin-left:400px;
}
</style>

Jquery

<script type="text/javascript">
$(window).scroll(function(event) {
   $("#manu").css("margin-left", 400-$(document).scrollLeft());
});
</script>

To see demo please click the link below :

http://jsfiddle.net/kL33K/

Javascript to check the maxlength.

HTML & CSS, Java Scripts, Uncategorized,

Since IE 8 doesn’t support the attribute maxlength, we need to use java script to workout this functionality. We can write the script as follows.

<textarea id="clm_add_lin_dta" maxlength="80" name="clm_add_lin_dta" style="resize:none;" onchange="testLength(this,80)" onkeyup="testLength(this,80)" onpaste="testLength(this,80)"></textarea>

<script>
   function testLength(ta,maxLength ) {
        if (ta.value.length > maxLength) {
            ta.value = ta.value.substring(0, maxLength);
        }
    }
</script>

How to implement “select all” check box using js in HTML?

HTML & CSS, Java Scripts,

It can be implemented as follows…

<input id="my_selectall" style="box-shadow: 0px 0px 0 0; width: auto;" onclick="mycheck()" type="checkbox" /> Sl No.
<input style="box-shadow: 0px 0px 0 0; width: auto;" type="checkbox" name="case" value="1" /> 1
<input style="box-shadow: 0px 0px 0 0; width: auto;" type="checkbox" name="case" value="2" /> 2
<input style="box-shadow: 0px 0px 0 0; width: auto;" type="checkbox" name="case" value="3" /> 3
<input style="box-shadow: 0px 0px 0 0; width: auto;" type="checkbox" name="case" value="4" /> 4
<script type="text/javascript">
    function mycheck() {
        var source=document.getElementById('my_selectall');
        checkboxes = document.getElementsByName('case');
        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
        }
    }
</script>