Get and submit multiple selection buttons values range - javascript

I'm trying to submit multiple buttons and use them as range selectors.
In page1.php I have $array of years 1980, 1990, 2000, 2010, ... which range is updated by database content:
<form method="post" action="page2.php">
<?php
foreach ($array as $item) {
?>
<input type="submit" name="<?= $item ?> " class="button" value="<?= $item ?> " />
<?php
}
?>
</form>
this way I can't click two buttons one after another to set the range, for example from 2000 to 2010, and submit only after this action.
I've tried JavaScript function with onclick without the post method, which counts clicks and pushes two (first and second) clicks values as range to the resettable $rangeval array before if (count == 2) condition comes true, passing values to second JavaScript function request(input) from page1.php using ajax, requesting page2.php with if (isset($_POST['val1']) && isset($_POST['val2'])) and echo json_encode($array);, which returns an array as the result variable with JSON.parse(res) back to page1.php.
As PHP runs on the server, I can't process the JavaScript Ajax response array as PHP array in page1.php.
So, I'm trying to find some correct method to archive this result.
Any advice, guide, or example would be useful.

Buttons in a form and with type="submit" will immediately submit the form. So buttons are not the correct candidate here.
I would recommend using two <select> elements where in you loop over the $array to create the options.
<form method="post" action="page2.php">
<select name="range_start">
<?php foreach ($array as $item) : ?>
<option value="<?= $item ?>"><?= $item ?></option>
<?php endforeach; ?>
</select>
<select name="range_end">
<?php foreach ($array as $item) : ?>
<option value="<?= $item ?>"><?= $item ?></option>
<?php endforeach; ?>
</select>
<input type="submit" class="button" value="Submit values" />
</form>
When submitting read out the name attributes that the <select> elements have in the $_POST array.
<?php
if (isset($_POST['range_start']) && isset($_POST['range_end'])) {
$range_start = $_POST['range_start'];
$range_end = $_POST['range_end'];
}

Related

how to retain drop down values as the value selected after submit

My drop down is showing blank then when i select the value of dropdown the same value is showing, but i have to show dropdown value as select first then when I click on button the respective value should show
I am doing a Php program
<form class="form-horizontal" name="form" method="post" action="<?php $_PHP_SELF?>">
<label for="courseDisp" class="col-sm-2" style="margin-top:10px;">Course : </label>
<?php
$course="SELECT * from course";
$res= $conn->query($course);
if($res->num_rows>0)
{
echo '<select name="courseDisp" id="courseDisp" class="form-control col-sm-3" style="margin-top:8px;display:inline;padding:10px;">';
echo '<option value="0" selected> -- SELECT --</option>';
while($row=$res->fetch_assoc())
{
echo '<option value='.$row["course_id"].'>'.$row['shortname'].'</option>';
}
echo '</select>';
} else {
echo "0 result";
}
?>
<label for="yearDisp" class="col-sm-2" style="margin-top:10px;">Year : </label>
<?php
$year="SELECT distinct(year) from syllabus";
$res= $conn->query($year);
if($res->num_rows>0)
{
echo '<select name="yearDisp" id="yearDisp" class="form-control col-sm-3" style="margin-top:8px;display:inline;padding:10px;">';
echo '<option value="0">-- SELECT --</option>';
while($row=$res->fetch_assoc())
{
echo '<option value='.$row["year"].'>'.$row['year'].'</option>';
}
echo '</select>';
} else {
echo "0 result";
}
?>
<script type="text/javascript">
document.getElementById('courseDisp').value = "<?php echo $_POST['courseDisp'];?>";
document.getElementById('yearDisp').value = "<?php echo $_POST['yearDisp'];?>";
<input type="submit" class="btn col-sm-2" style="margin-left:15px;margin-top:10px;width:60px;font-weight:bold;font-size:15px;" value="GO" name="btnGo" id="btnGo" />
</form>
I think you are doing it in a wrong way:
your code should look like this
<script type="text/JavaScript">
var valueSelected=document.getElementById('course').value;
alert(valueSelected);// do here according to the need
</script>
This is because there is no $_POST variables present before you submit a form.
$_POST variables can only be 'accessed' whenever a POST form is submitted, so when the form is not submitted, $_POST['course'] will be undefined. If you want to use persistant, but also relative variables, use $_GET.
This can be done the following way:
<script type="text/javascript">
document.getElementById('course').value =<?php echo $_GET['course'];?>";
</script>
(this will cause an error if value is not set, make sure to make exceptions for that, using if statements in PHP)
but the value also needs to be fetched from the URL.
so your url needs to have ?course=<course_value> in it, for example:
https://example.com/index.php?course=Course%201
Click here for more about POST vs GET requests
Instead of setting the value with javascript, you should directly write the selected attribute.
<select name="course">
<?php foreach ($options as $key => $value): ?>
<option value="<?= $key ?>"<?php if ($key == $_POST['course']) echo " selected" ?>>
<?= $value ?>
</option>
<?php endforeach; ?>
</select>
If you have to do this in javascript, keep sure, you use the correct syntax. Your example has a wrong " at the end of the line. Also you should use json_encode, if you want to output vars into javascript. And a last thing - if you don't put this inside the document ready event, the script has to be placed after the select element, which you wan't to manipulate
<select name="course">...</select>
...
<script type="text/javascript">
document.getElementById('course').value = <?= echo json_encode($_POST['course']) ?>;
</script>
Needed to keep the <option value="">-Select-</option>

