I want a input which has a button besides it, and whenever I click on the button it takes me to a location(to be precise : "https://localhost:5000/message/to={{inputbyuser}}") where {{inputbyuser}} is the input which the user has entered. Also as I will be hosting it later I want not the localhost to come but the webpage to get it's own domain. Is there a way?
My HTML snippet:
<input type="text" placeholder="Enter the username to chat : " class="input-required"/><button type="submit" class="btn btn-lg"><i class="fas fa-paper-plane"></i></button>
And yes the send button is a icon.
Yes!
First, give the button an ID of submit_btn and the input field an ID of input_field, then, add some JavaScript on the end of your page:
document.getElementById("submit_btn").addEventListener("click", () => {
const input_value = document.getElementById("input_field").value;
window.location.href = `https://localhost:5000/message/to=${input_value}`;
});
I hope this helped!
Related
I have a node application, where on the frontend, I have multiple buttons that activate the same post route as specified by the formaction attribute below:
<button type="submit" formaction="/specifiedroute">-</button>
However, I want to be able to tell which button was clicked within the post route. Is there anyway I would be able to access the name or id attributes of the button within the post route (perhaps within the request object)? If not, would the only way to identify the buttons be to add a parameter to the formaction as below:
<button type="submit" formaction="/specifiedroute?redbutton">-</button>
Note all these buttons exist in one form (I can't change this) and I can't just use a hidden input field.
May be you should try this
<button type="submit" formaction="/specifiedroute?button=red">Red</button>
<button type="submit" formaction="/specifiedroute?button=green">Green</button>
<button type="submit" formaction="/specifiedroute?button=blue">Blue</button>
// NodeJS
Controller
app.post('/specifiedroute', (req, res) => {
let buttons = {
"red": "Red Button Clicked",
"green": "Green Button Clicked",
"blue": "Blue Button Clicked"
}
let reqButton = req.query.button;
res.send(buttons[reqButton])
})
The name and value of the submit button used to submit a form will be included in the submitted form data.
<button formaction="/specifiedroute" name="foo" value="minus">-</button>
and on the server
if (req.body.foo === 'minus')
As title
What I want to do is to add a button. After pressing the button, a duplicate form will be added to enter data. Need to add a few pieces of information, just press the button several times!
How can I achieve this?
You need to use javascript for this.
let button = document.getElementById('add')
let form = document.querySelector('.form')
let forms = document.getElementById('forms')
button.addEventListener("click", function() {
clone = form.cloneNode(true)
forms.appendChild(clone)
});
<div id='forms'>
<form class='form'>
<input placeholder='Name'>
</form>
</div>
<button id='add'>Add more!</button>
But you can use formsets to repeat the same form multiple times on the same page without the button:
https://docs.djangoproject.com/en/3.0/topics/forms/formsets/
I'm not really sure how to explain what I'm trying to do, but if you understand, that's great.
Alright, so basically I'm trying to make an input box or whatever with a button beside it saying "Answer", and whatever you write in the input box and press the Answer button, it will open a new tab and add that to the URL, (Example: "http://yourwebsite.com/Whatever-You-Wrote-In-The-Box").
If you need me to try to explain further, go ahead and ask, I can't figure out how to do this at all.
Thanks,
<input id="answer" />
<button type="button" onclick="window.open('http://yourwebsite.com/' + document.getElementById('answer').value);">Answer</button>
Another option is to use a form:
<form action = "http://www.yourwebsite.com" method = "get">
<input type = "text" name = "fieldname"/>
<button type = "submit">
submit
</button>
</form>
You can't do this with HTML only. You must use something for the interaction like javacript.
So u could do this.
<input id="input"/>
<button id="button">button</button>
<script>
$('#button').click(function(){
var urlPart = $('#input').val();
var url = 'https://google.com/' + urlPart;
window.location.replace(url);
});
</script>
Check for an example
https://jsfiddle.net/joepenzo/g873knd6/10/
I would like to click a button and have it go to a link that concatenates mypage.html with the value entered in the search box, but it doesn't seem to recognize it as a variable. What can I do to get the value of the text box?
<html>
<form role="search" action="mypage.html/'#searchterm'">
<input type="text" placeholder="Search" id="searchterm">
<button type="submit">Search</button>
</form>
</html>
Change the form element to this:
<form role="search" id="myForm" action="mypage.html">
The javascript (this is jQuery) would be something like this:
$( "#myForm" ).submit(function( event ) {
// Get the search term
var searchTerm = $('#searchterm').val();
// Append the search term to the root URL
var url = "mypage.html/" + searchTerm;
// Redirect the page to the new URL
window.location.href = url;
// Prevents the default behavior of the form
event.preventDefault();
});
It depends on how you would like to achieve this, you can send it directly using PHP, or you can send it using javascript and AJAX to a PHP page. As you can see in this small tutorial you can send the value of the entered input. AJAX will avoid the page from being refreshed while you search the data, so it will look better. It all depends on what you would like to achieve.
Please take into account that the value of the input cannot be sent on the ¨action¨ property of the form.
Thanks to everyone who submitted answers, I actually figured this one out.
<html>
<input type="text" id="myInput">
<button onclick="go()">Click me</button>
<script>
function go(value)
{
window.open("mypage.html/" + document.getElementById('myInput').value)
}
</script>
</html>
I have a form with few inputs and all those inputs are required..I am using bootstrap..
Sample
<input type="email" require="yes">
It works fine it ask for a proper email if it is empty a little warming appears saying wrong email format or this field is required.
All this check happens when the user clicks on submit button... what on the submit button I also want to
add a confirm box like "Are sure ? "...
I added the confirm action using bootbox and it works fine but my problem is that:
When the users click the inputs are checked the warning appears for a second and the confirm box too ... so my problem is that I dont want the confirm box appears unless all the inputs pass the checks ..
Thanks I hope I was clear...
<script src="js/bootbox.min.js"></script>
<script>
// Confirm Box ..
$(document).on("click", ".confirm", function(e) {
bootbox.confirm("Are you sure?", function(result) {
console.log("Confirm result: "+result);
});
});
</script>
<input type="email" placeholder="email" class="contact-input" required="yes">
<button id="contact-input" name="request_meet" class="btn btn-primary confirm">Send</button>
If you add a submit event to your button in javascript you can catch the submit before opening the confirm:
$('form').submit(function(e) {
if (!$('#emailField').val()) {
e.preventDefault();
return false;
}
});