Hi everyone i'm new here in stackoverflow so.. my first question is:
How i can get the value from HTML <select></select> and declare in <form action="here i want to declare">
html
<div class="panel-body">
<select required>
<option value="#">Select Type of File</option>
<option value="upload1.php">uno</option>
<option value="upload2.php">dos</option>
<option value="upload3.php">tres</option>
</select>
<form name="form1" id="form1" method="post" action="" enctype="multipart/form-data">
<h4 class="text-center">Cargar Multiple Archivos</h4>
<div class="form-group">
<label class="col-sm-2 control-label">Archivos</label>
<div class="col-sm-8">
<input type="file" class="form-control" id="archivo[]" name="archivo[]" multiple="">
</div>
<button type="submit" class="btn btn-primary">Cargar</button>
</div>
</form>
</div>
I want to get the value upload1.php, or upload2.php or upload3.php depending the option selected on the select HTML and declare in <form action="HERE"></form>
The project is cloud to upload files and i want to sort out if is music to a concret folder (upload1.php) if is photos in another folder (upload2.php)
I would use jQuery.
$(document).ready(function() {
$(select).on('change', function() {
var selected = $(this).val();
$('#form1').prop('action', selected);
});
});
But it is good to give id to select field first.
Related
I dont see the reason why one particular html field is not sending data.
My html:
<form id="login_registro_form" role="form" method="post" action="./controllers/register.php">
<div class="row my-4 justify-content-md-center">
<label class="col-lg-3" for="regName">NOMBRE</label>
<input type="text" class="form-control" id="regName" placeholder="SEGÚN APARECE EN EL DNI/PASAPORTE" name="regName">
<div class="invalid-feedback ">El nombre es un campo obligatorio </div>
</div>
<div class="row my-4 justify-content-md-center">
<label class="col-lg-3" for="reg_birthday">CONFIRMA TU TALLA</label>
<select class="form-select" id="talla" nombre="talla" aria-label="Default select example">
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m" selected>M</option>
<option value="L">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
</div>
<div class="login_cb justify-content-md-center">
<label for="reg_allergies">ALERGIAS, INTOLERANCIAS O DIETAS ESPECIALES</label>
<input type="checkbox" class="form-check-input " id="reg_allergies" name="allergies" >
</div>
<button id="register_button" type="submit" class="btn btn-primary" >GUARDAR</button>
</form>
While this is shortened all the other imput fields are working and enclosed within the same div class="row my-4 justify-content-md-center"
In my php i tried checking with:
var_dump($_POST);die;
I am able to see there that ALL of the other variables are there except the options
And one more thing. I have some validations before i send the information:
$('#login_registro_form').submit(function(e) {
//My validations for the rest of the form
console.log($('#talla').val()); //THIS IS ACTUALLY SHOWING THE INFORMATION
return (errores.length <= 0 );
});
So the information IS there just before posting it, but for some reason it is not being recognised as part of the form
Edit: I know i can retrieve the information using jquery and send it it by creating a new field, but im trying to understand my html mistake here.
You have not given the <select> element a name="talla" attribute, Therefore it is not sent to the PHP code. Only fields with a name= attribute can send data to PHP Code.
I have select option input. When I choose the number on it and than click the button, I want to display the forms. The number of form displayed based on the select option I choose. I don't know how to loop it in jquery and make the form display:none (before the button click the form is not visible). And is it posible to input more than one data in one table in the same time and how to do that? I've tried this
Thank You
<div class="form-group col-sm-6">
<label for="sel1">Jrekrut : </label>
<select class="form-control" name="sel1" id="sel1" >
<option selected>Pilih</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option> </select>
</div>
<form class="form-horizontal striped-rows b-form" id="form1">
<div class="card-body">
<div class="form-group row">
<div class="col-sm-3">
<div class="b-label">
<label for="inputEmail3" class="control-label col-form-label">Full Name</label>
</div>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Full Name Here">
</div>
</div>
</form>
<script type="text/javascript">
var num;
$('#sel1').on('change', function(event) {
alert("This is the value selected in solutions: " + $(this).val());
num = $(this).val();
});
$("#btn").click(function(){
//$("#form1").hide();
$("#form1").toggle();
console.log(num);
});
Okey. So first you need to make a wrapper for all forms like '.form-container' and next you need to create html in javascript and push into it.
$(document).ready(function(){
$('#sel1').on('change', function(event) {
initForms($(this).val());
});
$('body').on('click', '.btn', function(){
$('.form-horizontal').each(function(){
$(this).show();
});
)};
});
function initForms(formCount){
var finalHTML= "";
for(i=0, i<formCount; i++){
var tempHTML ='<form id="$formid$" class="form-horizontal striped-rows b-form" style="display:none;"><div class="card-body"><div class="form-group row"><div class="col-sm-3"><div class="b-label"><label for="inputEmail3" class="control-label col-form-label">Full Name</label></div></div><div class="col-sm-9"><input type="text" class="form-control" id="inputEmail3" placeholder="Full Name Here"></div></div></div></form>';
tempHTML = tempHTML.split("$formid$").join("form-" + i);
finalHTML += tempHTML;
}
$('.form-container').empty().html(finalHTML);
}
I have placed your form in a div with id equal to form_container, so that you can alter the number of forms in a cleaner way.
<div id="form_container">
<form class="form-horizontal striped-rows b-form" id="form1">
...
</form>
</div>
You can then use append() to add more some forms to your div in a for loop.
var num;
$('#sel1').on('change', function(event) {
alert("This is the value selected in solutions: " + $(this).val());
num = $(this).val();
var formHTML = $("#form1").html(); // Get the HTML content of '#form1'
$('#form_container').html(''); // Clear the contents of form_container
for(var i = 0; i < num; i++){
var id = i + 1;
$('#form_container').append('<form class="form-horizontal striped-rows b-form" id="form'+id+'">'+formHTML+'</form>');
}
});
form display:none
<form class="form-horizontal striped-rows b-form" id="form1" style="display:none">
</form>
$('#sel1').click(function(){
$("#form1").show();
});
To keep it simple I have 2 form multiple select elements. Depending on the dropdown selected, it will auto hide or show additional input fields.
This is achieved like such:
$(document).ready(function(){
$("#find-replace1 select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=="Find/Replace"){
$(".rep1").hide();
$(".find1").show();
$(".replace1").show();
} else {
$(".rep1").show();
$(".find1").hide();
$(".replace1").hide();
}
});
}).change();
});
$(document).ready(function(){
$("#find-replace2 select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=="Find/Replace"){
$(".rep2").hide();
$(".find2").show();
$(".replace2").show();
} else {
$(".rep2").show();
$(".find2").hide();
$(".replace2").hide();
}
});
}).change();
});
My html is:
<p>
<form method="POST" action="#" accept-charset="UTF-8">
<div id="find-replace1" class="form-group-a">
<select class="form-control" name="priceaction">
<option value="Append">Append</option>
<option value="Prepend">Prepend</option>
<option value="Replace">Replace</option>
<option value="Find/Replace">Find/Replace</option>
</select>
</div>
<div class="form-group-a">
<input class="form-control formwidth rep1" autocomplete="off" name="value" type="text" style="display: block;">
</div>
<div class="form-group-a">
<input class="form-control formwidth find1" autocomplete="off" placeholder="find this" name="find" type="text" style="display: none;">
</div>
<div class="form-group-a">
<input class="form-control formwidth replace1" autocomplete="off" placeholder="replace with" name="replace" type="text" style="display: none;">
</div>
<div class="clear"></div>
<input type="submit" value="Update">
</form>
</p>
<hr>
<p>
<form method="POST" action="#" accept-charset="UTF-8">
<div id="find-replace2" class="form-group-a">
<select class="form-control" name="priceaction">
<option value="Append">Append</option>
<option value="Prepend">Prepend</option>
<option value="Replace">Replace</option>
<option value="Find/Replace">Find/Replace</option>
</select>
</div>
<div class="form-group-a">
<input class="form-control formwidth rep2" autocomplete="off" name="value" type="text" style="display: block;">
</div>
<div class="form-group-a">
<input class="form-control formwidth find2" autocomplete="off" placeholder="find this" name="find" type="text" style="display: none;">
</div>
<div class="form-group-a">
<input class="form-control formwidth replace2" autocomplete="off" placeholder="replace with" name="replace" type="text" style="display: none;">
</div>
<div class="clear"></div>
<input type="submit" value="Update">
</form>
</p>
Here is the jsfiddle: https://jsfiddle.net/kqjkprc1/
On my live site I actually have more than one form element but I kept it simple with 2 for this example. I notice it only applies the jQuery to the last form element on the page no matter what. Not sure why the first form element is unaffected and won't show/hide the hidden input fields.
On the one hand you can add different form actions like this
<form method="POST" action="update_1.php" >
</form>
<form method="POST" action="update_2.php">
</form>
on the other hand you can define differnt submit names
<form method="POST" action="#" >
<input type="submit" name="form1">
</form>
<form method="POST" action="#" >
<input type="submit" name="form2">
</form>
and get in in the php file like that
if (!empty($_POST['form1'])) {
//do something here for form 1;
}
if (!empty($_POST['form2'])) {
//do something here for form 2;
}
--- UPDATE ---
ahh ok i think i have a solution for you (first line changes)
$( "option:selected", this).each(function(){
if($(this).attr("value")=="Find/Replace"){
$(".rep1").hide();
$(".find1").show();
$(".replace1").show();
} else {
$(".rep1").show();
$(".find1").hide();
$(".replace1").hide();
}
});
https://jsfiddle.net/kqjkprc1/1/
I am using Bootstrap. I am trying to create a working form, but the submit function doesn't work.
Here is my form HTML:
<form class="form-horizontal" role="form" action="mph.php" method="POST">
<div class="modal-body">
<fieldset>
<!-- Form Name -->
<legend>Map Problem Reporter</legend>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">What map?</label>
<div class="col-md-6">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">6 Stages of Parkour</option>
<option value="2">20 Stages of Parkour</option>
</select>
</div>
</div>
<!-- Multiple Radios -->
<div class="form-group">
<label class="col-md-4 control-label" for="radios">What kind of problem?</label>
<div class="col-md-4">
<div class="radio">
<label for="radios-0">
<input type="radio" name="radios" id="radios-0" value="1">
Blocks
</label>
</div>
<div class="radio">
<label for="radios-1">
<input type="radio" name="radios" id="radios-1" value="2">
Commands / Command Blocks
</label>
</div>
<div class="radio">
<label for="radios-2">
<input type="radio" name="radios" id="radios-2" value="">
Entities / Items
</label>
</div>
<div class="radio">
<label for="radios-3">
<input type="radio" name="radios" id="radios-3" value="">
Other (describe in the next text field)
</label>
</div>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Describe the Problem</label>
<div class="col-md-4">
<textarea class="form-control" id="textarea" name="textarea"></textarea>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">What is the priority?</label>
<div class="col-md-6">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Huge! It breaks the map!</option>
<option value="2">Big</option>
<option value="">Noticeable</option>
<option value="">Barely Noticeable</option>
<option value="">Almost Hidden</option>
<option value="">I do not know</option>
</select>
</div>
</div>
<input type="submit" name="submit" value="Save Data">
</fieldset>
</form>
And here is my current PHP:
<?php
if(isset($_POST['field1']) && isset($_POST['field2'])) {
$data = $_POST['field1'] . '-' . $_POST['field2'] . "\n";
$ret = file_put_contents('mpr.txt', $data, FILE_APPEND | LOCK_EX);
if($ret === false) {
die('There was an error writing this file');
}
else {
echo "$ret bytes written to file";
}
}
else {
die('no post data to process');
}
?>
When I click "Save Data" in the form, it doesn't update my mpr.txt with the information. Please help.
I see 2 problems:
1) You have created 2 forms with
<form class="form-horizontal" role="form">
and
<form class="form-horizontal">
which should be 1
and
2) You are missing the action attribute in <form> tag i.e. it should be <form class="form-horizontal" role="form" action="<php file name>" method="<request type>">
correct these and I think you should be through.
You do not see the data in your .txt file because you do not have any field named field1 and field2 in your html page. The field names have to match in both html and php files to write/read the data correctly. Please correct the names and you should be through.
Also would appreciate if you accept the answer.
The answer is quit obvious! PHP is trying to find field1 and field2 posted. But in your HTML form you did not define these two properties, consequently PHP won't update the file!
EDIT:
If you submit the form and print_r($_POST) you will get the follow array:
Array ( [selectbasic] => 1 [textarea] => [submit] => Save Data )
As you see, there is no [field1] or [field2] in the response!
Which means PHP cannot proceed to to open and update the text file!
To prevent this, you should define field1 and field2 in your HTML form by adding these input tags or updating the existing ones.
For instance, if you are interested in the select tag and the textarea tag, you should whether update you HTML code or you php code.
You could go with PHP code by updating your if statement into if(isset($_POST['selectbasic'], $_POST['textarea'])) or in your HTML form change the name="selectbasic" into name="field1" and name="textarea" into name="field2 and keep your current php code and so your current PHP if statement that says: if(isset($_POST['field1']) && isset($_POST['field2']))
I hope this explains it all!
Lets say i have a form that asks for name and exam result. Id like to make the form disappear and display another div when the user hits submit.
heres the form code
<form action="exam.php" method="post" id = "coursedata" class="form-horizontal">
<fieldset>
<legend>Please Complete the Details</legend>
<div class ="form-group">
<label for="name" class="control-label col-xs-2">Student name</label>
<div class="col-xs-6">
<input type="text" name="name" id="name" size="20" class="form-control" autofocus required pattern = "[A-Z][a-z]+( [A-Z][a-z]+)?" title="Please enter a name (Surname optional) with First Letter capitalised">
</div></div>
<div class ="form-group">
<label for="CA1" class="control-label col-xs-2">Assessment One</label>
<div class="col-xs-6">
<input type="number" class="form-control" min = "0" max = "100"name="CA1" id="CA1" size="3" maxlength ="3" onkey ="limit(this);" onkeyup="limit(this);" required>
</div></div>
<div class="buttonarea">
<input type="submit" value="Submit" name = "Submit">
<input type="reset" value="Clear the Info">
</div>
</fieldset>
</form>
The shortest way (asuming that form and exam.php are the same files...):
<?php
if (!isset($_POST['Submit'])) {
?>
Your form code
<?php
}
else {
// form engine
echo "<div>SUCCESS</div>";
}
?>
Hope it helps :). PS. This is a strict answer to Your question, whether there are many other questions, like how to handle form, how to verify it, etc. But this is another side of answered coin ;). Best regards :).
Use jQuery for this (JavaScript library).
Copy this in your head section
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button[type="submit"]').click(function(){
$("#coursedata").hide();
return false;
})
})
</script>