Category: HTML

Post related to HTML

Add default blank value for select option in contact form 7 wordpress

Normally when you use contact form 7 plugin , for dropdown select option, there is no option to set blank value for the first option to validate the select field.

For example, what we have in wordpress contact form 7

<select name=”your_field_name”>
<option value=””>—</option>
<option value=”yes”>Yes</option>
<option value=”no”>No</option>
</select>

But in actual scenario, i want to display the label for the first option as “–Select Value–” with empty value.
To make the same change, you can use the dropdown code as below
[select* your_field_name_ class:form-select class:required first_as_label “–Select Value–” “Yes” “No”]

In the above code “first_as_label” is important parameter. It instruct the plugin to use the first option as label with default empty value. So the generated output look as below

<select name=”your_field_name”>
<option value=””>–Select Value–</option>
<option value=”yes”>Yes</option>
<option value=”no”>No</option>
</select>

If you have any queries, you can write back to us or comment in the comment section.

Ajax call using jquery

function makeAjaxRequest(data1,data2,.....,datax){
    $.ajax({
        'type':'POST',
        async: false,
        url: 'http://www.example.com/some_request_url',
        data:{param1:data1,param2:data2,....,paramx:datax},
        success : function(response) {
            console.log(response); // Using this you can check the posted data in browser console window
            return true;// you can process and return the response as required
            //location.reload(); // or you may reload the current page also
        },
        error: function (jqXHR, exception) {
            // If some error is returned, you can check the details below
            var msg = '';
            if (jqXHR.status === 0) {
                msg = 'Not connect.\n Verify Network.';
            } else if (jqXHR.status == 404) {
                msg = 'Requested page not found. [404]';
            } else if (jqXHR.status == 500) {
                msg = 'Internal Server Error [500].';
            } else if (exception === 'parsererror') {
                msg = 'Requested JSON parse failed.';
            } else if (exception === 'timeout') {
                msg = 'Time out error.';
            } else if (exception === 'abort') {
                msg = 'Ajax request aborted.';
            } else {
                msg = 'Uncaught Error.\n' + jqXHR.responseText;
            }
            $('#post').html(msg); // return the error response in your html page or process it further as required
        }
    });
}

 

Validate checkbox array and prefill with selected value on validation error in laravel 5

Say for example you have your checkbox field code in your twig file as below:-

@foreach ($serviceList as $servloop)
<div class=”checkbox”>
<label>
<input type=”checkbox” name=”services[]” value=”{{$servloop->service_id}}” {{ ( is_array(old(‘services’)) && in_array($servloop->service_id, old(‘services’)) ) ? ‘checked ‘ : ” }} />
{{$servloop->service_name}}
</label>
</div>
@endforeach

Controller file code

Validation Rule will be as below:-

$rules = [
‘services’ => ‘required|min:1’,  // min:1 means atleast one should be selected
];

$customMessages = [
‘services.required’ => ‘Select the service you will need from us, for and during the Expo.’,
];

 

 

 

Validate date format mm/dd/yyyy by using jquery validation library

First add the custom method to the validation library as below. Can you put this code in your jquery validation file or in your page where you want to validate the date, just before setting your validation rule for your form.

$.validator.addMethod(“dateFormat”,
 function (value, element) {
 return value.match(/^(?:(0[1-9]|1[012])[\/.](0[1-9]|[12][0-9]|3[01])[\/.](19|20)[0-9]{2})$/);
 },“Please enter a date in the format mm/dd/yyyy.”);

Now suppose you are using a datepicker or input field to accept the date in mm/dd/yyyy format like 02/21/2018 as example. You can validate it as below;

 

<form id="your-form-id">
<input id="submission_date" name="submission_date" type="text" />
<input type="submit" value="submitForm" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js">
 <script type="text/javascript">

$("#your-form-id").validate({
 rules: {
 submission_date: {
 required: true,
 dateFormat: true,
 },
 },
 messages: {
 submission_date: {
 required: "Please select or enter the submission date!!.",
 dateFormat: "Submission date should in the format mm/dd/yyyy.",
 },
 },
 errorPlacement: function(error, element) {
 error.insertAfter(element);
 },
 submitHandler: function (formName) {
 formName.submit();
 }
 });
 </script>

Validate date format mm/dd/yyyy in jquery or javascript

<script type="text/javascript">

function isValideDate(datavalue){
 var regexValidDate = /^(?:(0[1-9]|1[012])[\/.](0[1-9]|[12][0-9]|3[01])[\/.](19|20)[0-9]{2})$/;
 return regexValidDate.test(datavalue);
 }

var dateToCheck = '06/01/2011',

if(isValideDate(dateToCheck)){

alert("Given date is valid as per the format of MM/dd/YYYY");

}else{

alert("Given date is not valid as per the format of MM/dd/YYYY");

}

</script>

 

Redirect to another page after a specific time interval

<html>
<body>
<h1>Welcome to my Website</h1>
<h4 id=”msg”>You will be redirected to another page in 5 seconds!</h4>
<script type=”text/javascript”>
function countDown(i, callback) {
callback = callback || function(){};
var int = setInterval(function() {
//document.getElementById(“displayDiv”).innerHTML = “Number: ” + i;
document.getElementById(“msg”).innerHTML = “You will be redirected to backend page in “+i+” seconds!”;
i– || (clearInterval(int), callback());
}, 1000);
}
setTimeout(function(){
countDown(5, function(){
window.location=”[Give your absolute or relative url to redirect]”;
});
}, 3000);
</script>
</body>
</html>

How to wrap data column in Gridview widget in yii or yii2 framework

The column which you want to wrap should be added the property called “contentOptions” where you can apply the css property to suits your needs and requirements as below.

[
‘attribute’ => ‘column name’,
‘format’ => ‘html’,
‘noWrap’ => false,
‘mergeHeader’=>true,
‘contentOptions’ => [‘style’ => ‘width: 50%; overflow: scroll;word-wrap: break-word;white-space:pre-line;’],
‘value’=>function ($data) {
return $data[‘question’];
},
],

Replace any text from html text by tag name with specific attribute in php

function replace_tag_with_specific_attr_type( $tagAttribute, $tagAttributeValue, $subjectStr, $tagName=null,$replaceStr ) {
if( is_null($tagName) )
$tagName = ‘\w+’;
else
$tagName = preg_quote($tagName);

$tagAttribute = preg_quote($tagAttribute);
$tagAttributeValue = preg_quote($tagAttributeValue);

$match_regex = “/<(“.$tagName.”)[^>]*$tagAttribute\s*=\s*”.
“([‘\”])$tagAttributeValue\\2[^>]*>(.*?)<\/\\1>/”;

preg_match_all($match_regex,
$subjectStr,
$matches,
PREG_PATTERN_ORDER);

$result = str_replace($matches[3],$replaceStr,$subjectStr);
return $result;
}

Usage :
Say for Example

$ActualStr : ‘<div class=’bannerpicsd’ ><span style=”margin: 0px 0px 0px 0px; width: 540px;”>something</span><p style=”float: right; margin: -240px 0 0; width: 200px;”>This is the actual String</p></div>’;
$StrToReplaceWith = ‘This is the replaces str’;

Now you want to replace all the text inside the div tags with class name “bannerpicsd”  from $ActualStr with $StrToReplaceWith
Then you can do as below:

$replacedStr  = replace_tag_with_specific_attr_type(‘class’,’bannerpicsd’,$ActualStr,’div’,$StrToReplaceWith);
Result :
<div class=”bannerpicsd” >This is the replaces str</div>
Enjoy 🙂