Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have made a form in which I am asking "Do you make use of this service?".I don't want the remaining questions to appear If the user clicks on the radio button "no". How can I make use of javascript to do this?
Put the rest of your form in a div and then include this js. I'd advise putting it in script tags at the end of the document, otherwise you'll have to wrap it all in window.onload{}.
Also, this will work for checkboxes which makes more sense to me for a yes/no question. I've added a comment for the slight edit you'll need to make it work for radio buttons.
// give the radio button an easy name
var r_b = document.getElementById("radio-button's-id-here");
// and give the div a nice selector
var serv = document.getElementById("the-div's-id");
// listen to when it is clicked
r_b.addEventListener("click",checked,false);
// optional: you originally specified radio buttons which means you'll need to add an event listener for the no option
// lastly include a function to handle everything
function checked (){
// check its status
if (r_b.checked){
// hide the form
serv.style.display = "none";
}else{
serv.style.display = "inline";
}
}
Disclaimer: I'm on my phone, so this is untested and may have typos.
Edit: you don't need to use cookies unless the form is on another page or if you expect users to see this exact page many times without being prompted
Here you go, check this out: http://jsfiddle.net/58urhgen/
<form>
Do you make use of this service?
<input type="radio" name="my-radio" value="Yes" onclick="document.getElementById('service-used').style.display='block';document.getElementById('service-not-used').style.display='none';" /> Yes
<input type="radio" name="my-radio" value="No" onclick="document.getElementById('service-used').style.display='none';document.getElementById('service-not-used').style.display='block';" /> No
<div id="service-used" style="display:none;">
<p>You use the service!</p>
</div>
<div id="service-not-used" style="display:none;">
<p>Doesn't use the service!</p>
</div>
</form>
I've simply used event handlers of the radio buttons to show/hide the respected portions of the form depending on the user's choice. I think this is what you're trying to achieve.
PS: This is not the best practice but this is just to show you how it can be achieved. You can use functions to make your code tidy.
You can use Cookie to store the form status. http://www.w3schools.com/js/js_cookies.asp
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Anyone of you knows if there is a way to increase the time before that a search starting when the user is trying to select an element from a select list by typing the name of the element, in HTML.
For example: I have a list of 100 elements, and the user wants to find the element "Adam Smith" but he is very slow and he can not type very fast in order to select the element Adam smith. Do you know if there is a way to help the user in this use case.
I can use a different component instead of the normal select in HTML, but I am working with a legacy system and I cannot change the source code too much. Anyway also JS solutions are well accepted
I think is a perfect use case for the debounce method of Lodash.
Here is a little example where the time the function will wait until fire is 500:
function doSearch () {
$('#output').html('searched: ' + $('#search').val())
}
$('#search').on('input', _.debounce(doSearch, 500));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=text id=search />
<p id=output></p>
function doSearch () {
console.log('do search')
}
$('#search').on('input', _.debounce(doSearch, 500));
To debug and find which functions are called when a user starts typing, you can add some JavaScript at the very end on the HTML output that adds (or overrides) the original behavior.
This may help tracking down the problem and find out where that timer value is set:
document.getElementById('thatInputElement').onKeyUp = function(event)
{
console.log(event);
};
You can also achieve this directly from the dev-tools web-console in your browser, without tampering with the source-code.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I don't understand how to make and use forms. Can someone give me and example using external java script where there is an input text and a submit button and when it gets click it does a java script function. I also have some questions. If i'm not using a form to change pages do i need a method. What do i put for the action attribute. Are forms the best way to get input text data to java script. And why should i use a form and not just input tags.
Thanks.
No, you don't need a form to collect user input form fields.
Here is a really simple friendly example using MagJS:
HTML:
<div id="hello">
<label>Name:</label>
<input name="hello" placeholder="Enter a name here" />
<hr/>
<h1>Hello <name/></h1>
</div>
JS:
mag.module("hello", {
view: function(state) {
state.input = {
_oninput: function() {
state.name = this.value
}
}
}
})
Here is a link to the working example: http://jsbin.com/fivaqoliqe/1/edit?html,js,output
Hope that helps!
The short of it is that W3Schools lets you play around but they are scarce on explanation so I suggest you check out this resource instead (which also has a demo of a form): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
The action attribute is where it should go after it is done to further process the form (typically a route or backend server is where you will go after). Given what you have been talking about however, you only have one field and one button, so you should look into the onclick attribute and then look up the input field and read the value. You use a form when you have a lot of inputs that are related and should be sent at once. There's a lot out there though as this is very basic but if you have any questions just ask.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am little bit new to html and php programming so I wondered if there is a way to do the following things :
I have this input html code that should get a full name of a person.
<form action="createName.php" method="post">
<input dir="rtl" name="fullname" type="text" placeholder="שם פרטי + שם משפחה" />
<button style="width: 100%;" class="button block green" type="submit" id="login"> המשך לאפליקצייה</button>
</form>
This code supposed to be only for mobile devices, and I want to know if there is away to allow only Hebrew letters in this code ? I tried few things that didn't work maybe because its on mobile I am not sure, anyone have Ideas ?
Strange thing happens then A person start the typing inside the input, then the mobile keyboard shows up the input stays in the same position instead of going above the keyboard, The keyboard literally is above the input and the person can not see what he is typing inside, anyway to change it ?
The last question is less impotent because it does work but I would like to get your advice for the way it works, the thing is like this:
There is log in using Facebook application to the website but the data given by Facebook is not enough for me and for this I wrote the code that I mentioned before because I need to have the full name of the person and in Facebook this name is not 100% correct because users usually add nicknames and stuff into their Facebook name. My code working like this, First person logs in with facebook account he is redirected back to main page, why the main page ? because there is a possibility that the user is not a new user and he entered his full name in his first log in, so in the main page the php script checking if this user have entered his full name and if not the script redirecting him to the input page there he is filling his full name. So what do you thing about the way it works ? Maybe there is a way to do is smarter ?
Thanks ahead :)
Use regular expressions in order to filter out any non Hebrew character.
<?php
function leaveOnlyHebrew($str)
{
$strippedStr = trim($str);
return trim(preg_replace('#[^א-ת ]#i', '', $strippedStr));
}
var_dump(leaveOnlyHebrew("azאב azטו"));//only hebrew and spaces
var_dump(leaveOnlyHebrew("azxc gfh"));//empty
?>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've got a site built from many divs. Nearly all div's have the same class (for CSS) and different id. Here's a part of the code:
<div class="box" id="testbox">
<img src=""><br>
Name<br><input name="choice" value="1" id="name" type="checkbox" onchange="onCheckboxChanged(); checkTotal();">
</div>
When I click anywhere in this div I want to check/uncheck it's checkbox (which is hidden so it can't be clicked) and this will toggle onCheckboxChanged() (unlocks more checkboxes) and checkTotal() (adds values from checked checkboxes). Because of that. clicked div's must first check if a checkbox is enabled and then check/uncheck it. Also I want it to change the background of only this div. I would prefer a solution that uses only html/css/js.
What you need is the label element. Use it instead of your div and it will basically do what you need. You can use the disabled property on the checkboxes to enable/disable them.
document.getElementById("testbox").onclick = function(e){
var nameCheck = document.getElementById("name");
nameCheck.checked = !nameCheck.checked;
nameCheck.onchange();
}
jsfiddle - you could do something like this, though I think using a hidden checkbox instead of an attribute on the div could be superfluous.
$('.box').click(function(){
if($(this).find('input[type=checkbox]').is(':checked'))
{
$(this).find('input[type=checkbox]').removeAttr('checked');
/// do other stuffs
}
else
{
$(this).find('input[type=checkbox]').attr('checked','checked');
/// do other stuffs
}
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
On my current project i am creating a search function that dynamically updates the content as users select different search criteria. As my title states i want to know whether a user has check or unchecked a particular item so that my JavaScript code can appropriately adjust the content.
Using jQuery i can easily tell if someone has hit the checkbox, but I don't know how to tell whether it is or isn't checked?
example:
<label class="checkbox"><input type="checkbox" id="checkbox1"> Any in Manhattan</label>
User clicks on it and i would like my jquery to do something like:
$( "#checkbox1" ).on( "click", function( event, ui ){
if("#checkbox1" === "clicked"){console.log("check it out!");}
});
You can use is:
$("#myCheckbox").is(":checked")
Which will return true if at least one item in the set is checked. In this case the set would be the (hopefully) singular element with the id myCheckbox.
Use the .checked property of the checkbox object rather than just detecting that it was clicked. As you have pointed out, just a click alone doesn't mean that it is checked because they might have clicked to uncheck it just as likely as they might have clicked to check it.
If you show us the related parts of your code we can tell you precisely how to do this in the context of your program. (For instance, you mentioned that you "can easily tell if someone has hit the checkbox." So if you put that part of your code into your question, we can show you how not only to tell if the checkbox is "hit" but also to tell if it is checked, using either the native .checked property or a jQuery selector.)
Using your code example, we can do this:
$( "#checkbox1" ).on( "change", function( event, ui ){
if(this.checked){console.log("check it out!");}
});
It is better to use change instead of click for various reasons.
Update: there is more discussion here: jQuery checkbox checked state changed event
Update 2:
Working JS Fiddle with the above code snippet: http://jsfiddle.net/cookies/NDjCT/