How to fetch multiple dropdowns selected value into a single array using JavaScript

I am trying to fetch values of drop-downs into a node-list having dynamically using a JavaScript. In this code all the drop down have created dynamically and entering the value in a single node-list array. But my query is how to use dynamically. Can anyone suggest me.
please help..
thanks for advance...
<?php
$j=1;
$proQuery=$this->db->query("select * from tbl_subcategory where category_id='$getInv->catg_id' and whr_to_use='for bom'");
foreach($proQuery->result() as $proRow){
?>
<tr>
<th style="width:200px"><?php $techQuery=$this->db->query("select * from tbl_technical_category where sub_catg_id='$proRow->subcategory_id'");
//echo $proRow->subcategory_id;
$i=1;
foreach($techQuery->result() as $techRow){//echo $techRow->techcategory_id;
?>
<select name="tech_prod" id="tech_prod<?=$j."^".$i;?>" class="form-control" required onchange="raptoit(this.id)" <?php if(#$_GET['view']!=''){ ?> disabled="disabled" <?php }?>>
<option value="" selected disabled><?php echo $techRow->tech_catg_name;?></option>
<?php $contQuery=$this->db->query("select * from tbl_technical_product where technical_sub_type='$techRow->techcategory_id'");
$k=1;
foreach($contQuery->result() as $contRow){
?>
<option value="<?php echo $contRow->technical_pro_id; ?>"><?php echo $contRow->tech_pro_name; ?></option>
<?php $k++;} ?>
</select><?php $i++;}?>
<input type="text" id="techId<?=$j;?>" name="techId[]" value="" readonly="" class="form-control">
</th>
</tr>
<?php $j++;}?>
<script>
function raptoit(d){
var zz=document.getElementById(d).id;
//alert(zz);
var myarra = zz.split("^");
var asx= myarra[1];
var asx11= myarra[0];
var value=asx11.split("tech_prod");
var mainId=value[1];
//alert(mainId);
// all select element.
var merge=document.getElementById(asx11+"^"+asx).value;
//alert(dropValue);
// convert nodeList to array
var nodesArray = [].slice.call(document.querySelector("select"));
//alert(nodesArray);
var result = nodesArray.map(select => {return select.value;}).join(',');
alert(result);
document.getElementById("techId"+mainId).value=result;
}
</script>
I have not looked in depth into your code but from a mere glance it seems you are doing it all wrong.
To get the items from the list and parse them on the server side. You should use ajax to communicate between the server and frontend. Look at this https://www.w3schools.com/php/php_ajax_php.asp

Create form inside for loop

I'm using codeignitor and am very new to it so sorry in advance if the question is senseless,but i'm stuck with certain requirement while coding.I have a for loop as below:
<?php foreach($messages as $req):?>
//This loop will execute depending on number of rows and is working fine.
<?php echo form_open('message/addFrom_masterlist','id="myform"'); ?>
//form is having input fields.
<?php echo form_close();?>
\\this acts as a submit button to my form which submits the form using javascript.
<input type="button" name="button" id="b1" class="btn btn-primary" onclick="myFunction1()" value="Submit"/>
<?php endforeach; ?>
//Below is javascript code for from submit.
<script>
function myFunction1() {
document.getElementById("myform").submit();
}
the problem is i want the id name for form to be unique since each time a button is clicked same form is being submitted.I don't want to use the submit button inside the form.Please someone help me
use this code
<?php foreach($messages as $req):?>
<?php $count = 1; ?>
//This loop will execute depending on number of rows and is working fine.
<?php echo form_open('message/addFrom_masterlist','id="myform$count"'); ?>
//form is having input fields.
<?php echo form_close();?>
\\this acts as a submit button to my form which submits the form using javascript.
<input type="button" name="button" id="b1" class="btn btn-primary" onclick="myFunction<?php echo $count; ?>()" value="Submit"/>
<?php $count++; ?>
<?php endforeach; ?>
//Below is javascript code for from submit.
<?php
$arrayCount = count($messages);
if(!empty($arrayCount)){
for($i=1; $i<= $arrayCount; $i++){
?>
<script>
function myFunction<?php echo $arrayCount; ?>() {
document.getElementById("myform<?php echo $arrayCount; ?>").submit();
}
</script>
<?php
}
}
?>
Hope this will help you!!
Note: But the your concept like this is not good.

How to make HTML form fields automatically change when an option selected on a select field

Let's say I have a form like this in my CodeIgniter project.
<?php echo form_open(); ?>
<select>
<?php foreach($status_list as $status): ?>
<option value="<?php echo $status->id; ?>"><?php echo $status->name; ?></option>
<?php endforeach; ?>
</select>
<!-- Show this only if status type is, let's say "E" -->
<input type="text" name="E_happened">
<!-- Show this only if status type is, let's say "S" -->
<input type="text" name="S_happened">
<?php echo form_close(); ?>
What I want to do is if an user select one status, according to the it's type, show a text field to get an input.
I've made a way to get a type of the status like this: http://localhost/myapp/index.php/status/type/{status_id} where users can pass status ID and it will "echo" the type of the status.
I want to receive it back to the HTML page via a JavaScript method and show those text input fields. How do I do that?
Thank you. :)
As you have jQuery tag, so i suggest you this:
$('select').change(function(){
var inp = this.value.trim();
$(this).parent().find('input[type="text"][name^="'+inp+'"]').show().siblings(':text').hide();
});
I have posted the sample flow as per you want to do. hope this will helpful for you.
PHP:
<?php echo form_open(); ?>
<select>
<?php foreach($status_list as $status): ?>
<option value="<?php echo $status->id; ?>"><?php echo $status->name; ?></option>
<?php endforeach; ?>
</select>
<!-- Show this only if status type is, let's say "E" -->
<input type="text" id="E_happened" name="E_happened">
<!-- Show this only if status type is, let's say "S" -->
<input type="text" id="S_happened" name="S_happened">
<?php echo form_close(); ?>
JAVASCRIPT :
$('select').change(function(){
var statusId = $(this).val();
var statusType = $.get("http://localhost/myapp/index.php/status/type/"+statusId);
if(statusType == 'E')
{
$('#E_happened').value("what do you want here");
}
if(statusType == 'S')
{
$('#S_happened').value("what do you want here");
}
});

