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 1 year ago.
Improve this question
I did create a Html form tag and Html button tag.
Now I want to create again form tag when the user clicks my button
I think this is possible with JavaScript
If anyone knows please help me
Thanks
Here is a sample code. This will add the form once.
let form = document.getElementsByClassName('sample-form')[0]
//make copy of the original form using cloneNode(true). true means JS will copy all the nodes inside of the form element. It's called "deep copy".
function duplicateForm(){
return form.cloneNode(true);
}
let addForm = document.getElementById('add-form')
addForm.addEventListener('click', function(){
document.body.append(duplicateForm())
})
<form class="sample-form">
<input placeholder="Your value here"/>
</form>
<button id="add-form">Add New Form</button>
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 2 years ago.
Improve this question
How would one be able to get a popup like the image below on hover of an element? I'm not sure what I should be adding in here apart from that I preferably don't want to use any other libraries apart from jquery. Please tell me if you need any code snippets or any more information!
Let's say you have said element above as a div on your page with an ID of 'cursor'. You can set the display value in your css to 'hidden', so it won't be displayed at first. When you hover over another element, you can trigger functions to display or hide said element:
<div id='hover-element' onmouseover='onMouseOver()' onmouseout='onMouseOut()'></div>
<div id=cursor'</div>
And then inside those functions:
function onMouseOver(element){
document.getElementById('cursor').style.display = 'block';
}
function onMouseOut(element) {
document.getElementById('cursor').style.display = 'none';
}
Try it :)
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 5 years ago.
Improve this question
Here I need to provide officename to find the address ,but one challenge which I am facing that if user does not type anything and hit search button then I want to acknowledge them to fill the req input.
I have implemented one function also that will get invocked when someone hits the search button.But I am unable to proceed for further execution.
You can do it something like this:
var searchText = document.getElementById('<ID_OF_INPUT_FIELD>').value;
if(!searchText) {
alert('Please enter something');
}
<input id =“officeInput” name=“officeiupit” size=“35”>
Point to critical input fields and save in global variables:
oOf=document.getElementById(‘officeInput’);
When a search button has been clicked, make a copy of the textbook content inside your function which you've made:
var sInputText=oOf.value;
In this case inside your function just put
if(!sInputText)
alert(“You must enter an input.“);
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 6 years ago.
Improve this question
I am working on a website where the nav is search form. Basically you can only search for letters. If you search for "A" I want that submit redirects you to a.html, if you search for "B" to redirect you to b.html, and so on. Is this possible? Can I do this with css and javascript?
If I'm understanding correctly I think you are just looking to get the input's value and then redirect to a url with that value.
$( "button" ).click(function(e) {
e.preventDefault();
var letter = $('input').val().toLowerCase()
window.location.href = "/" + letter;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input> </input>
<button> Search </button>
You can do it just with html form submit with GET or POST method
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 am trying to build a chatbox for my friends to use and before a friend can join the room I want them to click on a bottom which has a default value of JoinChat. AND when they click that I want to send request to the database using ajax to allow them enter the room and then change the value of the bottom to LeaveChat
Assuming they have entered the room and they wan to leave the room so when they click on the same bottom, send another request to database to disconnect them from the chat room.
<input type="button" value="JoinChat" onClick="" id="btn">
Here is quick solution:
var isConnected = false;
var NOTCONNECTEDTEXT = 'JoinChat'
var CONNECTEDTEXT = 'LeaveChat'
function btnClick(event){
isConnected = !isConnected
document.querySelector('#btn').value =
isConnected ? CONNECTEDTEXT : NOTCONNECTEDTEXT
}
<input type="button" value="JoinChat" onClick="btnClick()" id="btn">
Just implement what you need, but the code is bad, to improve the code, recommend you use library like React.
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.