I want to display the input from a input-box text, right beside the input-box if it got data.
I want to use it in our checkout for the customer name.
That when the customer has entered their name, it echo beside it "Hi (customer-name)"
The input-box is on the same page. So the echo needs to be displayed right beside the input-box.
The data needs to be displayed when the customer is not focussing anymore on this input-box. So when it clicks on an other input-box or beside it, it needs to be displayed.
How can I fix that?
If you are OK with pure inline javascript, you can attain this using onblur event:
<input type="text" value="" onblur="if(this.value !=''){document.getElementById('hi').innerHTML='Hi, '+this.value;}else{document.getElementById('hi').innerHTML='';}" />
<span id='hi'></span>
Empty span, or whatever other html place holder will fill with "Hi, (username)" if the input loses focus and is not empty.
You are looking for Javascript, rather than php.
To make it very simple:
function sayHi(){
var name = document.getElementById("box1").value;
document.getElementById("username").innerHTML = name;
}
<input type="text" id="box1" onblur="sayHi();"><span id="username"></span>
Related
I dont know if this is even possible without javascript but i want an form input and when i send the form it should add some text on the value.
<form method="post" action="https://somesite.com">
<input name="snapname" style="width: 177px; margin-top: 340px;" type="text" placeholder="Your username">
<input type="Submit" name="send">
</form>
So right now the form sends the value that is typed from the user in the browser.
Is there an way for me to add text when i send the form that the user cant see? Do i need to do it in javascript? Or is it possible in HTML? HTML5?
For example lets say the user writes adam
The value of snapname is now adam
When they click submit it will submit it as adam
But what i want is to add text to the value.
So i want mytext+adam to be the value of snapname where mytext is a static value.
I do not want to use javascript if i dont need to. Is it a good idea to use some kind of redirect php script? And let the script add the text and then send the users to the correct webadress with right value?
Use javascript or simply:
$my_var = "My Text" . $_POST['snapname'];
And then use this variable in php.
If you are submitting to an external site your best bet will be to use javascript. You can remove the name from the visible input (so its data is not submitted), add a hidden field with the correct name, then populate the hidden fields value with javascript:
<form method="post" action="https://somesite.com">
<input onkeyup="appendvalue(this.value);" type="text" placeholder="Your username">
<input name="snapname" type="hidden" id="snapname">
<input type="Submit" name="send">
</form>
<script>
function appendvalue(userval){
var append = "somestring";
var hidden = document.getElementById("snapname");
hidden.value = userval+append;
}
</script>
PHP is going to be your best bet here, as Faiz said above create a simple variable and extend the $_POST['snapname'] to include what you need.
How do you output text of a selected radio button?
For example:
<form method="POST" action="form.php">
<input type="radio" name="color" value="red">My favourite color is red.
<input type="radio" name="color" value="blue">My favourite color is blue.
</form>
<span id="feedback"></span>
So, if I click the button with a value of red. How can I output the text "My favourite color is red." and have the text inside the span?
I only know how to echo the value, not the text.
Would appreciate an example!
Edited.
Once you submit a form, you will only get what the page is being sent through the form. There is no way of getting the exact text next to a radio button that isn't sent along with the form, but you can simply take the value and construct the text again.
If you are sending the form by POST, you could do the following:
if (isset($_POST['color'])) {
echo 'My favorite color is '.htmlentities($_POST['color']);
}
Note the use of htmlentities() – never trust user input. This function replaces characters like < to their corresponding HTML entity, e.g. <. This way, a malicious user can't send some HTML tags as value and break your page.
If you want to send by GET, replace $_POST['color'] with $_GET['color'].
You will need to send the text value with some help of JS to PHP. Should you look at the request details you will see only name and value are sent to PHP.
I have a jQuery colorpicker that the visitor can change and I am trying to figure out, how can I pass whatever value they enter / pick so that I can use it as a url query?
With what I have right now, you can click the color wheel to get a hex code in the input (such as #ffffff) or you can just type it into the input, but what I need to do is then take this value and make a link that links to the website's url plus ?color=#ffffff. I can just make a link next to the color picker to do this but I don't know how I can have it link to whatever the visitor chose in the color input.
Here is the live site: http://www.brainbuzzmedia.com/themes/vertex/
Here is the html for the input:
<input type="text" name="color-demo" id="color-demo" value="#ff0000" class="colorfield regular-text" data-hex="true" />
This can show you your value
alert(document.getElementById('color-demo').value);
So just add it to your link:
LINK
like this:
document.getElementById('mylink').href += document.getElementById('color-demo').value;
the JS code above should be invoked when onChange for color-demo fires. For example, change:
<input id="color-demo" class="colorfield regular-text" type="text" data-hex="true" value="#ff0000" name="color-demo">
to
<input id="color-demo" class="colorfield regular-text" type="text" data-hex="true" value="#ff0000" name="color-demo" onChange="myfun()">
and create myfun():
function myfun()
{
document.getElementById('mylink').href += document.getElementById('color-demo').value;
}
I have a form field for estimating shipping costs. Currently the field has a label "ZIP/Postal code" and the form field itself is empty by default. I want to do the following:
Put the label "inside" the form field so that it says "Enter your zipcode..." (probably by value="
Once the users puts the cursor into the form field, the default text is deleted.
Once the users entered his zip code and clicked the submit button, his zip code (=the value he entered) is echoed in the form field, thus replacing the default text
Here's the code I am working with:
<label for="postcode" <?php echo $this->__('Zip/Postal Code') ?></label>
<input class="input-text validate-postcode<?php if ($this->isZipCodeRequired()):?>
required-entry<?php endif;?>" type="text" id="postcode" name="estimate_postcode"
value="<?php echo $this->htmlEscape($this->getEstimatePostcode()) ?>" />
How can I achieve this?
You can make the text disappear on the client-side using the HTML5 placeholder attribute. To make it cross-browser, use the jQuery Placeholder plugin (or one similar).
Depending on how you submit the form, you will have *estimate_postcode* available as a GET or POST variable.
$_GET['estimate_postcode']
$_POST['estimate_postcode']
Echo that as the value attribute. This won't be persistent across pages though.
If you are doing this strictly for the user's visual benefit, ditch the PHP and do it all on the client-side via cookies.
<script>
function clearField()
{
$(#postal_code).val('');
}
</script>
<form>
<input id = "postal_code" type = "text" name = "postal_code" value = "Input postal code here" onclick="clearField()"/>
</form>
something like this should work. clearField will just empty the field when the user clicks on it, and the in putted data would then be send by the form.
I am playing with the Ajax Live Search functionality from the W3Schools website. It is working fine except I would like the results div, #livesearch, to hide again when the user clicks away from it. I have found an example piece of code which does this but I cannot comdine the two successfully. If I add the code the search results can be hidden when the user clicks away but the user has to click first to see them, which obviously wont work.
http://www.w3schools.com/php/php_ajax_livesearch.asp
http://bytes.com/topic/javascript/answers/676788-hide-div-tag-if-outside-div-clicked
Can anyone point me in the right direction?
Thanks
Chris
Checkout the javascript 'onblur' event.
You could create a new function which cleared the div:
blurFunction() {
document.getElementById("livesearch").innerHTML = ''
}
The onblur event:
<input type="text" size="30" onkeyup="showResult(this.value)" onblur="blurFunction()" />
EDIT: Actually I just noticed the showResult function already caters for clearing the div, so just insert:
<input type="text" size="30" onkeyup="showResult(this.value)" onblur="showResult('')" />
If I'm reading this right, you want the dropdown to disappear when the input loses focus and reappear when the mouse is moved over it, not just clicked?
I was able to achieve this by using an onblur event to hide the box (your example that you found works equally well, I believe). onblur="hide(this)" to hide the dropdown div. Hide js function is the same: function hide(id)
{
document.getElementById("livesearch").style.display = "none";
}
To make it reappear on mouseover, I added an onmousemove event to the input: <input type="text" size="30" onkeyup="showResult(this.value)" onblur="hide(this)" onmousemove="showResult(this.value)" />
.
Most importantly I added this line document.getElementById("livesearch").style.display = "block"; in the xmlhttp.onreadystatechange=function() to make the div reappear.