multiple JS form submit on change inside a PHP while

I have a while in PHP that is building a table. Inside my while, I have a dropdown menu that I want to execute code on change.... The form submit on change doesn'T work...
This is my code:
<?
while ($data2 = mysql_fetch_array( $data))
{ ?>
<form name="FormSize" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<td>
<select name="size[]" class="form-field3" OnChange="document.FormSize.submit();" >
<? foreach ($sizearray as $value) { ?>
<option value="$value" <? if($data2['size'] == $value) { echo "selected";} ?> ><? echo $value; ?></option>
<? } ?>
</select>
<input type="hidden" name="product_id[]" value="<? echo $data2['product_id']; ?>">
</td>
</form>
<? } ?>
and on top of my page, I have this to execute the code..
<?
//submit size form
if (isset($_POST['size']))
{
foreach($_POST['product_id'] as $key => $id)
{
$product_id = $id;
$newsize = $_POST['size'][$key];
$sql3 = mysql_query("update cart SET size = '".$newsize."' where product_id = '".$product_id."' ");
}
?>
any idea why it's not executing ?
You have multiple forms with the same name="FormSize". So document.FormSize will be an array-like object, and you need to access the appropriate one. You can do this by using this.form to refer to the <form> that contains the <select>.
You also need to fix the element nesting -- the <form> has to be inside the <td>, not the other way around.
<?
while ($data2 = mysql_fetch_array( $data))
{ ?>
<td>
<form name="FormSize" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<select name="size[]" class="form-field3" OnChange="this.form.submit();" >
<? foreach ($sizearray as $value) { ?>
<option value="$value" <? if($data2['size'] == $value) { echo "selected";} ?> ><? echo $value; ?></option>
<? } ?>
</select>
<input type="hidden" name="product_id[]" value="<? echo $data2['product_id']; ?>">
</form>
/td>
<? } ?>
Could be because the html is not valid, you cannot put your form tag as a direct child of a tr.
Apart from that, naming all your forms the same will make it pretty hard to submit a specific one by its name.
As you are using arrays for your input names, I assume that you mean all of them to be in the same form, so you should just have your form wrap the table and take it out of the while loop.

Categories