Aloha, I'm trying to develop a slider bar that has 3 words that you can choose from. But I'm not able to save the words as letters, all I get is number either 1,2 or 3 :(
Here's the code I have and also a picture:)
<form action="something.php" method="post" id="form">
<input type="range" min=1 max=3 step=1 name="slider">
<div id="text">
<span > Bad </span>
<span> Ok </span>
<span> Good </span>
</div>
<input type="submit" value="next" id="but"/>
</input>
</form>
So this code shows the slider bar and letters at the top (which works with my css), but when I click "Submit", on the following page (using php) I get 1, 2 or 3.
But it should be Bad, Good or Good. I'm sure that the problem is in the HTML code.
Why not just assign the numerals to values when you process the submission?
if(isset($_POST['slider'])) {
$array[1] = 'Bad';
$array[2] = 'Ok';
$array[3] = 'Good';
// This is a simplified output, but this is essentially
// the easiest way
echo $array[$_POST['slider']];
}
There is two manner to do what you want :
1 - html + javascript :
You should add a hidden input in your form which before submitting your form you give it a value among the three : Bad, OK, Good according to the value of your slider.
2 - php :
<?php
$slider_index = intval($_POST['slider']);
$word = '';
switch ($slider_index) {
case 1:
$word = 'Bad';
break;
case 2:
$word = 'OK';
break;
case 3:
$word = 'Good';
break;
}
?>
This is not possible by using html only.
You could create a hidden input field and a "change" event handler on the range input field. The event handler sets the value of the hidden input field to the label corresponding to the selected number (1: bad, 2: ok, 3: good).
Example:
<form action="something.php" method="post" id="form">
<input type="range" min=1 max=3 step=1 name="slider" id="slider">
<input type="hidden" name="sliderLabel" id="sliderLabel" />
<div id="text">
<span > Bad </span>
<span> Ok </span>
<span> Good </span>
</div>
<input type="submit" value="next" id="but" />
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function() {
// function to update the value of the hidden field
updateSliderLabel = function() {
var selectedValue = $('#slider').val();
var selectedLabel = $('#text > span').eq(selectedValue-1).text();
$('#sliderLabel').val(selectedLabel);
}
// when slider is changed, call the update function
$('#slider').on('change', function() {
updateSliderLabel();
});
// when page is loaded, call the update function
updateSliderLabel();
})();
</script>
The advantage of this solution is, you can easily adopt your labels in the html code, you don't need to modify your php logic.
Related
A few friends and I are trying to do a minor IoT project, where the controls are handled on a website, to be used on mobiles.
So basically, we have a range slider, used to control the desired temperature in a room. An Arduino does the actual handling of the temperature from there. We have got hold on the database, communication between Arduino and database, but we can't handle this problem ourselves.
We found the javascript code, (as seen below) on here.
Right now, the sliders work fine and shows the value selected. What we want is to format the number so it shows 1 decimal and includes the ending " °C" So in stead of "26" it shows "26.0 °C".
I have excluded the non-important classes related to bootstrap in the HTML-code below, to give a better overview.
HTML
<div>
<form method="post">
<span class="valueSpan"></span>
<input id="slider11" name="temp_sub" value="<?php echo $temp; ?>" step="0.5" type="range" min="10" max="35" />
<button type="submit">Submit</button>
</form>
</div>
Javascript
<script>
$(document).ready(function() {
const $valueSpan = $('.valueSpan');
const $value = $('#slider11');
$valueSpan.html($value.val());
$value.on('input change', () => {
$valueSpan.html($value.val());
});
});
</script>
Photo:
Use toFixed() and add ºC
$(document).ready(function() {
const $valueSpan = $('.valueSpan');
const $value = $('#slider11');
$valueSpan.html($value.val());
$value.on('input change', () => {
$valueSpan.html((+$value.val()).toFixed(1) + 'ºC');
}).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<form method="post">
<span class="valueSpan"></span>
<input id="slider11" name="temp_sub" value="20" step="0.5" type="range" min="10" max="35" />
<button type="submit">Submit</button>
</form>
</div>
I'm trying to add/remove items dynamically but I can't take the values of all the elements of the array.
Basically I have this form
<form action="" method="post">
<div class="input_fields_wrap">
<div>
<label> <span>Team name </span>
<input type="text" class="input-field" name="teams[]"> </label>
</div>
</div>
<span id="num_teams"></span> <label><span> </span>
<input type="submit" value="Add Team" class="add_field_button" name="add_field_button">
<input type="submit" name="next" value="Next" />
</label>
</form>
It just shows an input box where I'd have to insert the team name and two buttons ; one to go to the next page, and the other one to add a new text field using jquery.
Here it is the jquery script
<script type="text/javascript">
$(document).ready(function() {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
var max_fields = $('#n_teams').val(); //maximum input boxes allowed
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><label><span>Team Name </span><input type="text" class="input-field" name="teams[]"> Delete</label></div>'); // add input box
$("#num_teams").html('Number of Teams: '+x);
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('label').remove(); x--;
$("#num_teams").html('Number of Teams: '+x);
})
});
</script>
The script above works perfectly: it adds and removes textfields.
The problem that I have now is that I can't take the values of the array 'teams[]' .
in a
if(isset($_POST['next']))
even if I try to take the values manually like
echo $_POST["teams"][0]; and
echo $_POST["teams"][1]; ect...
It just takes the first value (i.e. the one I don't add using jquery). It doesn't 'see' the jquery text fields added.
Of course my final aim is to insert 'teams[]' in a mysql table, but for now I noticed that I can't either take the values.
Where am I wrong ?
EDIT - SOLVED
It was a very stupid error I made in the html code. Actually there was a <div> before of the <form> that caused all the troubles. After a very accurate analysis , trying every single piece of code alone, I finally got that I just had to move the <form> above two <div> to make the code work.
I do apologize to everyone, silly me!
Instead of using name="teams[]" use name="teams" and on server side use:
$_POST['teams']
which should give you the comma separated list.
var wrapper = $(".input_fields_wrap").first();
I am trying to post hidden values using jquery, I have more than 2 groups of h2 tags which have 5 childrens 2 span 2 input hidden 1 input button and I fetch the values of spans into the hidden values and thats working fine, and after I am trying to $.post() values of input hidden using jquery but that is not working correct.
this is the structure.
<h2 style="color:green;">Domain <span class="domain">domain.org</span> is available.
<span class="domain_price">$9.95/year</span>
<input type="hidden" class="order_domain" name="order_domain" value="$9.95/year">
<input type="hidden" class="domain_name" name="domain" value="domain.org">
<input type="button" class="button3" value="Order Now">
</h2>
<h2 style="color:green;">Domain <span class="domain">domain.biz</span> is available.
<span class="domain_price">$9.95/year</span>
<input type="hidden" class="order_domain" name="order_domain" value="$9.95/year">
<input type="hidden" class="domain_name" name="domain" value="domain.biz">
<input type="button" class="button3" value="Order Now">
</h2>
<h2 style="color:green;">Domain <span class="domain">domain.net</span> is available.
<span class="domain_price">$9.95/year</span>
<input type="hidden" class="order_domain" name="order_domain" value="$9.95/year">
<input type="hidden" class="domain_name" name="domain" value="domain.net">
<input type="button" class="button3" value="Order Now">
</h2>
code
$(document).ready(function(e) {
$('input[type="button"]').on('click', function() {
domain_price = $(this).parents('h2').children('.domain_price').text();
$(this).siblings('.order_domain').val(domain_price);
order_domain = $('.order_domain').val();
domain = $(this).parents('h2').children('.domain').text();
$(this).siblings('.domain_name').val(domain);
domain_name = $('.domain_name').val();
//setTimeout(function(){
$.post('orderdomain.php',{order_domain:order_domain, domain:domain_name},function(data){
//});
},1000);
});
});
the problem is when I click the button to post the values from any other groups from first group, they posted empty values into the db.
and when I click the button from first group of h2 its posted correctly ito the db.
so why only the posted successfully into db from first group of h2?
why not working others if they posted first?
updated
its looks like
$form = '<input type="hidden" class="order_domain" name="order_domain">
<input type="hidden" class="domain_name" name="domain">
<input type="button" class="button3" value="Order Now">';
switch($tld) {
case '.com':
$msg .= "<h2 style='color:green;' >Domain <span class='domain'>$domain</span> is available. <span class='domain_price'>".$prices['.com']."/year</span> ".$form."</h2>";
break;
....
Your problem is that you select the correct values, then set the adjacent input fields to those values - this works fine.
Then you inexplicably try and reselect the values out of the input fields (incorrectly). This is all unnecessary as you select the correct values in the 1st place, simply use those values in your ajax data:
$(document).ready(function(e) {
$('input[type="button"]').on('click', function() {
domain_price = $(this).parents('h2').children('.domain_price').text();
$(this).siblings('.order_domain').val(domain_price);
//order_domain = $('.order_domain').val(); <-your error
domain = $(this).parents('h2').children('.domain').text();
$(this).siblings('.domain_name').val(domain);
//domain_name = $('.domain_name').val(); <- your error
//setTimeout(function(){
$.post('orderdomain.php',{order_domain:domain_price, domain:domain},function(data){
//});
},1000);
});
});
It is pointless to fill a hidden input with a value and get that value to post it via AJAX.
Just get the .text() straight away and post that. It is the same anyway.
$(document).ready(function (e) {
$('input[type="button"]').on('click', function () {
order_domain = $(this).parents('h2').children('.domain_price').text();
domain_name = $(this).parents('h2').children('.domain').text();
$.post('orderdomain.php', {
order_domain: order_domain,
domain: domain_name
}, function (data) {
// do something
});
});
});
$(document).ready(function(e) {
$('input[type="button"]').on('click', function() {
domain_price = $(this).parents('h2').children('.domain_price').text();
$(this).siblings('.order_domain').val(domain_price);
order_domain = $('.order_domain').val();// this always get the input value of the first group, so just use domain_price
domain = $(this).parents('h2').children('.domain').text();
$(this).siblings('.domain_name').val(domain);
domain_name = $('.domain_name').val();// same as before
$.post('orderdomain.php',{order_domain:order_domain, domain:domain_name},function(data){
});
});
My site structure consists on an index.php which is styled by a css file. It then includes the following php code in a separate file:
<?php include("globals.php"); ?>
<form action="<?php echo $website.$relative_string;?>" name="subscribe" onsubmit="javascript:return checkEmail(this);" method="post">
<div id="cell8" class="titlecell2"><h3>Email:</h3></div>
<div id="cell9" class="inputcell2">
<input type="text" class="inputfield2" name="email" value="Your Email..." id="email2" maxlength="255" onfocus="this.value='';">
</div>
<div id="cell10" class="textcell3">
<input name="group" type="hidden" id="group[]" value="<?php echo $group; ?>">
<input name="subscribe" id="sub" type="radio" value="true" checked>
</span>Subscribe </p>
</div>
<div id="cell11" class="buttoncell">
<button type="submit" name="Submit2" value="Join" id="submitButton2">
<span>OK</span>
</button>
</div>
<div id="cell8" class="textcell4">
<input type="radio" name="subscribe" id="unsub" value="false">
</span>Un-Subscribe </p>
</div>
</form>
It appears on screen with no problems in the correct layout as my css style sheet. What I would like this to do is when I select the "Subscribe" radio button the submit button text "OK" changes to "Join". When I click on the Unsubscribe button text "OK" or "Join" changes to "Leave".
I tried to make some code from research:
if(document.getElementById('sub').checked) {
document.write("<span>Join</span>"
}
else if(document.getElementById('unsub').checked) {
document.write("<span>Leave</span>)
}
I think this kind of worked in that it changed to Join (replacing the OK line, but obviously didn't update on clicking unsubscribe. I guess it would update on refreshing the page if my default wasn't join. I guess I need to do some form of onclick but then I have no idea how to adjust that span ok bit.
Please help?
Many thanks Chris
Here is a solution in plain JavaScript without jQuery. It avoids the unnecessary overhead.
This should work, but I haven't had a chance to test it:
var sub = document.getElementById('sub'); // Save element to a variable, so you don't have to look for it again
var unsub = document.getElementById('unsub');
var btn = document.getElementById('submitButton2');
sub.onchange = function() //When sub changes
{
if(sub.checked) //If it's checked
{
btn.innerHTML = "<span>Join</span>"; // Set button to Join
}
else // If not..
{
btn.innerHTML = "<span>OK</span>"; // Set button to OK
}
}
unsub.onchange = function() //When unsub changes
{
if(unsub.checked) //If it's checked
{
btn.innerHTML = "<span>Leave</span>"; // Set button to Leave
}
else // If not..
{
btn.innerHTML = "<span>OK</span>"; // Set button to OK
}
}
However, you should not do it like this.
You should combine the two radio buttons into a radio group.
In that case you will listen for radio group to change, get the value of the radio group, set button text according to the value.
if you label your <span>OK</span> to something like <span id="your_id">OK</span> then added a class to your radio button like this <input class="your_class" type="radio" name="subscribe" id="unsub" value="false"> them...
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#your_class").change(function () {
if ($(this).is(':checked')) {
$("#your_id").text('Join');
}else {
$("#your_id").text('Leave');
}
});
</script>
This was all written in the browser so let me know if there are any problems.
I am trying to submit a form with a couple of different inputs, which all work fine. However, one of the inputs is a textarea (sort of). I had to alter it into a content editable div, mainly because I created my own bold, italic and underline buttons which wouldn't work with normal textareas. The problem is that the form on submit is not sending the text to the php and i was wondering what i could do to get the value of the div in the php.
Here is the "textarea":
<div id="dash_new_shout_textarea" name="dash_new_shout_textarea"
class="dash_new_shout_textarea" contenteditable="true"
placeholder="Write your shout..." name="dash_new_shout_textarea"
value="<?php echo isset($_POST['dash_new_shout_textarea']) ?
$_POST['dash_new_shout_textarea'] : '' ?>"></div>
The form is just a normal form with method=post.
Here is the php:
$newShoutTextarea = $_POST['dash_new_shout_textarea'];
Thanks for the help
I would suggest that you follow the other answers and use jQuery, but since there is no jQuery tag in your question I suppose that I should provide a good non-jQuery solution for you.
HTML
<form onsubmit="prepareDiv()">
<div id="dash_new_shout_textarea" class="dash_new_shout_textarea" contenteditable="true" placeholder="Write your shout..." name="dash_new_shout_textarea" value="<?php echo isset($_POST['dash_new_shout_textarea']) ? $_POST['dash_new_shout_textarea'] : '' ?>"></div>
<input type="hidden" id="dash_new_shout_textarea_hidden" name="dash_new_shout_textarea" />
</form>
Javascript
function prepareDiv() {
document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}
Your PHP remains the same.
What you can do is this:
<div id="dash_new_shout_textarea"></div>
<input type="hidden" name="dash_new_shout_textarea" id="dash_new_shout_textarea_hidden" />
<script type="text/javascript">
setInterval(function () {
document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}, 5);
</script>
the problem is that a DIV is not a form element and cannot be posted. If you use some javascript, you could populate a hidden input field with the data and then receive it server side as POST variable
You can add a hidden input to your form and update it with jquery
<div id="dash_new_shout_textarea" name="dash_new_shout_textarea"
class="dash_new_shout_textarea" contenteditable="true"
placeholder="Write your shout..." name="dash_new_shout_textarea"
value="></div>
<form id="target" method="post" action="destination.php">
<input id="textarea_hidden" name="textarea_hidden" type="hidden" value="">
<input type="submit" value="Submit">
</form>
script
$("#target").click(function() {
$("#textarea_hidden").val($("#dash_new_shout_textarea").val());
});
What you can do is use jQuery for this.
DEMO HERE
Proper scenario would be:
*Get value from div and save it into hidden field. *
This has to be done when you submit form:
$(function () {
$("#send").on("click", function () {
$("#hiddenfield").val($("#dash_new_shout_textarea").text());
alert($("#hiddenfield").val());
$("form#formID").submit();
});
});