Prevent form submission with Javascript button click

Suppose you have a html form and you need to prevent the submission of a form based on the input provided in a textbox.
The html input type should be “button” in this case.

<input type="button" value="Submit" onclick="checkInput();">

Below is the Javascript code that gets called on the button click:

function checkInput() {
	var form = document.getElementById('form1');
	var str = document.getElementById("txtBox").value; 
	if (str == "") {
		var r = confirm("Do you want to add the detail in the input box?");
		if (r == true) {
			document.getElementById("txtBox").focus();
		} else {
			form.submit();
		}
	}
	else {
		form.submit();
	}
}

The above code will submit the form if field is not blank. If the field is blank, focus gets set to the textbox field named “txtBox” when clicking on OK button. Clicking on Cancel will again submit the form.

Difference between href with blank pound and javascript void 0

The below options I have tried out in a Classic asp application for the anchor link href attribute in HTML:

Using href=”” will reload the current page.

Using href=”#” will scroll the current page to the top.

href=”javascript: void(0)” will do nothing. However, this fires the onbeforeunload event. I had a problem in my classic asp application that was causing the progress bar which was called in the onbeforeunload event, to show up every time the href was clicked to open a pop-up window.

You can get the same effect of javascript: void(0) by returning false from the click event handler of the anchor with either of the other two methods as well.

Use the below anchor link:

<a id="my-link" href="#">Link</a> 

and then bind an event handler to the click listener somewhere in my javascript like:

document.getElementById('my-link').onclick = function(){ 
    // Do something
    return false;
};

This way, since you’re using #, even if the user has javascript disabled, the page won’t reload (it will just scroll to the top), and it’s a lot cleaner looking than javascript: void(0).

Also, this does not fire the window.onbeforeunload event.

Update iframe without affecting browser history

You may face a scenario where you need to update the iframe element on your html page based on some JavaScript condition e.g. a calendar component may be running inside the iframe. Simply updating the “src” attribute causes the browser history to be updated and enables the forward and back browser buttons. This may cause issues in enabling/disabling holidays or weekend dates.

document.getElementById('calfrm1').src = "popcal.asp?target=form1.duedate&weekends=Y

The below code snippet uses contentWindow property of the iframe and replaces the location without affecting the browser history.

var ifr = document.getElementById("calfrm1");

ifr.contentWindow.location.replace("popcal.asp?target=form1.duedate");

Using replace() works only within your own domain iframes. It fails to work on remote sites.

You can remove and construct a new iframe element in the same spot to handle this. When you modify the src attribute, it creates history items as mentioned above, so make sure to set it before the append.

var container = iframe.parent();

iframe.remove();
iframe.attr('src', 'about:blank');

container.append(iframe);

Show image when mouse over on radio button HTML CSS

This post shows the scenario where you need to show an image when doing a mouse-over on a radio button in html. You can customize the code further as per your requirement.

In your html or server side code file, add the below style under the head tags:

<style>
    span .hover-img { 
      position:relative;
    }
    span .hover-img span {
      position:absolute; left:-9999px; top:-9999px; z-index:9999;
    }
    span:hover .hover-img span { 
      top: 20px; 
      left:0;
    }
</style>

Add the below html code under the body tag of the file as below:

<span><div class="hover-img"><font face="Arial"><input type="radio" value="option1" name="myradio"><font size="2">Option 1
</font><span><img src="Mouseover1.png" alt="image" height="100" /></span></div></span><br />

<span><div class="hover-img"><font face="Arial"><input type="radio" value="option2" name="myradio"><font size="2">Option 2
</font><span><img src="Mouseover2.png" alt="image" /></span></div></span>

Run the final code in a browser to see the results.