When a radio button is selected, the submit button should refer to the page associated with that radio button
HTML
<label class="input-group">
<span class="input-group-addon">
<input type="radio" name="betalen" value="bitcoin" />
</span>
<div style=" width: 320px;" class="form-control form-control-static">
BITCOIN
</div>
<span class="glyphicon form-control-feedback "></span>
</label>
</div>
<div class="form-group has-feedback ">
<label class="input-group">
<span class="input-group-addon">
<input type="radio" name="betalen" value="visa" />
</span>
<div style=" width: 320px;" class="form-control form-control-static">
VISA
</div>
<span class="glyphicon form-control-feedback "></span>
</label>
The php code that I'm using. I found this code also on stackoverflow, but it doesn't work...
<form action="pay-selector.php">
<?php
if (isset($_POST['betalen']) && $_POST['betalen'] == 'visa') {
include('payvisa.php');
} elseif (isset($_POST['betalen']) && $_POST['betalen'] == 'bitcoin') {
include('paybitcoin.php');
}
?>
Do I something wrong?
1st add onsubmit="setaction()" to form element.
<form action="#default_action" id="form_id" onsubmit="setaction()">
Then add id to bitcoin radio input
<input type="radio" id="bitcoin" name="betalen" value="bitcoin" />
then add the following script
<script>
function setaction() {
var refer_to = ($('#bitcoin')[0].checked === true)? "paybitcoin.php" : "payvisa.php";
$('form').attr('action', refer_to);
return false;
}
</script>
Hope this will help you.
Related
I have a form in HTML with some checkboxes and I want to send an email with the selected checkboxes in the body, the problem is that the "text" fields are passing to the PHP variables, but the checkboxes values are always set to uncheck when I test it on the PHP file:
HTML:
<div class="col-md-6">
<div class="c-checkbox-list">
<div class="c-checkbox">
<input type="checkbox" name="checkbox1citadina" id="checkbox1citadina" value="checkbox1citadina" class="form-control c-check" >
<label for="checkbox1citadina">
<span></span>
<span class="check"></span>
<span class="box"></span> Citadina
</label>
</div>
PHP:
$reservas_bicicletas = '';
if (isset($_POST['checkbox1citadina'])) {
$reservas_bicicletas .= "Citadina: checked\n";
} else {
$reservas_bicicletas .= "Citadina: unchecked\n";
}
echo $reservas_bicicletas;
$reservas_bicicletas always retrieves the else value.
Need help guys, thanks in advance.
remove c-check
<div class="col-md-6">
<div class="c-checkbox-list">
<div class="c-checkbox">
<input type="checkbox" name="checkbox1citadina" id="checkbox1citadina" value="checkbox1citadina" class="form-control " >
<label for="checkbox1citadina">
<span></span>
<span class="check"></span>
<span class="box"></span> Citadina</label>
</div>
Basically i have this (i shorted out the form because there are too many elements):
HTML:
<form name="quick_booking" id="quick_booking" method="post" action="assets/reserva-bicicletas.php">
<div class="col-md-6">
<div class="c-checkbox-list">
<div class="c-checkbox">
<input type="checkbox" name="checkbox1citadina" id="checkbox1citadina" value="checkbox1citadina" class="form-control " >
<label for="checkbox1citadina">
<span></span>
<span class="check"></span>
<span class="box"></span> Citadina</label>
</div>
<button type="submit" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square">Reservar</button>
</form>
the register function inside file name signup.php capture values of fields with ajax send them to register.php then display a toast reply */
// js code inside signup.php
<script type="text/javascript">
function register(){
var name=$('#form2').val();
var email=$('#form3').val();
var password=$('#form4').val();
var question=$('#question').val();
var repsec=$('#form5').val();
if((email!="")&&(password!="")&&(name!="")&&(repsec!="")&&(quest!="")) {
$.ajax({
var data = $("#reg").serialize();
url:'register.php',
type:'POST',
data:data,
success: function(data){
if(data=='success'){
toastr.clear(); toastr.success('user: '+name+' registred'); } else {toastr.clear(); toastr.error(email+' already exists') } } }); } }; </script>
<!-- registration form-->
<form id="reg" method="post">
<div class="md-form" style="top: 25px;">
<i class="fa fa-user prefix" style="top: 15px;"></i>
<input type="text" name="name" id="form2" class="form-control">
<label for="form2">Your name</label> </div> <div class="md-form" style="top: 25px;">
<i class="fa fa-envelope prefix" style="top: 14px;right: 500px;"></i>
<input type="email" name="email" id="form3" class="form-control" style="margin-top: 30px;" required> <label for="form3">Your email</label> </div>
<div class="md-form" style="top: 28px;">
<i class="fa fa-lock prefix" style="top: 14px;"></i>
<input type="password" name="password" id="form4" class="form-control" required>
<label for="form4">Your password</label> </div> <i class="fa fa-question-circle" style="top: 14px;margin-top: 40px;font-size:1.6rem;"></i>
<select name="quest" id="question" style="margin-top: -25;margin-left: 38px;width: 497px;">
<option>What is the name of my best childhood friend?</option> <option>What is the best place I have visited?</option> <option>What is the best gift I received?</option>
</select>
<div class="md-form" style="top: 25px;left:40;">
<input type="password" name="repsec" id="form5" class="form-control" style="font-size: 1.4rem;font-weight: bold;color: #000;width: 480px;" required>
<label for="form5">Answer of secret question </label> </div>
<div class="text-xs-center">
<button class="btn btn-indigo" onclick="register()" style="margin-top: 25px;" type="submit">Sign up</button> </div></form>
The problem while submitting form the page reload without ajax reply and without inserting the new user on the database. I included all bootstrap files(css & js) and jquery library correctly, I even coded a login form similar to signup.php in which the ajax request work with toast reply correctly
i tried to add preventDefault, changing type of submit to input type=button then verifying PHP code,database parameters but I have never find solution for 3 weeks
//register.php code
Instead of using onclick="register()" , try using javascript to submit the form instead.
document.getElementById("reg").onsubmit = function() {register()};
And remove the onclick="register()" event from the submit button.
I usually do this with jquery, but if you don't use that, I think the above will work. I have not tested it.
Here is a way with Jquery:
$(function() {
// register user
$("button.btn-indigo").click(function(){
register();
});
I have a form that the user has to input number contract and a code like so:
<form action="index.php?option=com_platiniumchristmas&cartao=<?php echo $_GET['cartao']?>&contrato=contract&codigo=code" method="post">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user tip" title="Utilizador"></i>
</span>
<input autocomplete="off" type="text" name="contract" id="contract" class="input form-control" tabindex="0" size="18" placeholder="Num. Contrato" required="" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock tip" title="Senha"></i>
</span>
<input autocomplete="off" type="password" name="codigo" id="code" class="input form-control" tabindex="0" size="18" placeholder="Codigo" required="" value="">
</div>
</div>
<input type="hidden" name="cartao" id="cartao" value="<?php echo $_POST['cartao']?>"/>
<input type="submit"value="Login" id="submit" class="btn btn-info pull-right" />
</form>
I have to post those values into an url so that the other page recives this values. But what is happing is instead of putting the id on my form action url it does nothing. Can any one help me with this issue.
The Hidden field is to call a function inside of a the form like so:
<?php
function validateUser($contrato, $codigo)
{
$url = 'http://managerexternal.medicare.pt/MedicareManager_External.svc?wsdl';
$client = new SoapClient($url);
$paramsMC = array('schema'=>'mctestes','numcContrato'=>$contrato, 'codigo'=>$codigo);
$paramsGC = array('schema'=>'gctestes','numcContrato'=>$contrato, 'codigo'=>$codigo);
if($client->AuthenticatedUserByContratoCodigo($paramsMC) == true){
$controller = new getInfoContact();// Instanciar Class
$controller->getuserInfo('mctestes',$contrato);
$_GET['schema']="mctestes";
$controllerNumeroCartao = new getInfoContact();// Instanciar Class
$_POST['cartao']=$controllerNumeroCartao->getNumCartao('mctestes',$contrato);
}
?>
I need to a function to get value for "cartao". Then I need to send through an url the contact and code value that where set by the user. With does two values I call a function to get the users "cartao".
First of all your code is wrong
<form action="index.php?option=com_platiniumchristmas&cartao=<?php echo $_GET['cartao']?>&contrato=contract&codigo=codigo method="get">
should be
<form action="index.php?option=com_platiniumchristmas&cartao=<?php echo $_GET['cartao'];?>&contrato=contract&codigo=codigo" method="get">
I have the following form that needs to feed into the database but I would like it to be validated before it can be saved into the database :
<form name="add_walkin_patient_form" class="add_walkin_patient_form" id="add_walkin_patient_form" autocomplete="off" >
<div class="form-line">
<div class="control-group">
<label class="control-label">
Patient Name
</label>
<div class="controls">
<input type="text" name="patientname" id="patientname" required="" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">
Patient Phone Number
</label>
<div class="controls">
<input type="text" name="patient_phone" id="patient_phone" required="" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">
Department
</label>
<div class="controls">
<select name="department" required="" class="department" id="department">
<option value="">Please select : </option>
<option value="Pharmacy">Pharmacy</option>
<option value="Laboratory">Laboratory</option>
<option value="Nurse">Nurse</option>
</select>
</div>
</div>
</div>
<button name="add_walkin_patient_button" type="submit" id="add_walkin_patient_button" class="btn add_walkin_patient_button btn-info pull-right">
Add Walk In Patient
</button>
</form>
And the submit is done by a jquery script using the following script :
<script type="text/javascript">
$(document).ready(function () {
//delegated submit handlers for the forms inside the table
$('#add_walkin_patient_button').on('click', function (e) {
e.preventDefault();
//read the form data ans submit it to someurl
$.post('<?php echo base_url() ?>index.php/reception/add_walkin', $('#add_walkin_patient_form').serialize(), function () {
//success do something
// $.notify("New Patient Added Succesfully", "success",{ position:"left" });
$(".add_walkin_patient_form").notify(
"New Walkin Patient Added Successfully",
"success",
{position: "center"}
);
setInterval(function () {
var url = "<?php echo base_url() ?>index.php/reception/";
$(location).attr('href', url);
}, 3000);
}).fail(function () {
//error do something
$(".add_walkin_patient_form").notify(
"There was an error please try again later or contact the system support desk for assistance",
"error",
{position: "center"}
);
})
})
});
</script>
How can I put form validation to check if input is empty before submitting it into the script?
I am using javascript to do the validations.
Following is the form code:
<form action="upload.php" method="post" onSubmit="return validateForm()">
<input type="text" id="username">
<input type="text" password="password">
<input type="submit" value='Login' name='login'>
</form>
To perform validation write a javascript function:
<script>
function checkform(){
var uname= document.getElementById("username").value.trim().toUpperCase();
if(uname=== '' || uname=== null) {
alert("Username is blank");
document.getElementById("username").backgroundColor = "#ff6666";
return false;
}else document.getElementById("username").backgroundColor = "white";
var pass= document.getElementById("password").value.trim().toUpperCase();
if(pass=== '' || pass=== null) {
alert("Password is blank");
document.getElementById("password").backgroundColor = "#ff6666";
return false;
}else document.getElementById("password").backgroundColor = "white";
return true;
}
</script>
You are using,
<button name="add_walkin_patient_button" type="submit" id="add_walkin_patient_button" class="btn add_walkin_patient_button btn-info pull-right">
Add Walk In Patient
</button>
Here, submit button is used for submitting a form and will never trigger click event. Because, submit will be triggered first thus causing the click event skip.
$('#add_walkin_patient_button').on('click', function (e) {
This would have worked if you have used normal button instead of submit button
<input type="button">Submit</button>
Now to the problem. There are two solution for it ,
If you use click event, then you should manually trigger submit on correct validation case,
<input type="button" id="add_walkin_patient_button">Submit</button>
//JS :
$("#add_walkin_patient_button").click(function() {
if(valid){
$("#form-id").submit();
}
Another option is to use submit event;which is triggered just after you click submit button. Here you need to either allow form submit or halt it based on your validation criteria,
$("#form-id").submit(function(){
if(invalid){
//Suppress form submit
return false;
}else{
return true;
}
});
P.S
And i would recommend you to use jQuery Validate as suggested by #sherin-mathew
make a javascript validation method (say, validateForm(), with bool return type). add [onsubmit="return validateForm()"] attribute to your form and you are done.
You need to prevent default action.
$('#add_walkin_patient_form').on('submit', function(e) {
e.preventDefault();
//Validate form and submit
});
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<style>
#first{
display: none;
}
</style>
<div class="container"><br>
<div class="col-lg-6 m-auto d-block">
<form action="" method="" onsubmit="return validation()" class="bg-light">
<div class="form-group">
<label for="">Title</label>
<span class="text-danger">*</span>
<!-- <input class="form-control" type="text" > -->
<select name="title" id="title" class="form-control" >
<option value=""class="form-control" >Select</option>
<option value="Mr" class="form-control">Mr</option>
<option value="Mrs" class="form-control">Mrs</option>
</select>
<span id="tit" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<label for="firstName">FirstName</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="First name" id="firstName" >
<span id="first" class="text-danger font-weight-bold"> </span>
</div>
<div class="col">
<label for="lastName">LastName</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="Last name" id="lastName">
<span id="last" class="text-danger font-weight-bold"> </span>
</div>
</div>
</div>
<div class="form-group">
<label for="email">Your Email</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="Email" id="email">
<span id="fillemail" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<label for="contact">Your Contact</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="Contact Number" id="contact">
<span id="con" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<label for="password">Your Password</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="Password" id="password">
<span id="pass" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<label for="conPassword">Confirm Password</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="Password" id="conPassword">
<span id="conPass" class="text-danger font-weight-bold"> </span>
</div>
<div class="checkbox">
<label><input type="checkbox"> I accept Terms and Conditions</label>
</div>
<div class="checkbox">
<label><input type="checkbox"> I agree to recieve Email Terms and Conditions</label>
</div>
<div class="checkbox">
<label><input type="checkbox"> I agree to recieve SMS Terms and Conditions</label>
</div>
<input type="submit" name="submit" value="SignUp" id="signUp" class="btn btn-success" autocomplete="off">
</form><br><br>
</div>
</div>
<script type="text/javascript">
function validation(){
var title = document.getElementById('title').value;
var firstName = document.getElementById('firstName').value;
var email=document.getElementById('email').value;
var contact=document.getElementById('contact').value;
var password=document.getElementById('password').value;
var conPassword=document.getElementById('conPassword').value;
var signBut=document.getElementById('signUp');
console.log(firstName);
if(title == ""){
document.getElementById("tit").innerHTML =" Please select the title feild first field";
return false;
}
// if(firstName == "" & firstName.length<=3){
// document.getElementById("first").innerHTML =" Please Enter First Name";
// return false;
// document.getElementById("signUp").addEventListener("click", function(event){
// event.preventDefault()
// });
// }
signBut.addEventListener('click',function(e){
if(firstName=="" & firstName<3)
{
document.getElementById("first").innerHTML="Please Enter proper Name";
e.preventDefault();
}
},false);
if(lastName == ""){
document.getElementById("last").innerHTML =" Please Enter Last Name";
return false;
}
else if(email ==""){
document.getElementById("fillemail").innerHTML="Please Enter Email";
}
else if(contact ==""){
document.getElementById("con").innerHTML="Please Enter Your Contact";
}
else if(password ==""){
document.getElementById("pass").innerHTML="Please Enter Your Password";
}
else if(conPassword ==""){
document.getElementById("conPass").innerHTML="Please Confirm Password";
}
}
</script>
</body>
</html>
I think you should use type button
and then eventClick function of jquery
I want to change the label text based on the selection of the radio button. Could you please help me to do it easily. Here is my code.
<div class="control-group ">
<div class="controls">
<label class="radio inline">
<input type="radio" name="btype[]" id="private" value="private" checked>Private
</label>
<label class="radio inline">
<input type="radio" name="btype[]" id="business" value="business">Business Advertiser
</label>
</div>
</div>
This is the label that i want to change the text
<div class="control-group " >
<label class="control-label" id="labelName">Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" id="name" name="name" placeholder="">
</div>
</div>
</div>
<div class="control-group ">
<label class="control-label" id="labelNum">NIC</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" id="regNum" name="regNum" placeholder="">
</div>
</div>
</div>
This is my javascript
<script type="text/javascript">
$(document).ready(function()
{
if (($('input[name=btype]:radio:checked').val())=="business")
{
document.getElementById("labelName").innerHTML="Company Name";
document.getElementById("labelNum").innerHTML="Reg No.";
}
}
);
</script>
I rewrote the code for you in a better way. When you have jQuery use it to the best. Don't get messed up by handling JavaScript. jQuery is there to do it for you.
<script type="text/javascript">
$(document).ready(function()
{
if ($('#business').is(':checked'))
{
$('#labelName').text("Company Name");
$('#labelNum').text("Reg No.");
}
}
);
</script>
youre mixing jquery in with your js, so heres jquery
<script type="text/javascript">
$(document).ready(function(){
$('input[name=btype]:radio:checked').click(function(e){
if($(e.currentTarget).val()==='business') {
$("#labelName").text("Company Name");
$("#labelNum").text("Reg No.");
}
});
});
</script>
JsFiddle
onclick="document.getElementById('labelName').innerHTML='NEWLABELNAME'"
You can achieve this by adding a change listener to that inputs and getting the value of the selected one
I have added some HTML5 attributes to avoid getting more DOM
please look at data-text
<div class="control-group ">
<div class="controls">
<label class="radio inline">
<input type="radio" data-text="private" name="btype[]" id="private" value="private" checked>Private
</label>
<label class="radio inline">
<input type="radio" data-text="Business Advertiser" name="btype[]" id="business" value="business">Business Advertiser
</label>
</div>
</div>
Here is your JS and its jQuery
$(document).ready(function(){
$('input[name="btype[]"]').change(function(){
alert($(this).data('text'));
});
});
You can add more than data-* attributes like price or whatever you want and getting the value of it by using $(this).data('*');
It's used like this to make your HTML valid and I used it to avoid getting parent text
Check this fiddle http://jsfiddle.net/gK6bU/1/
I hope this can help :)