I currently have the following form :
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
<label for="categorie"> Tipul testului</label><br>
<select name="categorie" class="selectpicker">
<option value="1">Geometrie</option>
<option value="2">Algebră</option>
</select><br><br>
<label for="cerinta"><span class="glyphicon glyphicon-pencil"></span> Cerinţă</label>
<textarea type="text" class="form-control" id="cerinta" name="cerinta" placeholder="Cerinţă"></textarea>
<br>
<label for="rezolvare"><span class="glyphicon glyphicon-pencil"></span> Rezolvare</label>
<textarea type="text" class="form-control" id="rezolvare" name="rezolvare" placeholder="Rezolvare"></textarea>
<br>
<label for="nr_raspunsuri"><span class="glyphicon glyphicon-pencil"></span> Număr de raspunsuri</label>
<select class="selectpicker" name="nr_raspunsuri">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<table class="table">
<tr>
<td class="col-md-6">
<button type="submit" class="btn btn-success btn-block" name="btn-add"><span class="glyphicon glyphicon-off"></span> Adăugare</button>
</td>
<td class="col-md-6">
<input type = "reset" class="btn btn-danger btn-block " label="Resetare"/>
</td>
</tr>
</table>
</form>
What I am trying to do is to set a variable named $nr_raspunsuri to 1 or 2, depending on the selection of the user without refreshing the page.
For example, if he selects 2 in the second select field, I want to set the variable $nr_raspunsuri = 2, so I can show one more input field in the form with an if in php. I think this can only be accomplished with AJAX. Is it true? If yes, how would you do it?
Your if in php will not run again until the page is reloaded. You can achieve it by toggling the view with javascript - when option with value 1 is selected from first select hide the element which shouldn't be seen, if option with value 2 is selected show it. You can achieve it using change event.
Related
I'm creating a form where the user can add their modules that they study at university. When they click the button, it adds a new set of fields for another module. I've added a click listener to the button #add and I'm trying to append the form #input_form with the same fields:
<form id="input_form">
<h6>Add modules below...</h6>
<div class="form-row">
<div class="col-md-6">
<input type="text" class="form-control" name="module_name" placeholder="Module Name">
</div>
<div class="col-md-6">
<input type="text" class="form-control" name="module_code" placeholder="Module Code">
</div>
</div>
<div class="form-group col-md-6">
<label for="credit_entry"># of Credits: </label>
<input type="number" name="credits" id="credit_entry">
</div>
<div class="form-group col-md-6">
<label for="colour_selector">(Optional) Choose a Colour: </label>
<select id="colour_selector" name="colour_select">
<option value="blue">Blue</option> <!-- Default -->
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
</select>
</div>
</div>
<div class="row">
<button name="add" id="add" class="btn btn-secondary">Add Another</button>
</div>
// Add fields dynamically
$("#add").click(function() {
$("#input_form").append("<h1>The fields will go here</h1>");
});
When I click the button, I see the content (the h1) added for a split second but then it disappears. I am not sure why the appended HTML won't stay on screen. I have another part of this project which works similarly and appends to a ul list and the HTML is persisting on screen for that just fine, but for some reason this won't.
I'm pretty new to web design and jQuery so sorry if there's an easy answer that I'm missing.
"If the element has a form owner, the element must submit the form owner from the button element." (w3.org)
That means, any button inside a form executes submit() on its parent form.
To prevent that, explicitly define the button type as button:
<button name="add" type="button" id="add" class="btn btn-secondary">Add Another</button>
In action:
https://codepen.io/akamichael/pen/NWqgaWz?editors=1010
qr.php
<form id="contactForm" class="forma" method="post">
<h1 id="datah1">Your data</h1>
<div class="formcontainer">
<hr class="hr3"/>
<div class="container">
<label for="uname" id="fullnameofres"><strong>Full name of your restaurant</strong></label>
<input type="text" name="textfieldtest" id="user_value" placeholder="Full name of your business.." name="user_value" required>
<label for="psw"><strong>Number of tables</strong></label>
<input type="text" id="nr_tables" placeholder="How many tables you have..." name="nr_tables" required>
<hr class="hr1">
<div id="templatesDiv">
<label for="psw"><strong>Template</strong></label>
<button id="tmplt_btn" onclick="go_to_templates_grid()" style="margin-bottom: 15px">Click here for all templates </button>
</div>
<div>
You selected : <b> <span id="templateResult" name="templateResult"> </b>
</div>
<hr class="hr2">
<label for="psw"><strong>Do you have menu</strong></label>
<!-- <input type="text" id="menu_choice" placeholder="Yes/No" name="menu_choice" required> -->
<select name="menu_dropdown" id="menu_dropdown">
<option value="None" selected disabled > Yes/No </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<button type="submit" id="submitara" name="submit">Submit</button>
</form>
Expected behaviour: The user fills in the fields, after clicking on 'Click here for all templates', another php file being opened, user is choosing Template, back to qr.php, submit form and that's all.
The problem is that all data which was typed in text fields being cleared after clicking on 'Click here for all templates'.
The default type for a button is submit, so when you click that button, you are submitting the form. Add: type="button" to the button code so that it will just run your function but not submit.
<button type="button" id="tmplt_btn"
onclick="go_to_templates_grid()"
style="margin-bottom: 15px">Click here for all templates </button>
so I have an issue with trying to figure out how to get this to work. I want to make a dropdown selection, and I want all the selections in the dropdown to show up in the main input box along with the original input value.
Here is my form that I am using to send the values to ajax to send to my php file.
<div class="input-group" id="adv-search">
<input type="text" name="input1" class="form-control" id="filter" id="searchbox" placeholder="Something..."/ required>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<h4 class="text-center">Advanced Search</h4>
<label for="filter">Option</label>
<select class="form-control" name="place" id="myList">
<option selected></option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
</div>
<div class="form-group">
<label for="contain">Location</label>
<input class="form-control" name="something1" type="text" id="list2">
</div>
<div class="form-group">
<label for="contain">Something2</label>
<input class="form-control" name="contain" type="text" id="list3">
</div>
<p><br/>
<button type="submit" id="insideButton" name="submit" class="btn btn-primary">Advanced Search</button>
</form>
</div>
<button type="submit" id="buttonClass" name="submit2" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
</div>
</div>
</div>
</div>
</div>
Now I'm trying to get the values from the select dropdown(#myList) and the other inputs(#list2, #list3) and display them in the main input(#filter) along with the value that was entered in (#filter). My code below will display them per keypress but it repeats it since its in the function. How do I get each input to display in the #filter input.
$('#list2').on("input", function(){
var filter = $(this).val();
var myList = $('#filter').val();
$('#filter').val(filter + " " + myList);
});
Here is a picture of what I would like to accomplish. Any and all help is greatly appreciated. Thank you.
hello If I am understanding correctly according to your image and your piece of code that you want to get the all option input value into the main search box if that so you can try this Jquery code
<script>
$(document).ready(function() {
$("#insideButton").click(function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
I just used one button as submit option you can change it as your wish
you can also write the same code if you want form submit option then there will be a slightly change
<script>
$(document).ready(function() {
$(".form-horizontal").on('submit',function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
hope it helps you can also check this fiddle
fiddle demo
I need one help.I need to set drop down value as blank after finishing one action using Angular.js.I am explaining my code below.
<div style="height:270px; overflow-x:hidden; overflow-y:scroll;" ng-show="viewOrderTable">
<div class="table-responsive dashboard-demo-table">
<select class="form-control" id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)">
<option value="">Select Status</option>
<option value="In-progress">IN-PROGRESS</option>
<option value="Dispatch">DISPATCH</option>
<option value="Delivered">DELIVERED</option>
<option value="canceled" ng-if="p.pro_status =='Ordered' && p.pro_status=='In-progress'">CANCELED</option>
<option value="Returned" ng-if="p.days <= 48 && p.pro_status=='Delivered'">RETURN</option>
</select>
</div>
</div>
from the above list when user is selecting DISPATCH the below form is opening.
<div class="" ng-show="viewDispatch">
<div style="padding-bottom:20px;">
<div class="col-md-6">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth" style="width:120px; text-align:left;">Dispatched Date& Time :</span>
<div class="datepicker" date-format="dd-MM-y h:mm:ss" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input type="text" name="dispatch_date" class="form-control" id="dispatch_date" ng-model="dispatch_date" placeholder="Add Dispatched Date& Time" ng-change="clearField('dispatch_date');" />
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="col-md-12 text-right">
<button type="button" class="btn btn-success" ng-click="addDispatchData();">Submit</button> <button type="button" class="btn btn-danger" ng-click="clearDispatchData();">Back</button>
</div>
</div>
</div>
The controller side code for this action is given below.
$scope.changeOrderStatus=function(orderid,email,prodataid,order_status,hour){
if(order_status=='Dispatch'){
$scope.viewOrderTable=false;
$scope.viewDispatch=true;
pro_dataId=prodataid;
order_Id=orderid;
dStatus=order_status;
email=email;
}
}
When user is clicking on back button its again coming to its original state but drop down DISPATCH option is displaying where i need to reset the drop down list again.
$scope.clearDispatchData=function(){
$scope.viewOrderTable=true;
$scope.viewDispatch=false;
$scope.order_status='';
}
I did like above but its not resetting .Please help me to resolve this issue.
You can use ng-init for this in your html file
<select class="form-control" id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)" ng-init='order_status == 0'>
May be digest issue you can try using $timeout so you should inject $timeout in your controller before use.
$scope.clearDispatchData=function(){
$timeout(function() {
$scope.viewOrderTable=true;
$scope.viewDispatch=false;
$scope.order_status='';
});
}
I've one HTML form. This form is containing HTML table. The actual HTML table is very large. For your reference I'm showing below the HTML code of a form with tablw containing only two records:
<form action="rebates.php" role="form" method="post">
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer </label>
<div class="col-lg-7">
<select id="company_name" name="company_name" class="form-control">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<label for="product_id" class="col-lg-3">Product </label>
<div class="col-lg-7">
<select id="product_id" name="product_id" class="form-control">
<option value="" selected='selected'>Select Product</option>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
</select>
</div>
</div>
</div>
</div>
<br/>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
<button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
<br/>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle" >Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody>
<tr id="Row2">
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Units
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Microsecond</li>
<li>oz</li>
<li>ml</li>
<li>L</li>
<li>gms</li>
</ul>
</div>
</td>
<td>
<input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
</td>
</tr>
<tr>
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
</tr>
</tbody>
</table>
<button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="button" class="btn btn-default">Go Back</button>
<button type="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
I'm dynamically appending rows to the table by clicking on a button(the button is present in a tag, you can see in above code). The jQuery code I writen for adding rows dynamically is as follows:
/*JQuery for appending rows at the end of table*/
<script language="javascript">
$( document ).ready(function() {
$('.btnAdd').click(function () {
var count = 1,
first_row = $('#Row2');
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
while (count-- > 0) first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
});
});
</script>
Now the issue I'm facing is if I append one or more rows at the end of table, fill data in the textfields from each appended row and submit the form by clicking on Submit button, in $_POST I'm not able to get the data from appended rows. I'm getting the data only from the rows which are previously present when the page loads. So can anyone help me in getting the values from the dynamically appended rows also?
The HTMl code of dynamically appended table row is as follows:
<tr>
<td>
<input class="form-control" type="text" size="8" value="" name="pack[]">
</td>
<td>
<input class="form-control" type="text" size="8" value="2" name="quantity[]">
</td>
<td>
<input class="form-control" type="text" size="8" value="750" name="volume[]">
</td>
<td>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
Units
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
Microsecond
</li>
<li>
oz
</li>
<li>
ml
</li>
<li>
L
</li>
<li>
gms
</li>
</ul>
</div>
</td>
<td>
<input class="form-control" type="text" size="9" value="3.00" name="amount[]">
</td>
</tr>
Well, you have done the right thing. Please see the name field of your input element.
<input type="text" name="pack[]" value="" class="form-control" size="8"/>
Please notice the name="pack[]" using an array of name as input. If you have cloned the table, the input element will be cloned. Since you aren't using an id, it's not a problem.
Now, when sending the data, in rebates.php check if the form data is present. It can be done by checking up the request method. It's a secure way. Once the check has succeeded, you can check if the field is present
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// handle the fields
$packs = null;
if (isset($_POST['pack']) {
$packs = $_POST['pack'];
}
}
Please notice that you are using pack without the [] to get input data from pack[] input fields. The variable $pack will contain an array. If you want to check the content, use var_dump($pack);. It should reveal all data from the available pack[] elements, either added dynamically or statically.
Then, if you have collected all data, you have to loop through it. It can be done with either for- or foreach-loop.
if ($packs != null) {
foreach($packs as $pack) {
// use the field $pack to do something
echo 'amount of pack : ' . $pack;
}
}
Do the same for other name fields which is also from array.
From jQuery Doc:
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.
You are cloning table row with #Row2 id. To avoid it:
first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
Alternatively, you could do something like...
while (count-- > 0) first_row.clone().appendTo('#blacklistgrid').attr('id','Row' + $('#blacklistgrid tr').length);