I use a textfield with code:
<input type = "text" size = "2" maxlength = "2" name = "myname">
and a button with:
<button type = "button" onclick = "alert('Clicked!')">Print</button>
Now, as I click on it, a message/alert pops saying Clicked!. How can I make it just display whatever value was on the textfield instead? Ty
Try this solution:
<input type="text" id="test" size="2" maxlength="2" name="myname">
<button type="button" onclick="alert(document.getElementById('test').value);">Print</button>
A working example you can find here: http://jsfiddle.net/sebastianbrosch/x8zzvd5s/
Explanation
You have to add a id to your textfield (here test). On the alert() you can get the value of the textfield with document.getElementById('test').value.
if you are doing this to print a person's name or something using PHP then it should be like this:
add this in your body of html:
<form name="form1" action="registration.php" method="POST" onsubmit="myFunction()" >
<input type="text" name="name" id="name">
<input type="submit" value="submit">
</form>
you can validate this field using javascript on submit as:(write this in head tag of html)
<script>
var name=document.getElementById("name").value;
myFunction()
{
if(name!="")
{
return true;
}
else
{
//show alert.
return false;
}
}
</script>
In PHP you can print the name user entered in the text by(reg.php):
<?php
$name=$_POST['name'];//it is the name of the control field
echo $name;
?>
Related
i am making a database programm where the user has to submit some of his contact information.
<form action="add_action.php" method="POST">
<div class="modal-body">
Name: <br>
<input type="text" name="name" placeholder="Name" required><br>
Telefon Nr. <br>
<input type="text" name="telNr" placeholder="Telefon Nr."><br>
Handy Nr. <br>
<input type="text" name="handyNr" placeholder="Handy Nr."><br>
Skype ID <br>
<input type="text" name="skypeId" placeholder="Skype ID"><br>
<div class="modal-footer">
<input type="submit" class="btn btn-default" value="Hinzufügen">
</div>
</form>
i have been researching a while now, but i cant seem to figure out how i can set the form so at least 1 out of "Telefon Nr.", "Handy Nr." and "Skype ID" is required. if you have any sugestions of what i should do i would apreciate your input.
Consider reading this. I'll be showing, only, how to check for the presence of the field named name alongside at least one field from the others.
Sever side verification:
Ps: you didn't give the submit button a name, i'll give it a name="submit", for example, to make checking for form submission possible within php.
if{isset($_POST["submit"])
// don't rely on HTML required attribute, a user with a bit of knowledge can remove/bypass it, I mean check for the presence of the name either
$name = trim($_POST["name"]);
$telNr = trim($_POST["telNr"]);
$handyNr = trim($_POST["handyNr"]);
$skypeId = trim($_POST["skypeId"]);
if(isset($name[0]) && (isset($telNr[0]) || isset($handyNr[0]) || isset($skypeId[0]))) {
echo "At least one field is present alongside with the name";
} else {
echo "The name and/or the other fields are empty";
}
}
Client side verification:
Ps: let me give an ID to the form tag, let's say id="my-form".
var myForm = document.getElementById("my-form");
myForm.addEventListener("submit", function(event){
// get all the fields values, and trim them on the fly
var name = document.getElementsByName("name")[0].value().trim(),
telNr = document.getElementsByName("telNr")[0].value().trim(),
handyNr = document.getElementsByName("handyNr")[0].value().trim(),
skypeId = document.getElementsByName("skypeId")[0].value().trim();
// we want the name and at least one other field to be filled
if(name !== "" && (telNr !== "" || handyNr !== "" || skypeId !== "" )) {
alert("we're good to go, the name is provided alongside with at least another field");
} else {
event.preventDefault(); // we cancel form submission as the name and/or the other fields are empty using the Event argument
alert("Cancelled, please fill in the name and at least one other field");
}
});
Hope I pushed you further to more understand how things work
Ps: that's a really basic example, don't rely on this in production phase as the code I provided may be vulnerable to some attacks(such as XSS aka Cross-Site-Scripting, SQL injection...).
You'd need to use some javascript to do this. The only thing you can do with HTML is add the "required" attribute as you've done with the name already.
This is the way i created it in a form i made a while back. I have edited it for you so place it in and should work off the bat.
<script>
function validateForm() {
var a,b,c,d = document.forms["form"]["name","telNr","handyNr","skypeId"].value;
if (a,b,c,d==null || a,b,c,d=="")
{
alert("Please complete all Required Fields *");
return false;
}
}
</script>
<body>
<form name="form" action="add_action.php" onsubmit="return validateForm()" method="POST">
<div class="modal-body">
Name: <br>
<input type="text" name="name" placeholder="Name"><br>
Telefon Nr. <br>
<input type="text" name="telNr" placeholder="Telefon Nr."><br>
Handy Nr. <br>
<input type="text" name="handyNr" placeholder="Handy Nr."><br>
Skype ID <br>
<input type="text" name="skypeId" placeholder="Skype ID"><br>
<div class="modal-footer">
<button type="submit" class="btn btn-default" value="Hinzufügen" >Sign In</button>
</div>
</form>
<input class="form-control" type="text" name="txtSpouseOccupation" id="txtSpouseOccupation" required>
<button type="button" id="next_personal" class="form-control btn-success" style="width:10%" onclick="openTab(event,'dependentTab')">Next</button>
when I click the next button it just goes to the next tab and ignores the required even the inputs are not yet filled up
You can accomplish your need by using this simple attribute required. So below I'll add example;
<html>
<head>
</head>
<body>
<form action="next.php">
<input type="text" required="true">
<input type="submit">
</form>
</body>
</html>
So when you click button to navigate to next page or tab it will show simple message near relevant text box to fill that field.
Though you used tabs you can use this.
In this case, your both elements are independent to each other. You have text/input whose functionality is to take inputs and then there is a submit button whose functionality to do something on click.
Now required will only work if you define a relation between submit button and input/text. <form> elements does that for you as it wraps both elements in it and than the submit button default action is to submit the form, and then before submitting it will check if the input values are assigned as per required=true.
But you trigger a function on the click of it. If you simply want to go to some url by submitting form
Try Form
<form action="your url" method="GET or POST">
<input type= "text" required ="true"/>
<button type = "submit" >next</button>
</form>
OR you can use javascript for it.
function newTab(){
let input = document.getElementById('text-input').value;
if(input === ""){
alert('please fill text')
return;
}
window.location.href = 'http://google.com';
}
<input type= "text" required ="true" id = "text-input"/>
<button type = "submit" onClick = "newTab()" >next</button>
i'm not a very good programmer at all but i need a little help with a webpage i'm making.
Here's what I have for a form:
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
What I want it to do is if I put in the name Fred and press submit Button, it will go to a certain page. Any other name will link to another page or popup with an error saying, "tough luck!" or something like that.
Sorry, I couldn't find anything this specific on the web anywhere. I'm sure it's simple, I'm just confused with how this works. Thank you!
using front-end only, i'd be using javascript or jquery. meaning you don't need a form element inside it.
<script>
$("#submitButton").click(function(){
window.location.replace("enter url here")
})
</script>
you can do it with JS/jQuery:
HTML
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name" id="name">
<input type="submit" id="submit-button" value="Submit">
</form>
JS
$("#submit-button").click(function(){
if ($("#name").val() == "Fred")
location.href = "goodurl";
else
location.href = "badurl";
});
There are 2 options to solve this problem.
To use JavaScript for input value's validation and depending on it to redirect user
To use server side language to check the passed value
The first option will be easier for you I guess.
You can do something like:
Name: <input type="text" name="name">
<input type="button" value="Submit" onClick="redirect();">
<script type="text/javascript">
function redirect() {
var value = document.getElementsByName('name')[0].value;
if (value == 'Fred') {
window.location.href='http://url1';
} else {
window.location.href='http://url2';
}
}
</script>
Links: 'url1' and 'url2' must be replaced with your URLs
Just add the following code in your HTML file and try it out:
<script type="text/javascript">
function handleSubmit() {
var name = document.input.name.value;
if(name == 'Fred') {
location.href = "http://www.google.com";
} else if (name == 'Jack') {
location.href = "http://www.yahoo.com";
} else {
alert("Tough Luck");
}
}
</script>
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="button" value="Submit" onclick="handleSubmit();">
</form>
Here is the html code for the form:
<form>
Input Twitter ID: <input type="text" name="userid" id="userid">
<button type="button" onClick="getStatuses();">Get recent tweets</button>
</form>
Currently the button activates getStatuses(). I want it so that when the user presses enter/return after inputting text, it also activates the button.
The input is used in getStatuses() and is referenced by the id of the input.
You can use the onkeyup attribute and call a function:
JS:
function checkKey(e){
var enterKey = 13;
if (e.which == enterKey){
getStatuses();
}
}
HTML:
<input type="text" name="userid" id="userid" onkeyup="checkKey(event)">
parent.html
<HTML>
<form name="form" method="post" action="child2.html">
<input type="text" value="" name="text2" id="pdetails2">
<input type=submit name="submit" value="submit"></form>
</html>
child2.html
<HTML>
<form name="form1">
<input type="text" value="" name="text3" id="pdetails3">
</form><html>
here if i give any value in parent form text box once i click on submit button i need that text box valu in child2 form textbox what can i do?
For your specific solution: you can try it using javascript.
1.) Change the parent.html 's form's method to get instead of post i.e
<form name="form" method="get" action="child2.html">
2.) In child2.html add the following javascript function:
<script type="text/javascript">
function $_GET(q,s) {
s = s ? s : window.location.search;
var re = new RegExp('&'+q+'(?:=([^&]*))?(?=&|$)','i');
return (s=s.replace(/^?/,'&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined;
}
</script>
3.) use $_GET('var1'); to get the value: e.g in ur textbox:
<input type="text" value="" name="text3" id="pdetails3">
<script>document.getElementById('pdetails3').value = $_GET('pdetails2');</script>