The problem im having is i want the user to input the answer to the input box and when submit button is clicked the box should highlight green if correct and red if incorrect.
<form method="POST" action="">
<h2>Challenge 2</h2>
<p>Key: puck</p>
<p>Message: lbcd uiqvh njohy oygncvh vg
</p>
Answer:<br>
<input type="text" name="answer2" value="">
<br>
<input type="submit" value="Submit">
</form>
Expected results should give the user an indication if they are wrong or right in answering the question.
You will want to use JavaScript
Answer:<br>
<input type="text" id="answer2" name="answer2" value="">
<br>
<input type="button" onclick="checkIfCorrect()" value="Submit">
</form>
<script>
function checkIfCorrect(){
var answerValue = document.getElementById("answer2").value;
if(answerValue == "expectedAnswer")
doSomething();
}
</script>
However this means the "expectedResult" will be inside the code that is sent to the user and can be easily viewed inside the developer console. If you want to hide the value you're looking for from the user you will need to use ajax.
https://www.w3schools.com/js/js_ajax_intro.asp
Related
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>
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
I'm new to php and html, so I'm not sure that the title is easy to understand, sorry for that. The problem is simple , I have an html form like this:
<form action="action_calibration.php" method=post>
<br><br>
<input type="radio" name="type" value="fast" checked>Fast Calibration
<br><br>
<input type="radio" name="type" value="old">Old Calibration
<br><br>
<input type="checkbox" name="ScanVPlus" value="yes" checked>Scan
<br><br>
<input type="checkbox" name="Bitwise" value="yes">Bitwise Offset
<br><br>
<input type="checkbox" name="All_channel" value="yes">Calibration
<br><br>
Output Folder:<input type="textfield" name="output" value="Results/">
<br><br>
Hw Description File:<input type="textfield" name="Hw Description File " value="settings/Calibration2CBC.xml">
<br><br>
<input type="submit" value="Submit">
</form>
The action_calibration.php is a php page that execute a binary file and show the results on the php page, what I'm tring to do is print these results on the page containing the form, without open another one. I hope that you can understand what I mean. Thank you.
Try including an iframe sibling the form, with a name, and giving the form a target attribute.
Related: How do you post to an iframe?
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>
I have a php signup form. I have a text field named username ie, <input type="text" name="username"> to enter username. I have a button next to it with value and name as check. I want to popup a small window when user click the check button. I just want the entered text (username) to get displayed in the popup window.
The key need is to transfer the data from this window to popup window.
How can I make this possible??
I'm not pretty sure what are your really wanted. I guess experimentX has a point. Anyway try this code. But first your calling page must be a php.
PHP:
<p>User Name is: <?php echo $_GET['userName']; ?> </p>
HTML
Forwarding value via URL
<form>
<p>
<input type="text" name="userName" />
<input type="button" value="check" onClick="window.open('popWindow.php?' + 'userName=' + this.form.userName.value, '_new')" />
</p>
</form>
Forwarding value via submit:
<form action="popWindow.php" target="_new" method="GET">
<p>
<input type="text" name="userName" />
<input type="submit" value="check" />
</p>
</form>
I hope this can help. If not please be more specific and provide more of your code.