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.
Related
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 1 year ago.
Improve this question
How can I make search bar searches only my website pages and give suggetions
Check the below link, you may get a chance to go next step
https://support.google.com/programmable-search/answer/4513903?hl=en#zippy=%2Chow-do-i-change-the-language-of-the-search-engine
From the google control panel, select the search engine you want to edit.
Click Setup from the menu on the left and then click the Basics tab.
Click Get code.
Copy the code and paste it into your site’s HTML source code where you want your search engine to appear. If you've chosen the two column or two page layout option, you'll need to copy and paste two snippets of code:
Paste the first code snippet where you want the search box to appear.
Paste the second code snippet where you want the search results to appear.
Here's the sample HTML and js form code for search bar:
<script type="text/javascript">
document.getElementById('searchform').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yourdomainname ' + document.getElementById('test').value;
return false;
}
</script>
<form id="sarchform" class="search2" method="get" action="source.html" />
<input class="search2" id="test" type="text" name="search" size="10" maxlength="255"/>
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 1 year ago.
Improve this question
How to restrict to change input type password to text in Inspection in java Script or jquery. If someone tries to open the input type password element in the developer menu and tries to change the type from password to text, this makes the password appears in text box.
if we can detect any attribute change that may do the work, but I am not sure if that would work if we make changes from the developer menu.
This is an interesting problem, In javascript we dont have any straight approach with which we can detect the type or attribute change in javascript. I had same kind of problem and then after some studies, I found that this could be done with Mutation observer.
In this code I have created an extension method for HTMLElement and all we have to do is get the reference of that HTMLElement and call this extension function and pass the callback, which we want to be run on attribute change.
HTMLElement.prototype.onAttributeChange = function (c) {
let observer = new MutationObserver(c);
observer.observe(this,{attributes:true});
};
var elem=document.getElementById("txtpassword");
elem.onAttributeChange(function(){
alert("attribute changed");
});
<html>
<title>
</title>
<head>
</head>
<body>
<input type="password" name="password" id="txtpassword" >
</body>
</html>
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 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
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
?>