I would like to build something like this: at start an empty page with only two radiobuttons. Lets say
<input type="radio" name=myradio value="1">one
<input type="radio" name=myradio value="2">two
There are also two forms
<form name="form1" action="..." method="post">
<input.../>
<input type ="submit"/>
</form>
<form name="form2" action="..." method="post">
<input.../>
<input type ="submit"/>
</form>
But at the start I dont want to show them! Only if the user is selecting one the radiobuttons. If the user goes "one" then show up form1 if the user is on "two" show up form2. Any ideas?
Ahm there is something else. If the user is changing between the two form, can I add some "cool" effects? You know not only make the on invisible and show up the other one. Something with more effects. Maybe at change make the one slowly invisible and then show up the other one slowly too? Some CSS3 options for that? Thank you
For starters, hide one of the forms with style='display:none'
Then write a script toggles the visibility of the forms on the onChange event of the radio buttons. I agree jQuery would make this very easy:
jQuery toggle div with radio buttons
Also, with jQuery its easy to make those 'cool' effects.
Without jQuery, check this example, not the most beautiful way, but functional:
<script type="text/javascript">
function toggle(theform) {
document.getElementById("form1").style.display = "none";
document.getElementById("form2").style.display = "none";
document.getElementById(theform).style.display = "block";
}
</script>
<body>
<form name="form1" id='form1' action="..." method="post" >
<input />
<input type ="submit"/>
</form>
<form name="form2" action="..." method="post" style="display: none;">
<input />
<input type ="submit"/>
</form>
<input type="radio" name="myradio" value="1" onclick="toggle('form1');"/>one
<input type="radio" name="myradio" value="2" onclick="toggle('form2');" />two
Do you understand how this works or do you need some explanation?
Use onclick with a toggle javascript. The onclick will toggle the visibility. The javascript will actually perform the toggle, and the style="display: none;" actually hides it until the toggle is performed.
so for instance the html
<input type="radio" name=myradio value="1" onclick="toggle_visibility('form1');">one
<input type="radio" name=myradio value="2" onclick="toggle_visibility('form2');">two
<form id="form1" action="..." method="post" style="display: none;">
<input.../>
<input type ="submit"/>
</form>
<form id="form2" action="..." method="post" style="display: none;">
<input.../>
<input type ="submit"/>
</form>
and the javascript in the header
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Related
I'm not sure why my additional input information is not being submitted when the form is submitted. I have applied what I have found in a similar post to insert additional input before the form is submitted. Unfortunately, only "quesiton1answers" is submitted. Additional "time" info is not :( What's wrong with this code...
<form method="post" id="answer_form" action="./submit_test.php">
<h3>1. xyz</h3>
<div>
<input type="radio" name="question1answers" id="question-1-answers-A" value="A" />
<label for="question-1-answersA">A) <sup>253</sup>/<sub>240</sub> </label>
</div>
<input type="submit" value="Submit" name="Submit" style="font-size:32px;">
</form>
jquery:
$("#answer_form").submit(function(e){
$("<input />").attr('type', 'hidden')
.attr('name', 'time')
.attr('value','60')
.appendTo("#answer_form");
return true;
});
This should work, as many others solutions offered at topic you this code from How to add additional fields to form before submit?
You can also do it simply like this (just add hidden):
$("#answer_form").submit(function(e) {
$(this).append('<input name="time" value="60">');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="answer_form" action="./submit_test.php">
<h3>1. xyz</h3>
<div>
<input type="radio" name="question1answers" id="question-1-answers-A" value="A" />
<label for="question-1-answersA">A) <sup>253</sup>/<sub>240</sub> </label>
</div>
<button type="Submit" value="Submit" name="Submit" style="font-size:32px;">Submit</button>
</form>
This works as you see, if not problem is somewhere else, not in code presented. Maybe in your PHP.
I've some form like this:
<form action="#" method="post">
<input type="text" name="website" />
</form>
How I can find if user enter website with http:// or without? I want to show it in:
<a href="value from input">
Any suggestions how to validate this form and send it to database as right link like: http://website...?
You may use javascript to validate input.
function validate()
{
var input = document.getElementsByName("website")[0].value;
if(input.startsWith("http://")) {
alert("valid input");
return true;
}
alert("invalid input");
return false;
}
<form action="#" method="post" onsubmit="return validate()">
<input type="text" name="website" />
<input type="submit" />
</form>
I have the next HTML code:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
</body></html>
Which create a file input and submit button, which sends a POST method (/upload).
I want to create a new button (submitBig), which would send another POST method (/uploadBig).
How can I do it?
A simple workaround, Create 2 Forms:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
<form method='post' action='/uploadBig' enctype='multipart/form-data'>
<input type='file' name='uploadFileBig'/>
<input type='submit' /></form>
</body></html>
Else you should indeed refer to Javascript.
Use JavaScript to run a different function for each button. Set the .action and do the .submit from there.
You will need to use Javascript. Essentially this will edit the Action of the form and post it on click:
$('#big-submit').click(function(e) {
e.preventDefault();
$(this).closest('form').attr('action', '/uploadBig').submit();
});
An even better solution would be to just have the one button, and then get the file size on click and post to the relevant action.
You can use jQuery or simple Javascript:
<!DOCTYPE>
<html>
<body>
<form method="post" id="theForm" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile" />
<input type="submit" value="normal Submit (/upload)" />
<input type="button" id="bigButton" value="big Submit (/uploadBig)" />
</form>
<script type="text/javascript">
var theForm = document.getElementById('theForm');
/* When the button is clicked */
document.getElementById('bigButton').onclick = function() {
/* Change the location */
theForm.action = '/uploadBig';
/* Submit the form */
theForm.submit();
};
</script>
</body>
</html>
You can use the HTML5 formaction attribute to do that (but you have to check it's compatibility with your requirements to use it : it only works on recent browsers).
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile"/>
<input type="submit" value="Submit" />
<input type="submit" value="Submit big" formaction="/uploadBig" />
</form>
</body>
</html>
Here One way to get around this is to handle each button's OnClick event and set the "action" for the form dynamically:
<!-- create the form -->
<form name="Form1" method="post">
<!-- Add the data entry bits -->
Your Name <input type="text" name="text1" size="10" /><br />
<!-- Add some buttons -->
<INPUT type="button" value="Button1" name=button1 onclick="return OnButton1();">
<INPUT type="button" value="Button2" name=button2 onclick="return OnButton2();">
<!-- close the form -->
</form>
Our button click handlers for Button1 and Button2 would look like the following:
<script language="Javascript">
<!--
function OnButton1()
{
document.Form1.action = "Page1.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.Form1.action = "Page2.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
-->
</script>
<noscript>You need Javascript enabled for this to work</noscript>
Where Page1.aspx should be called when Button1 is pressed, and Page2.aspx called when Button2 is pressed.
how can I replace this code, by only one Form please.
<form method="post" action="<c:url value="/deconnexion" />"><input type="submit" value="Déconnexion" class="deco" /></form>
<form method="post" action="<c:url value="/accueil" />"><input type="submit" value="Retour" class="deco" /></form>
What you want to do is impossible, each form will submit it's information to a single location, which is your action property in your form.
What you can do, alternatively, is manage two different cases in the same form. Your form would look like that :
<form method="post" action="<c:url value="/redirection" />">
<input id="deco" type="submit" value="Déconnexion" class="deco" />
<input id="retour" type="submit" value="Retour" class="deco" />
<input id="type" name="type" type="hidden" value="" />
</form>
You would need Javascript (Jquery) code to assign the type of redirection in the hidden field before the form is submitted :
<script type="text/javascript">
$('#deco').click(function(event)
{
$('#type').val("Déconnexion");
});
$('#retour').click(function(event)
{
$('#type').val("Retour");
});
</script>
Then, in the PHP, you would redirect to the page or function you wish with this condition :
if ($_POST["type"] == "Déconnexion")
// Do something
else if ($_POST["type"] == "Retour"
// Do something else
I have two radio buttons like this,
<table name="">
<tr><input type="radio" name="passwordissues" value="forgetpassword"/>Forget Password</tr>
<tr><input type="radio" name="passwordissues" value="resetpassword"/>Change Password</tr>
</table>
I may can put this inside a form but i am not supposed to add any buttons to submit the form.
My problem is when ever i click on one of the radio button it has to perform some action or has to display something. How can achieve it..
You have to write JavaScript handler (event function) for radio buttons that invokes the form.submit().
Sample:
<script type="text/javascript">
window.onload=function(){
var radios=document.getElementsByName("passwordissues");
var form1=document.getElementById("form1");
for(i=0;i<radios.length;i++){
radios[i].onclick=function() { form1.submit(); };
}
};
</script>
<form method="post" action="action_here" id="form1">
<input type="radio"
name="passwordissues"
value="forgetpassword"/>Forget Password
<input type="radio"
name="passwordissues"
value="resetpassword"/>Change Password
</form>