Why is this working? - javascript

I have written some simple javascript to change the content of an iframe according to the input of a field. After hours of attempts, I have managed to get it working; however I didn't really understand why I should put the "return true" and "return false" at the end of my search function. Thank you in advance!
function search(){
var course=document.getElementById("field");
if(course.value!=""){
if(course.value!="Course code (e.g. COMP1004)"){
var target=document.getElementById("frame");
target.src=course.value + ".php";
return false;
}
}else{
return true;
}
}
<input id="field" name="field" type="text"></input>
<input id="searchButton" name="searchButton" type="button"value="Search"onclick="search()"></input>

You don't really need to, since you are calling the function without expecting any value. And even if you write onclick = return search() you have no default action to prevent, since your input has type="button"

When you trigger a javascript function using onclick (depending on the browser), the actual functionality of the click can be prevented by returning false. So if you click on a button and return true (or nothing) the actual click will be triggered and e.g. load a new page. If you return false, the original function of the button will not be called ...

Related

Focus specific 'id' after submit action

I want to focus on specific id (ex. using $('#a')) after submit.
There is nothing special with my code yet.
My javascript code is
function get_info(id){
$(user_id).submit();
$('#a).focus();
};
After submit, it should focus on where id='a'.
But after submit window focus on id='a' and reset the page.
I tried using
function get_info(id){
$(user_id).submit(function(e){
e.preventDefault();
$('#a').focus();
});
};
But this code make program worse. I think it stops performing submit.
Can anyone help me?
As Chris's comment says you couldn't focus on the element simply by using $('#a').focus(); after the submit since the page will be redirected/refreshed.
You need to use cookies or local storage, here a suggested sample using local storage like :
function get_info(id) {
localStorage.setItem('focusItem', '#a');
$(user_id).submit();
};
Then in the ready function, you could add :
$(function(){
var focusItem = localStorage.getItem('focusItem');
if( focusItem != null ){
$(focusItem).focus();
localStorage.removeItem('focusItem');
}
});
function SetFocus(){
$("#FocusingID").focus();}
/***********another way **********************//*
$("#submitbtnId").click(function(){
//your submession and other task;
$("#FocusingID2").focus();
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id=FocusingID>
<button type=submit onclick="SetFocus();">click</button>

How can I re-enable a text field?

I am trying to re-enable a text field that gets automatically filled in and disabled on the website we use for ticketing. It is currently possible to inspect element, and enable manually to field to enter anything you want. I'd like to remove that step. I am trying to make a (very) simple chrome extension that will detect when the field has been disabled and switch it back on, but I'm having no luck.
I've tried several iterations, with no success. Here's what I've got at the
moment.
var subject = document.getElementById('title_fs');
subject.onchange = function() {fix()}
function fix(){
subject.setAttribute("enabled", true)}
I also tried
var subject = document.getElementById('title_fs');
subject.addEventListener("change", {subject.setAttribute("disabled", false)});
The most success I've had so far was accidentally disabling the field as soon as the page loaded. Any suggestions?
Simply remove the attribute
document.getElementById('title_fs').removeAttribute('disabled');
document.getElementById('removeDisabled').addEventListener('click', function() {
document.getElementById('title_fs').removeAttribute('disabled');
});
<textarea disabled="true" id="title_fs">Foobar</textarea>
<button id="removeDisabled">Remove Disabled</button>
element.disabled = true/false
function func() {
var elem = document.getElementById('someId');
elem.disabled = !elem.disabled;
};
<input type="text" id="someId" />
<button onclick="func();">click</button>

How to render a new page in a javascript script

I am using XHTML, JSF and JavaScript to create a form, validate that information has been submitted into selected fields onclick in a h:commandButton, and if validated, redirect to a different page homepage.xhtml. Everything works up to the redirection, which I can't get to work.
In the JavaScript function Validation(), I have tried location="homepage.xhtml", window.location.href="homepage.xhtml", location.url="homepage.xhtml" and a few others, but nothing seems to work. I have a feeling I'm supposed to have some sort of statement which adds href="homepage.xhtml" to the h:commandButton if Validate() returns true, but I am unsure as to how to do that.
Any help is greatly appreciated. I have added the relevant code below.
Button:
<h:commandButton class="btn btn-warning" value="Continue" onclick="Validation()"/>
Validation
function Validation() {
var nameCheck = document.getElementById('formdiv:cardName');
var numCheck = document.getElementById('formdiv:cardNumber');
var expCheck = document.getElementById('formdiv:expDate');
console.log(nameCheck.value);
console.log(numCheck.value);
console.log(expCheck.value);
var variablesToCheck = [nameCheck, numCheck, expCheck];
for(i=0; i < variablesToCheck.length; i++){
if(variablesToCheck[i].value == null || variablesToCheck[i].value == ""){
alert("Fields marked with a * must be completed");
return false;
}
}
// This is where the redirection needs to go, I think...
return true;
}
EDIT: Just noticed the if else statement is incorrect logically, but syntactically it shouldn't make a difference. The else part needs to be a statement outside of the loop without a condition; this code simply tries to redirect when the field it is checking has something in, not when all fields have something in.
EDIT 2: Loop corrected
Why you need h:commandButton anyway you are using simple javascript validation
h:commandButton is rendered as <input type="submit" ../> its mission is
to submit the form so what ever javascript you are writing your form will be submitted and your page is gonna be refreshed, So If you need it this way you have to force it not to submit the form,
However from understanding your needs all you need is simple <a /> or <button /> , Or you can just add type="button" into your h:commandButton ex:<h:commandButton type="button" .../>
You can either use..
window.location.replace('Your_url'); ..
or you can use..
window.location.href= 'Your_url'; .. I guess there must be other functions too. If you want to open it in another window, like a popup, you can use.. window.open('your_url');
Hope this helps!

How to disable button in javascript

Onclick of button,(In clientclick event)I show confrmation box having ok and cancel button.Onclick of ok button,buttonclick event fire.I want to disable button and show to message(Pls wait) to user.I am trying but not working.Unable to disable the button and set text to label.
function validate()
{
var response = confirm(Proceed)
if(response)
{
document.getElementById('btnSave').disabled = true;
document.getElementById('lblMessage').innerText = 'Please Wait';
return true;
}
else
{
return false;
}
}
I am getting error.Error is
JavaScript runtime error: Unable to get property 'innerText' of undefined or null reference in asp.net
First of all there's maybe a problem in your HTML. Javascript cannot find the 'lblMessage' element. Fix that first and you're good to go.
Maybe you're using ASP.NET Web Forms. ASP.NET changes the client ID's of server controls depending on the ID of their container. You can change this behavior easily by reading this article:
http://weblog.west-wind.com/posts/2009/Nov/07/ClientIDMode-in-ASPNET-40
Or, find your elements by class name. That way it won't cause conflict with any configuration you're now using.
I think you need to add your html code. I'm guessing your html looks like this
<button onclick="validate()">
you need to add a return statement into the html code so it looks like this
<button onclick="return validate()">

Checkbox can't be unchecked

I am currently trying to solve a problem with my jquery and my html form.
Problem: I have a checkbox that allows people to check to accept or not accept the terms and conditions. This checkbox is being validated by a jquery function, named validateAccept(). However, after i insert the if valid return true and if not valid return false, the checkbox become unresponsive to clicking. I am a beginner with jquery. I am not sure which part went wrong.
my HTML code:
<form action="<? echo $filename; ?>" id="acceptanceForm" name="acceptanceForm" method="post">
<p>Terms and conditions.......</p>
I ACCEPT THE TERMS AND CONDITIONS
<input type="checkbox" name="accept" id="accept" value="yes"/>
<span id="acceptInfo" class="inputInfo"></span>
</form>
My jQuery validating code:
$(document).ready(function(){
//Validation (TERMSANDCONDITION)
//termsandconditions variables
var acceptanceForm = $("#acceptanceForm");
var accept = $("#accept");
var acceptInfo = $("#acceptInfo");
//Trigger validation
//On blur
accept.click(validateAccept);
//On key press
accept.keyup(validateAccept);
//On submit
acceptanceForm.submit(function () {
if (validateAccept())
return true
else
return false;
});
//Validation
//validate accept
function validateAccept() {
var isChecked = $('#accept').is(':checked');
if (isChecked) {
accept.removeClass("error");
acceptInfo.text("Thanks");
acceptInfo.removeClass("error");
acceptInfo.removeClass("inputInfo");
acceptInfo.addClass("validated");
return true;
} else {
accept.addClass("error");
acceptInfo.text("Please Read and Accept the Terms and Conditions");
acceptInfo.removeClass("inputInfo");
acceptInfo.removeClass("validated");
acceptInfo.addClass("error");
return false;
}
}
What I know:
I know that the problems lies with the return true and return false that I added in. I tried without them on JS Fiddle and the check box is working but the form is not. Therefore, I know that return true and false is necessary but I don't really know how I should sort them out to make it work. I have did some researched and realised that little little cases similar to mine. This validation technique is suppose to work on text input so I am not sure if the way i edit it is alright to work for checkbox.
JSFiddle
The problem is that returning false in a click handler prevents the default behavior. If you need to use this in both situations, but ignore the return value in the case of the click handler, you could do this:
accept.click(function(){
validateAccept();
});
http://jsfiddle.net/8JdRb/1/
In this case the click handler function has no return value and does not affect the functioning of the checkbox.
I found the answer. I can use .change(validateAccept); instead. It would work exactly the same as I wanted to. Thanks all.
JSFiddle

Categories