I have a form in codeigniter where I've an option to show the data in the front page or not.
<div class="form-group input-group">
<label>Show in Front</label>
<input type="checkbox" id="switch-change" name="show-infront" checked data-on-text="YES" data-off-text="NO" checked data-on-color="success" data-off-color="warning">
</div>
<script type="text/javascript">
$("[name='show-infront']").bootstrapSwitch();
</script>
When I print the value of the form in controller like echo $this->input->post('show-infront'), when 'yes' is checked, the output is 'on' and when 'no' is checked, there is no any output. So, I want that when I check yes, then the value should be 'yes' and vice-versa.
try: onSwitchChange ...
OK so if checkbox in not checked not send its value in POST, so you need a hidden field like this:
also need set its value at init and onChange
<input type="checkbox" id="switch-change" name="show-infront" data-on-text="YES" data-off-text="NO" checked data-on-color="success" data-off-color="warning">
<input type="hidden" name="show-infront-val"/>
<script type="text/javascript">
var ckbox = $("[name='show-infront']");
var ckbox_val = $("[name='show-infront-val']");
ckbox.on('switchChange.bootstrapSwitch init.bootstrapSwitch', function(event, state) {
if (this.checked) ckbox_val.val('Yes')
else ckbox_val.val('No')
});
ckbox.bootstrapSwitch('state', true);
</script>
Btw if you check php-s isset($_POST['show-infront']) also a good option for one checkbox
Documentation
Related
Need to check format of the value of a textfield inside the Javascript.
I am using thymeleaf for rendering the page.
To achieve this I plan to use th:id and use this inside Javascript (similar to document.getElementById and read the value. But I donot know how to get the value of the textfield inside the javascript as I am doing an iteration..
Below is the scenario
While iterating through a Map<String,Field> (where Field is a class containing two elements fieldValueList (List) and timeField(boolean) check for the format of the textField entered in the page, (format of the textfield should be hh:mm:ss) need to be done in javascript. I used id for reading the value, but donot know how to get the value of the textfield inside the javascript.
The code for the page is
<fieldSet th:each="fieldKey,fieldKeyIndex : *{recipeFieldMap.keySet()}">
<div class="fieldDiv" th:each="fieldVal,field : *{recipeFieldMap[__${fieldKey}__].fieldValueList}">
<span class="fieldSpan" th:if="*{recipeFieldMap[__${fieldKey}__].timeField}">
<input type="text" th:id="|text_${fieldKeyIndex.index}_${field.index}|" th:field="*{recipeFieldMap[__${fieldKey}__].fieldTimeValueList[__${field.index}__].displayStr}" onchange="checkTimeStr()">
<script th:inline="javascript">
/*<![CDATA[*/
function checkTimeStr() {
// Something like this.. to read the value
//var value = document.getElementById('/* text_${groupKeyIndex.index}_${field.index} */').value;
//alert(value)
}
/*]]>*/
</script>
</span>
<span class="fieldSpan" th:unless="*{recipeFieldMap[__${fieldKey}__].timeField}">
<input type="text" th:field="*{recipeFieldMap[__${fieldKey}__].fieldValueList[__${field.index}__]}">
</span>
</div>
</fieldSet>
enter image description here
try this:
<script th:inline="javascript">
[[${field.index}]]
</script>
I have an input field which is start_time and end_time and these fields are formatted with the data-format HH:mm:ss PP.
What I want to do is when the user is done entering the data, then I'll do some AJAX to calculate the time.
But, I'm a little bit confused because I don't know what is the proper event for the input fields. I tried keydown,keyup,focus but still doesn't work.
Here is the input field start_time:
<div class='input-append' id='datetimepicker2'>
<input data-format='HH:mm:ss PP' type='text' name="start_time" id="start_time" value="<?php echo set_value('start_time')?>"/>
<span class='add-on'>
<i data-date-icon='icon-calendar' data-time-icon='icon-time'>
</i>
</span>
</div>
</div>
<script type='text/javascript'>
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true,
pickDate: false
});
});
</script>
And for the end_time:
<div class='input-append' id='datetimepicker3'>
<input data-format='HH:mm:ss PP' type='text' name="end_time" id="end_time" value="<?php echo set_value('end_time') ?>"/>
<span class='add-on'>
<i data-date-icon='icon-calendar' data-time-icon='icon-time'>
</i>
</span>
</div>
</div><script type='text/javascript'>
$(function() {
$('#datetimepicker3').datetimepicker({
language: 'en',
pick12HourFormat: true,
pickDate: false
});
});
</script>
Go for onblur, sothat when the user finish entering the data in input field and gets focus out of the field the event gets triggered.
edited according to comments below
I guess you are using bootstrap datepicker in your code. If not so, please mention the datpicker or the js library that you are using.
In the case of bootstrap date picker yu can look at the changedate event for your task which will get triggered each time a change is made on your datepicker value. Also you can check the changeYear && changeMonth events also which are available.
here is a demo fiddle using the code you provided which will trigger an alert whenever a change is made on the corresponding datepicker. You can replace it with whatever code you want to execute on change.
sample code snippet
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true,
pickDate: false
}).on('changeDate', function (e) {
alert("first one changed"); // replace with your code block
});;
The code for example document.getElementById("id").value="value"; is not working. I have assigned it on a function to replace the current value of the textbox once the page is loaded.
here is my code
<script type="text/javascript">
function rplace(){
document.getElementById('idtext').value="New Value";
}
onload=rplace
</script>
<form>
<input type="text" id="idtext" name="idtext" value="">
</form>
use jquery insteat of javascript.
$(document).ready(function(){ $("#idtext").val("New Value")});
Refer this
I have a page which uses ajax to submit a comment form, add it to a db, then redisplay the page, hopefully without reloading the page its on.
If I access the script on it's own it works great, yet when I load it into another page it doesn't add the data and also refreshes the page on submit, which I want to avoid, which is the whole point of doing things this way.
Anyway, here's how I load the page:
<div id="wall_comments" class="msgs_holder"></div>
<script type="text/javascript">
$('#wall_comments').load('/pages/comment.php', { wl_id:"<?=$wl_id?>" });
</script>
and then the page itself with jquery code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<div style="width:100%; overflow:auto;">
<form method=post>
<input type="text" class="inp" name="comment" id="comment">
<input type=submit value="do it" name="action" onclick="update()">
<input type=hidden name="wl_id" value="<?=$_REQUEST[wl_id]?>" id="wl_id">
<input type=hidden name="user_id" value="<?=$userfromcookie?>" id="user_id">
</form>
</div>
<script type="text/javascript">
function update(){
var wl_idVal = $("#wl_id").val();
var commentVal = $("#comment").val();
var user_idVal = $("#user_id").val();
$.ajax({
type: "POST",
url: "/pages/comment.php",
cache: false,
data: { submit: "", wl_id: wi_idVal, comment: commentVal, user_id: user_idVal }
});
}
</script>
And finally enter info into db (I know this should be mysqli and it will be)
if(isset($_POST['action'])){
$wl_id = mysql_real_escape_string($_POST['wl_id']);
$comment = mysql_real_escape_string($_POST['comment']);
$user_id = mysql_real_escape_string($_POST['user_id']);
$addcomment = mysql_query("insert into list_wall (
event_id,
user_id,
comment
) VALUES (
'$wl_id',
'$user_id',
'$comment'
) ",$db);
if(!$addcomment) { echo 'result error add comment'; echo mysql_error(); exit; } // debug
}
The problem is when you click the submit button, the page is submitted and the function update couldn't work. You have to cancel the default submit mechanism by using return false;
<input type=submit value="do it" name="action" onclick="update() return false;">
Another thing.
The onclick on the submitbutton will not work as excpected if the submit is caused without clicking the button.
For example mobile safari on iPhone can submit forms directly without triggering the button.
If you add UmairP's version of the onclick to the form element as an onsubmit method you should get the same result on every platform as far as I know.
You can see more details on iPhone forms in my own question on another issue.
How can I prevent the Go button on iPad/iPhone from posting the form
i'm learning it, but i cant find what's wrong in this!
i want the div2 to get data from the form in div1, called formulario.
i would like to know which item is selected and which button was clicked.
main html file:
<script src="utils/Scripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function sendf(formul, divi, php)
{
var params = Form.serialize($(formul));
new Ajax.Updater(divi, php, {method: 'post', parameters: params, asynchronous:true});
}
</script>
</head>
<body>
<div id="div1">
contenido div1
<form id="formulario" method="POST">
<select size="3" id="lista" onchange="sendf('formulario', 'div2', 'prodiv1.php');">
<option>elemento 1</option>
<option>elemento 2</option>
<option>elemento 3</option>
</select>
<input type="button" id="b1" value="bot1" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
<input type="button" id="b2" value="bot2" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
</form>
<div id="div2" style="background: blue;">
contenido div2
</div>
</div>
</body>
</html>
the php file, prodiv1.php:
<?
echo 'exec: prodiv1.php<br>';
print_r($_POST);
echo serialize($_POST);
if (isset($_POST))
{
foreach ($_POST as $key=>$value)
{
echo $key.'=>'.$value."<br>";
}
}
echo "select: ".$_POST['lista'];
if (isset($_POST['b1'])) {echo 'click: boton1';} else {echo 'click: boton2';}
?>
i've tried a lot of things, and seen that it could be done with event observers, httprequests and such, but what i need is quite easy, and probably there's an elegant way to solve it...
i thank in advance any help!
have a nice day.
guillem
if you dont need to actually process the form contents in some way then you have no need to use Ajax to pass to a PHP script. Depending on what exactly you wanted to display in div 2 you could do something as simple as this:
function sendf()
{
var listvar = $('lista').value;
$('div2').update('select menu value was ' + listvar);
}
This is obviously missing quite a lot of detail and can be massively improved but it should highlight the fact that AJAX is not required.
Edit Looking at the rest of the code you have posted, is AJAX really required for this? surely you are just updating the existing page with data already present on the page, the server has no real part to play in this?
Sorry to dive into jQuery again, but this should allow you to get the values into "div2" without an ajax request.
$(document).ready(function() {
$("input").click(function(e) {
$("#div2").html($(this).attr("id")+" clicked<br />");
updateList();
});
});
function updateList() {
$("#div2").append($("#lista").val() + " selected");
}
In plain English this code says "if an input element is clicked, update the value of div2 with the input variables id, and append the selected value from the list to the result". Hopefully that makes sense to you :)
If you need an easy, elegant way to solve this with AJAX, use the jQuery library's ajax and post methods. For more information take a look here, it will significantly cut down on the size and complexity of your code.