I have an image on the page.
When clicked on that, i am prompting for input and
writing that value entered on the page.
I've tried the following and some other things around it:
<form name="FORM_1" action="post">
...
<input type=text name=x >
...
<p>Click on the image to get enter the value</p>
<a href="", onClick="x=prompt('Enter a number')">
<img src='data:image/gif;base64,R0lGODhgjjhgAAgIAAgACAgICAgMDAwP8AAAD/AP//AAAA//8A/wD//////ywAAAAAIAAgAAAEkfDJSau9OOvNu//gBABJWYYXaa6JNY6ays6tBIjuq+/8fZe3XG8YhNlcCSKvxkP2gLuWMaOKrl7JKZXGPXFGXRPYuxl3seTYQ0bTpSuweBhN1dnCSRPVFlzj33AnfX5hZXyBXFprfXY5LD6MRR5Nh0aKeylTl5gpR4Mxm5WfoIsYoaaDLy4gPmuuoyFEKLO0tREAOw==' alt="Dance?" pagespeed_url_hash="2096625741">
</a>
</form>
How do I put the value of x to the form field x? What is the best way to do this?
Way too new to javascript.
TIA.
EDIT:
I am getting the entered value properly-- when i replace
x=prompt('Enter a number')
in the code with
alert(prompt('Enter a number'))
the value is there.
I'm stuck is how to put that value to the form field
Try this:
onClick="x=prompt('Enter a number'); document.getElementsByName('x')[0].value=x;"
Related
I have a form as shown below in which I placing an alt text which will display on the webpage.
<form action="/action_page.php">
Alt <input type="text" name="e1_alt" required>
<input type="submit">
</form>
The form here will not save because I have used the required field in it. What I want to achieve is that a warning sign should be displayed if it is empty but it should not stop the user from saving it.
Problem Statement: I am wondering what changes I should make in the HTML code above or JavaScript code I need to add so that a warning sign should be displayed if it is empty
but it should not stop the user from saving it.
You can't really do it purely in HTML. Javascript would need to handle the validation. HTML5 forms will not submit if you have a required field empty, since that's how the browsers handle them. You could add novalidate to the form as an attribute, but you'd still need to have some javascript to handle showing the 'warning sign
Here is a working fiddle to show you how you might go about using JS to show the warning:
$('[name="e1_alt"]').blur(function(e) {
var value = $(e.currentTarget).val();
if (value.length === 0) {
$('.error').show();
}
});
So I have an HTML web page that has a button and a textbox, so when the user inputs for example "Bread" and hits the button, it will bring them to Bread.html. If they type "Car" and hit the button, it brings them to Car.html. I am really confused on how to do it, so if anybody could help it would be greatly appreciated.
Here's the HTML:
<input id="Login" type="text" value="" /></center>
<center><button onclick="myFunction()">Login</button></center>
<center>
<script>
function myFunction() {
window.location.href = document.getElementById("Login")".html";
}
</script>
You’re close. It’s
document.getElementById("Login").value + ".html"
Your current code isn’t syntactically correct. You need at least an operator before the string literal. And document.getElementById("Login") is an HTMLInputElement. You need its value which is a string.
I have this textfield in my html file.
<input type='date' value='startdate' name='sdate' id='startDate' >
What am I trying to do, is to pass the value of the above textfield into a php link like this
<a href='admin-confirm.php?startdate=??????'>
<input type='button' value='confirm' name='confirm' >
</a>
What should i put on the href to pass the value of textfield 'startdate' to a php file? help me pls. thanks in advance :)
PS: I have tried using a form, but I'm having a trouble when there are 2 set of data displayed.
For example:
name: example1 [CONFIRM BUTTON]
name: example2 [CONFIRM BUTTON]
my problem is when i click the confirm button on number 1, the values in number 2 were sent.
There are many issues with your tiny bit of code. NEVER wrap a submit button in a link. What is the usecase? That admin-confirm is called when the button is clicked?
The form would work without any extra code:
<form action="admin-confirm.php">
<input type='date' value='' name='startdate' id='startDate' >
<input type='submit' value='DENY' name='deny' >
</form>
Alternative is to ajax the date when the link is clicked but you need to tell us more
You should do some validations to check whether the value entered is in correct format and then do the below:
if ( ! empty($_POST['startDate'])){
$date = $_POST['startDate'];
}
Hope this helps.
I'm trying to validate what a user enters into a texbox on the client-side, using javascript. I have also added a span close to my input tag like so,
<div>
<label for="fname">First Name*</label>
<input id="fname" name="fname" maxlength="30" type="text" /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your firstname</span>
</div>
Here's the javascript code snippet validating the input,
if(document.getElementById('fname').value.length==0){
msg='Please enter your first name';
document.getElementById('fnameerror').style.display='inline';
document.getElementById('fnameerror').style.color='red';
valid=false;
}
What I want to achieve now is,
1) The textbox with the error should gain focus.
2) After the error message is displayed and the user enters a valid data, the error message should disappear.
How do I achieve this. I'm fairly new to javascript. Thanks.
Change your JS code:
document.getElementById('fname').onkeyup = function() {
if(document.getElementById('fname').value.length==0){
msg='Please enter your first name';
document.getElementById('fnameerror').style.display='inline';
document.getElementById('fnameerror').style.color='red';
valid=false;
document.getElementById('fname').focus();
} else {
valid=true;
document.getElementById('fnameerror').style.display='none';
}
}
Fiddle.
If you've read about HTML5, it allows you to add form validation as attribute fields directly instead of having to write code for it. It also presents things neatly. Have a look. This might help:
http://diveintohtml5.info/forms.html
I will suggest to use Jquery validator. Of course you need to include jquery,and jquery plugin, but you do not need time to write validation from the scratch only to implement what exist.
I mask the input of fields like SSN to contain dashes when they are displayed but would like the value that is submitted to be only the numbers.
For example, my SSN is formated as:
<input type="text" name="ssn" alt="999-999-9999"/>
And upon entering "1234567890" I get the nice formatted output.
123-456-7890
Now I would like only the numbers to be submitted as "1234567890". Is this easily possible?
For reference: http://www.meiocodigo.com/projects/meiomask/
This would probably solve your problem. It's quick-n-dirty though. It just removes the '-' signs with a regex and spits it out into a hidden field which will then be submitted.
<input type="text" id="ssnMasked" />
<input type="hidden" id="ssn" name="ssn" />
<input type="button" value="Submit" onclick="RemoveMaskAndSubmit()"/>
<script type="text/javascript">
function RemoveMaskAndSubmit() {
$('#ssn').val($('#ssnMasked').val().replace(/\-/g,''));
$('#formId').submit();
}
</script>
I'm not sure on the etiquette on answering my own question but I actually used a fairly simple solution derived from both of your answers.
Problems arose from using hidden fields based on the site using the Struts framework and it's automatic form processing and special JSP form tags. I would change the backend to do all the processing there but as it's the middle of the day I can't restart the Tomcat server to load in the changes without crippling operations for a short time.
On submit I call a function UnmaskMaskedValue() which explicitly sets all the masked values to have a mask not containing the invalid characters.
function UnmaskMaskedValue() {
$('#ssn').setMask('9999999999');
}
This changes the value before any data is submitted to be valid on the backend.
I appreciate both of your suggestions and would rate you up if only I was able to.
Looks like this option is deprecated.
<a onclick="jQuery('#unmasked_string').html( jQuery('#unmasked_input').unmaskedVal() );return false;" href="#">Get the unmasked value from the input</a>