I have a form in which users can talk on a chatroom. My problem is that I have a gallery in which users can select pictures.
My question is how could a user click a html link and for that html link to input text into the input so when the user clicks the link which says cat it inputs into the text field :cat.
This is the form I have so far:
<form method="POST" action="chat.php">
<input type="text" name="message"></input>
<input type="submit" />
</form>
This is the gallery:
<img src="cat.jpg"/>
So again, the question is how I could insert text into the text box once the user clicks the image of the cat?
Thank you for anyone who spends time on helping me solve this issue.
If you're using jQuery you could do something like this:
$('a.cat').click(function()
{
$('input[name="message"]').val(':cat');
});
In this case you would need to update the link with the following:
<a class="cat" href="#"><img src="cat.jpg"/></a>
You can create a js function and then call it with the anchor to change the value attribute of the input. Input type text should not have a closing tag either.
function changeChatInput(value) {
document.getElementById('chatInput').value = value;
}
<form method="POST" action="chat.php">
<input type="text" name="message" id="chatInput" />
<input type="submit" />
</form>
<a href="javascript: changeChatInput(':cat');">
<img src="cat.jpg" />
</a>
Here is a solution in JS (without jQuery):
http://jsbin.com/doqedodezo/3/edit?html,js,output
The image triggers a JS function and passes the text which is supposed to be added to the input field.
I added a id to the input to address it.
I'd use
$('a > img').click(function() {
var imgName = retrieveImgName($(this).attr('src'));
$('input[name="message"]').val(':' + imgName);
});
var retrieveImgName = function(imgPath) {
return imgPath.substring(0, imgPath.indexOf('.'));
};
Doing that you can extract the logic for retrieving the name based on the src attribute of the img.
So, if the logic changes for some reason, you can sobstitute it quite easily.
You can achieve your job by using this jQuery syntax.
<script type="text/javascript">
$('a > img').click(function(e){
e.preventDefault();
$('input[name="message"]').val(':cat');
});
</script>
Related
I want to make a form where when a user types into an input box, the input box changes the ending of the src of my image (which is an API image).
So the image code looks like this:
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" />
I need the input from the textbox to go after the data= and before the &size=100x100
I have tried a couple of ways of accomplishing this but haven't quite got it:
$(function() {
$('#linktextbox').onchange( function() {
window.location = document.getElementById('baseUrl').attr('href') + '/' + $('#linktextbox').val();
return false;
});
});
I have also tried:
var link = document.getElementById("baseUrl");
link.href = "http://api.qrserver.com/v1/create-qr-code/?data="+document.getElementById('linktextbox')+"&size=100x100"
Any help is appreciated!
You can do it like this.
Obviously you need an input and something to confirm the user action like the button I added.
edit: In order to not abuse the server that generates the image I have deliberately chosen not to use a keyUp event.
When you click the button the small piece of Javascript updates the src of the image tag.
I used IDs to identify the HTML elements, but there are a number of different ways to find a specific element.
function updateQR (){
document.getElementById('image').src = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(document.getElementById('textInput').value) + "&size=100x100";
}
<input id="textInput" type="text">
<br>
<button onclick="updateQR()">Update QR code</button>
<br>
<br>
<img id="image" src="" />
Here the code in plain JavaScript
function updateQr(ele){
document.getElementById("qr").src = "https://api.qrserver.com/v1/create-qr-code/?data="+encodeURIComponent(ele.value)+"&size=100x100/";
}
<input type="textbox" value="HelloWorld" onKeyUp="updateQr(this)"/><br/><br/>
<img id="qr" src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100/">
So I have this form:
<form method="post" action="index.php" id="searchform">
<input type="text" name="search" placeholder="Search...">
<input type="image" src="img/img1.png" alt="submit" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
</form>
When the user searches for something I want to change this div:
<div class = "mainText">
<h2>Today's Events: </h2>
</div>
To say this:
<div class = "mainText">
<h2>Results: </h2>
</div>
How can I do this?
EDIT: Is it possible to run this code from within a php if statement?
jquery .text() seems a better fit, so you can just change the text of the tag.
$(".mainText h2").text("Results:");
More on this here:
http://www.w3schools.com/jquery/html_text.asp
The action in your form is the destination of where your form ends up.
If you are looking to control the dom elements you need something like javascript or jquery to control the front end of your application.
You could use jquery to simply listen for when your user has clicked the button or submitted the form and parse the results (in this case, just switching html text). *Remove the the action destination otherwise the page will redirect to index.php
$('form').submit(function(){
$('.mainText').html('<h2>Results: </h2>');
return false;
});
Common usage is to put an ajax call in the submit function to retrieve some data from outside the page source. Hopefully that puts you on track :)
I am learner for HTML and jQuery. Trying to retrieve the text from jquery to html
JQuery: To return textbox value after clicking button.
$('#value').click(function() {
var value = $("#test").val();
return value;
});
HTML: Typing the text and clicking on button.
<input type="text" id= "test" title="details/>
<input type ="button" id="value" value ="Detail" />
<!-- any suggestions how to get the stored value from jquery to html --!>
Is there a way to return the text value from jquery to HTML code so that i can able to some operations after clicking on submit button.
Can you please provide any suggestions.
I'm not sure what it is your trying to do? If i'm understanding correctly basically; you've landed on a page (page1) on page 1 there an element with a value(hidden or not) that when a button is clicked it lands into an empty text box? For example,
<p>Is your name <span id="name">John</span>?</p>
<br/>
<button id="yes_get_name" value="submit">Yes</button>
<input type="text" id="insert_tname" name="name" value=""/>
<script type="text/javascript">
$( document ).ready(function() {
// Trigger function when Button Clicked
$( "#yes_get_name" ).click(function() {
// Assigne Name as a variable
var name;
// Assign Value of Name as text of span id="Name"
var name = $('#name').text()
// Insert names value into input
$("#insert_tname").val(name);
});
});
</script>
I hope this helps. Other than this i might be misunderstanding the question.
Here's a jsfiddler on the roof to test.
Yes you can use following to write back into textbox:
$("#test").val("something");
I need to enter-in a password (without typing on keyboard) by clicking on image(s) on my html page with onclick function or any other action. How can I do this? I tried the code below, which worked for plain text by didn't work for my password-type entry (as seen below). Can someone pls help me?
Here are my codes:
<form style=" margin-left:200px; font-weight:600">
<fieldset>
<legend>STEP II:</legend>
<input id="psx2" type="password">
<p id="psx3">all the way</p>
<p id="psx4">the ramp flies</p>
<script>
function myFunction()
{
x=document.getElementById("psx2"); // Find the element
x.innerHTML="12345"; // Change the content
x=document.getElementById("psx3"); // Find the element
x.innerHTML="Hello!"; // Change the content
x=document.getElementById("psx4"); // Find the element
x.innerHTML="Hey!"; // Change the content
}
</script>
<a href="#">
<img src="images/colourimages/red.jpg"
alt="red not"
onclick="myFunction()"
width="50"
height="50"
id="red" />
</a>
</fieldset>
</form>
This is the result:
you will notice that nothing showed on the password field. Please can someone help? I will appreciate it..
Form elements do not use .innerHTML to change the content you need to use .value
Use value for input elements like,
function myFunction()
{
x=document.getElementById("psx2"); // Input element
x.value="12345"; // Change the content
// innerHTMl is fine for p or div tags
.......
I have a web service I'm trying to hit, URL looks like this:
http://servername/webapp/ws/invoices/{invoiceid}
I'm trying to hit the URL with GET like so:
<form method="GET" action="/ws/invoices">
Invoice Id: <input type="text" name="invoiceid"/>
<br />
Action: <input type="text" name="action"/>
<br />
<input type="submit" name="Submit"/>
</form>
How do I dynamically append the invoice id to the URL on button click?
Example usage: The user enters the invoice id (ex. "555") and the action text (ex. "delete"), and what I want is to hit this URL ...
http://servername/webapp/ws/invoices/555
... with a form parameter action="delete".
Any help is greatly appreciated! Thanks,
Rob
You could write some Javascript to do this. Add an onsubmit attribute to the form tag. It's easiest if you add an id attribute to the invoice field, say id="invoiceid". Then write something like:
function buildUrl(form)
{
var invnum=document.getElementById("invoiceid").value;
form.action="/ws/invoice/"+invnum;
return true;
}
Disclaimer: Just wrote this code off the top of my head. If it doesn't work, let me know and I'll actually test something.