<form action="" method="post">
<body>
customer type:<input type="radio" name="customer" value="yes" onclick="return check()" checked="checked"/>yes
<input type="radio" name="customer" value="no" onclick="return check2()" />no
<div id="one">
firts name :<input type="text" name="fname" id="fname" required="required"/>
</div>
<div id="two" style="display:none;">
Party Name<input type="text" name="party_name" id="pname" required="required"/>
</div>
<input type="submit" value="save" name="save" />
</body>
</form>
<script type="text/javascript">
function check()
{
document.getElementById("one").style.display="";
document.getElementById("two").style.display="none";
}
function check2()
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="";
}
</script>
</head>
<?php
if(isset($_POST["save"]))
{
header("location: hide_show.php");
}
?>
here at the top are two radio buttons ...when i click on "Yes" radio button Div one shows and div two gets hide....when i click on "no" radio button then div two shows up and one hides ...now i have applied validation in both the textboxes so suppose if have choosen yes div one shows up and when i click submit button ...it doesnt get submitted because i have applied validation in div named two....valiadtion is also necessary...but is taking both div's validation at the submit time...plz suggest some way for this
Try style.display="block" rather
function check()
{
document.getElementById("one").style.display="block";
document.getElementById("two").style.display="none";
}
function check2()
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="block";
}
Related
If I have a simple html form with two submit buttons:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
It is possible to only post the hidden input if the "confirm" submit is clicked?
If the "goback" submit is clicked the hidden input should be ignored. I know how to accomplish this with JavaScript but was wondering if it can be done with just html.
For anyone wondering, this is how you do this in JavaScript:
<script>
var elements = document.getElementsByClassName('submit_form');
elements[0].addEventListener(
'submit',
function(event) {
if(event.explicitOriginalTarget.name === 'goback'){
var hiddenInput = document.querySelector("input[name='step']");
hiddenInput.setAttribute("disabled", "disabled");
}
}
);
</script>
You could put the buttons in 2 separate forms:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
</form>
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
That way the secret field will only be posted if the confirm button is clicked.
If you want to do it in the php code you can leave your form as is
and check if isset($_POST["confirm"]) to check if the confirm button was the one clicked.
I face problem with reset value to empty with jquery when click radio button.
<form id="my-form">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" value="123" />
</div>
<div>
<label for="ID">ID NO</label>
<input type="text" id="ID" name="ID" value="NO21034" />
</div>
<fieldset>
<legend>Option</legend>
<label for="clearID">clearID</label> <input type="radio" id="clearID" name="opt" checked />
<label for="clearName">clearName</label> <input type="radio" id="clearName" name="opt" />
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function()
{
$('#clearname').on('click', function()
{
$('#my-form').find('input:text').val('');
});
});
</script>
now if my radio button click clearName,it will automatic clear the value of name and id.
is it having another code can replace find('input:text') ?I want to clear either one value(name or id),not both.
Clear each field using corresponding id..
<script type="text/javascript">
$(document).ready(function()
{
$('#clearname').on('click', function()
{
$('#ID').val('');//it clears the value of element having id='ID'
$('#name').val('');//it clears the value of element having id='name'
});
});
</script>
use javascript reset method
$('#clearname').on('click', function()
{
$("#my-form")[0].reset()
// or
$("#my-form").get(0).reset()
});
I have a form which the submit button wont execute the function being called onclick.
<form method="get" name="myform" onsubmit="return Validate()" style="margin: 100px">
<input type="radio" id="Yes" name="Authorise" onclick="Clear_Message(Authorise_Message)"/>
Yes
<input type="radio" id="No" name="Authorise" onclick="Clear_Message(Authorise_Message)" />
No
<div class="Output" id="Authorise_Message"> </div>
<input type="submit" id="SUBMIT" name="SUBMIT" onclick="Validator()"/>
</form>
The Validator code:
function Validator()
{
//display an error message if radio button groups have no value, if it does have a value then clear the error message
Title_Radio();
Gender_Radio();
Partnership_Radio();
Communication_Radio();
Authorise_Radio();
Advice_Radio();
CC_Radio();
Switch();
alert("This function was called");
}
The radio methods check if the radio has a value, if not then it changes the Authorise_Method div to show a message next to the radios,
But the method wont seem to execute. When i had this in an <input type="button" onclick="Validator"/> it seemed to work but i needed it to submit so i changed it to a submit type button...
You should assign id to the form and then run your code at the submit event before the form being submitted, and prevent the form submission if the validation failed.
So the html should be:
<form id="theForm" method="get" name="myform" style="margin: 100px">
<input type="radio" id="Yes" name="Authorise" onclick="Clear_Message('Authorise_Message')"/> Yes
<input type="radio" id="No" name="Authorise" onclick="Clear_Message('Authorise_Message')" /> No
<div class="Output" id="Authorise_Message"></div>
<input type="submit" id="SUBMIT" name="SUBMIT"/>
</form>
And you should add the following code to your JavaScript code:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("theForm").addEventListener("submit", function(event) {
Validator();
//if the validation fails, prevent the form submission by calling the following function:
//event.preventDefault();
});
});
Here is my problem, when i click the submit button, the textbox doesn't show any value
Is there any mistakes, i am just a newbie
Thank you very much
<form id="form1" name="form1" method="post" >
<p>
<input type="submit" name="setValue" id="setValue" value="submit" onclick="setValue()"/>
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue()
{
document.getElementById('bbb').value="new value here";
}
</script>
The first issue is that you're using the same name for the element as the function, so window.setValue is not the function, but the submit button, and that's an error.
The second issue is that when you hit the submit button, the form is submitted and the page reloads, that's why you wont see a value, you have to prevent the form from submitting.
You could do it with javascript, but the easiest would be to just use a regular button instead of the submit button.
<form id="form1" name="form1" method="post">
<p>
<input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('bbb').value = "new value here";
}
</script>
FIDDLE
I was typing the same answer what Adeneo just given, thank you Adeneo.
And user3635102, your <form> was good, you can keep it as it was. Only you need to change <input type="submit"> to <input type="button"> . if you need to submit the form in future you can update your Javascript as follows which will submit form1:
<script>
function setValue() {
document.getElementById('bbb').value = "new value here";
document.getElementById("form1").submit();
}
</script>
I have 5 radio buttons and want to show different div on selection of particular radio
button, but other div as contact form should be displayed on submitting form.
And one more thing I want next div on same location of first div ( first div show and second div hide at same place)
<p>Tell us more about Yourself</p>
<form class="request-demo-form" action="" method="post" onSubmit="e();" name="form1">
<div class="input-block">
<input name="info" class="input-radio" type="radio" value="Restaurant" /> Restaurant Chain with more than 3 Locations. ( Looking for more information )
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" value="IndRestaurant"/> Independent Restaurant with 1-3 Locations ( Looking for more information )
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> Existing Punchh Customers ( Looking For Support)
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> User of Punchh Developed App ( Looking For Support)
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> Others ( Marketing , Partership etc.)
</div>
<br/>
<div class="submit-btn-area">
<button type="submit" class="button button-dark">SUBMIT<span class="arrow1"></span></button>
</div>
</form>
I have not much experience in javascript so please check my code
<script type="text/javascript">
$('input:radio[value="Restaurant"]').change(
$('form').submit(function (e) {
if ($(this).is(':checked')) {
$('#main').hide();
$('#Restaurant').show();
e.preventDefault();
}
});
</script>
In the above code the $(this) refers to the form element, and not the radio input field.
I suggest, that on the submit event of the form, that we check the radio input field and hide and show the divs accordingly.
<script type="text/javascript">
$().ready(function() {
$('form').submit(function (e) {
$('input:radio[value="Restaurant"]').is(':checked')) {
$('#main').hide();
$('#Restaurant').show();
e.preventDefault();
}
});
});
</script>