I was trying to make multiple options for a sign-in form. I want my form to have two options, either sign in by username or sign in by email. I want to use radio buttons for the user to select which method they choose to sign in. I was wondering if there is a way with html/css/php to do this or if I must learn to use something else? I am not seeing any examples of this.
Here are some visuals with examples of what I am wanting:
By default I want it to look like this:
When Radio buttons are selected, I want it to look like this:
My current code just looks something like this (this is my code with both text boxes)
<form method='post'>
<input type="radio" name="reason" value="email">Login with Email<br> <input type="text" name="email_text"/><br>
<input type="radio" name="reason" value="user">Login with Username<br> <input type="text" name="user_text"/><br>
<button type="submit" class="btn btn-primary">Login</button>
</form>
You can pretty much do this just with some simple CSS that makes use of a sibling selector and the :checked attribute combined. You can't select a previous element but you can select the following element using +
input[type='text'],
input[type='password']{display:none}
:checked + input{display:block;}
<form method='post'>
<input type="radio" name="reason" value="email">Login with Email
<input type="text" name="email_text"/>
<br />
<input type="radio" name="reason" value="user">Login with Username
<input type="text" name="user_text"/>
<br />
<button type="submit" class="btn btn-primary">Login</button>
</form>
Related
Clarification:
I have a form let say like this:
<form method="post" action="https://www.example.at/example/" id="comparison">
<input type="radio" id="region" name="region" value="austria">
<input type="radio" id="region" name="region" value="germany">
<input type="radio" id="tarif" name="tarif" value="Basis">
<input type="radio" id="tarif" name="tarif" value="Comfort">
<input type="submit" name="submit" value="compare">
</form>
User can submit - working finely.
On a second page (https://www.example.at/example/) I want to pick up the variable region. But I would like the user to again be able to switch between Basis and Comfort. So value region does not to be entered again.
<form method="post" id="comparison2">
<input type="hidden" name="region" id="region" value="<?php echo_POST['region']; ?>" />
<input type="radio" id="tarif" name="tarif" value="Basis">
<input type="radio" id="tarif" name="tarif" value="Comfort">
<input type="submit" name="submit" value="compare">
</form>
So if I echo the php with region it gives me the correct value outside of the form. Altough after submitting the second form it triggers a php shortcode(again) with the submit again where it displays a € value from our database.
But even though it worked properly with the input entered by the user(first step) it doesn't use or differently use the hidden input.
If it helps: I'm currently testing here: https://www.krankenversichern.at/testing-environment/
So the solution was: I took all of my html code and put it in a shortcode. I used the php echo as suggested and used the text element widget in elementor. That's it. Took probably 2 minutes!
I'm new to php and html and therefore need to get the basics of both php and html.
I'm making a mini calculator and so far I have only made the layout. I need help in knowing that how do you get the value from a button pressed(from HTML form) in your php code section (on the same page), process it in php and then return it back to be shown on the text box of the HTML form.
<?php
/**
**need help here
*/
?>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<form name="calculator" method="post" action="index.html">
<input type="text" name="disp" value="" /> <br> <br>
<input type="button" name="one" value="1">
<input type="button" name="two" value="2">
<input type="button" name="three" value="3">
<input type="button" name="bksp" value="DEL"> <br>
<input type="button" name="four" value="4">
<input type="button" name="five" value="5">
<input type="button" name="six" value="6">
<input type="button" name="reset" value="AC"> <br>
<input type="button" name="seven" value="7">
<input type="button" name="eight" value="8">
<input type="button" name="nine" value="9">
<input type="button" name="equal" value="="> <br>
<input type="button" name="zero" value="0"> <br>
<input type="button" name="plus" value="+">
<input type="button" name="minus" value="-">
<input type="button" name="mult" value="*">
<input type="button" name="divide" value="/">
</form>
</body>
</html>
HTML has a more modern element for the button: <button>. Unlike the input element, it is a container and takes the following form:
<button type="submit" name="something" value="whatever">Send Stuff</button>
It has a number of benefits:
button puts the text between the opening and closing tags, and allows the text to be more elaborate.
button is easier to style in CSS since it is a separate element to input.
As you see from the above example, you have the optional value attribute. In the input element, the the value attribute doubles up as both the text and the value. In button, the value is independent.
Be aware that certain Legacy Browsers™ get the actual value wrong, so you will need to check browser support. If you are worried about that, here is an alternative which relies on a special trick in PHP:
<button type="submit" name="something[whatever]">Send Stuff</button>
In PHP, the data will be sent as an array, and you would read the value as a key or the array:
$value=key($_GET['something']);
BTW, I assume that you’re using Ajax to do the rest. In this case it is often the $_GET array being used.
First, you can't process a PHP code inside html. So save for file as .php and leave your action attribute blank since you want to process the POST request within the same page. And a type of button for your input element will not going to submit your form. Changed it to submit
<form name="calculator" method="post" action="">
<input type="submit" name="one" value="someString">
Second, PHP needs to know or should have a reference of what specific input field you're trying to get value from. So the name attribute will be the reference. But you MUST know the exact name you're trying to pull or it will throw you an undefined index error, PHP will not know that for you.
$string = ""; //declare your variable as global to be used later
if(!empty($_POST)){
$string = $_POST['one']; //assuming you know that you are getting the value of input field `name=one`
}
From there, you can now use the variable string to display in your HTML input/textarea.
<textarea><?php echo $string; ?></textarea>
<input type="text" value="<?php echo $string;?>">
Note:
This is for PHP only, this kind of scenario is mostly done via javascript, but it depends on your preference or purpose though
OK, this is probably elementary, but I'm having a mental block.
I have a set of radio buttons and I need to submit the value to a URL in the following format:
mypage/myValue
and not
mypage/?name=myValue
Here's what I have:
<form action="mypage/" method="get">
<input type="radio" name="name" value="myValue_1"> label 1
<input type="radio" name="name" value="myValue_2"> label 2
<input type="radio" name="name" value="myValue_3"> label 3
<input type="submit">
</form>
Perhaps I'm overthinking but my initial reaction is to form the URL with jQuery on click, and than just redirect... Sounds a bit too much, isn't it?
It shouldn't be mush code (jQuery) if it's only the radios - something like:
<form>
<input type="radio" name="rname" value="myValue_1"> label 1
<input type="radio" name="rname" value="myValue_2"> label 2
<input type="radio" name="rname" value="myValue_3"> label 3
<input type="button" id="btncl">
</form>
and in the script:
$("#btncl").click(function(){
window.location="mypage/"+$('input[name=rname]:radio:checked').val();
});
Otherwise, I don't think there is a way of doing it with regular html, since the standards say that GET is ...?name=val&n2=v2....
The server side redirection should be more time-consuming (for both writing and using)
I want a list of buttons in a form and on postback I'd like to interrogate the list to see what status the buttons are at (by background colour if you are interested.)
The following codes says that Buttonx is undefined
However using the text boxes it works fine.
In javascript I can get at the array of buttons - at least in my real program.
If this is not possible, and an explanation would be useful, does anyone have a workaround at how I can get at the buttons in my postback. (In the real code the buttons are dynamically created depending on an sql query list)
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
var_dump($_POST['Buttonx']);
}
?>
<form name="RegisterStudents" action="" method="post">
<button type="submit" name="myButton">Submit</button>
<!--
<input type="text" name="Buttonx[]" id="B0" value="0" />
<input type="text" name="Buttonx[]" id="B1" value="1" />
<input type="text" name="Buttonx[]" id="B2" value="2" />
<input type="text" name="Buttonx[]" id="B3" value="3" />
-->
<button type="button" name="Buttonx[]" id="B0" >0</button>
<button type="button" name="Buttonx[]" id="B1" >1</button>
<button type="button" name="Buttonx[]" id="B2" >2</button>
<button type="button" name="Buttonx[]" id="B3" >3</button>
</form>
Thanks
Gordon
Using forms you cannot pass the form elements with type="button" to server their values are not passed to server instead you have to use any other type to send the information to server
on client side you can access their values this is the default nature of html
You cannot pass the type="button" to the server, instead use checkboxes?
You have the id="B0" or so but instead it should be value="B0" and not "id"
The <button> is not really mature in browsers yet. Look at this link: http://www.w3schools.com/tags/tag%5Fbutton.asp
If you use the <button> element in an HTML form, different browsers may
submit different values. Use <input> to create buttons in an HTML form.
I am done with the search page where the user enters the information and select from the drop-list. I've also added the button AddList where you can have more than one search form with tag names changed. All of the searches will eventually be executed in one Submit button and each search will go in one single query. My table caries all the information and tuples contain only numbers.
UPDATED: I tried changing the input type of the input tags but the enable and disable functions can't seem to work on integers, only on text fields. How can I fix that?
My submission is tomorrow, and here is my search code:
<script type="text/javascript">
$('#exactButton').live('click', function(){
$(this).prev().prev().prev().prev().prev().removeAttr('disabled');
$(this).prev().prev().prev().attr('disabled',true);
$(this).prev().prev().prev().prev().attr('disabled',true);
});
$('#rangeButton').live('click',function(){
$(this).prev().prev().removeAttr('disabled');
$(this).prev().prev().prev().removeAttr('disabled');
$(this).prev().prev().prev().prev().attr('disabled',true);
});
})
</script>
And this is my HTML code:
<button id="button">Add List</button><br><br>
<form id ="form" name="search" method="get" action="test.php">
<div id="div">
<select name ="select" >
...options...
</select>
Value:<input type="text" name="exact" id="exactField" />
From: <input type="text" name="from" id="fromField" />
To: <input type="text" name="to" id="toField" />
<br>
<input type="button" name="answer" value="Range" id="rangeButton" />
<input type="button" name="answer" value="Exact" id="exactButton" />
</div>
<br>
<input type="submit"name="search" value="Submit">
</form>
Thank you in advance..
as Dagon said, you will see all submitted parameters in the URL since you are submitting the form with method GET. here is very good explanation for this: http://www.w3schools.com/php/php_get.asp
One idea:
add some custom attributtes to the elements (to the clones too).
this.attr("mycustomattribute","somevalue");
after this, you can get all elements on the page with your custom attribute and your value.
divs = $('div[mycustomattribute="somevalue"]'); //should give all div container with attribute "mycustomattribute" with value "somevalue"
divs.each(function(){
console.log(this,$(this).attr('name'));//show expression (for debug)
});
then you can collect this elements, serialize it and add it to your post Not tested, but an idea.
Kind Regards
In PHP, it's already there.
print_r($_GET); will list all parameters sent by GET method
print_r($_POST); will list all parameters send by POST method.
Then, of course, you will need to iterate in the array to include each values in your query statement.
You can naming input with prefix or suffix correspond to sequence that user click to add list and add those set of inputs to only form.
<form id ="form" name="search" method="get" action="test.php">
<div>
<select name ="select[1]" >
...options...
</select>
Value:<input type="text" name="exact[1]" class="exactField" />
From: <input type="text" name="from[1]" class="fromField" />
To: <input type="text" name="to[1]" class="toField" />
<br>
<input type="button" name="answer[1]" value="Range" class="rangeButton" />
<input type="button" name="answer[1]" value="Exact" class="exactButton" />
</div>
<div>
<select name ="select[2]" >
...options...
</select>
Value:<input type="text" name="exact[2]" class="exactField" />
From: <input type="text" name="from[2]" class="fromField" />
To: <input type="text" name="to[2]" class="toField" />
<br>
<input type="button" name="answer[2]" value="Range" class="rangeButton" />
<input type="button" name="answer[2]" value="Exact" class="exactButton" />
</div>
.
.
.
<br>
<input type="submit"name="search" value="Submit">
</form>