I have the following code that:
check the relevant checkbox if the user input a value in a text input
verify if user input is duplicated, alert and focus the text input where user inserted the wrong value
This is my code:
$('.seq').blur(function(){
if($(this).val()!=''){
$(this).closest(".percheckbox").find("input:checkbox:first").prop("checked", true);
if ($('.seq').not(this).val() == $(this).val()) {
alert('Duplicated entry. Change it please.');
console.log($(this).attr('name'));
$(this).focus();
}
}else if ($(this).val()=='') {
$(this).closest(".percheckbox").find("input:checkbox:first").prop("checked", false);
}
});
The only point that is not working is $(this).focus(); even if console.log shows that 'this' is the right element.
EDIT: this is the html:
<div class="sez-form">
<fieldset>
<legend>Messaggi inclusi</legend>
<?php $i = 0; foreach($msgs as $msg) { ?>
<div class="percheckbox">
<input class="checkseq" type="checkbox" name="messaggio[<?php echo $i; ?>]" value="<?php echo $msg['id']; ?>">
<?php echo $msg['nome']; ?>
<br>
<label>Ordine: </label><input class="seq" size="2" maxlength="2" type="text" name="ordine[<?php echo $i; ?>]">
</div>
<?php $i += 1; } ?>
<br style="clear: both;">
</div>
Sorry for the wrong code formatting but I still have some problems with stackoverlow text editing.
Your code does work actually, check this fiddle: http://jsfiddle.net/6pbx2yof/
Check if none of your other code interfers with it. I'd remove everything else and check if it works, then piece by piece re-add your other code.
Stackoverflow doesn't let me answer without code so here is the html code I used (JS Code is unchanged)
<div class="sez-form">
<fieldset>
<legend>Messaggi inclusi</legend>
<div class="percheckbox">
<input class="checkseq" type="checkbox" name="messaggio0" value="0"/>
0
<br>
<label>Ordine: </label>
<input class="seq" size="2" maxlength="2" type="text" name="ordine0"/>
</div>
<div class="percheckbox">
<input class="checkseq" type="checkbox" name="messaggio1" value="1"/>
1
<br>
<label>Ordine: </label>
<input class="seq" size="2" maxlength="2" type="text" name="ordine1"/>
</div>
</fieldset>
<br style="clear: both;">
</div>
Related
I have a page with two registration forms individual and business type and individual type form is set as default the other form is hidden, it works fine. but when I switch it to second form and click on submit button it submits second form but returns to first form after submition even on errors it return to first form.
I want it to stay on second form on errors and after submition.
Here is my php :
if (isset($_POST["btnRegister"])) {
echo "Done";
}elseif (isset($_POST["btnbusiness"])) {
echo "Done";
}
HTML and js codes in my page:
function swapConfig(x) {
var radioName = document.getElementsByName(x.name);
for(i = 0 ; i < radioName.length; i++){
document.getElementById(radioName[i].id.concat("Settings")).style.display="none";
}
document.getElementById(x.id.concat("Settings")).style.display="initial";
}
<div class="col-10 clmiddle">
<label for="production"><b>Individual</b></label>
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="production" checked="checked" />
<label for="development"><b> Business</b></label>
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="development" />
</div>
First Form :
<div id="productionSettings" class="col-12">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnRegister" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
Second Form :
<div id="developmentSettings" style="display:none" class="col-12">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnbusiness" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
EDIT: I changed JS to php, Here is the solution.
PHP codes (which get url):
$path = $_SERVER['REQUEST_URI'];
$Aurl = explode(",",$path);
for ($i=0; $i<count($Aurl);$i++){
$Burl = str_replace("?", "/", trim($Aurl[$i]));
}
$url = htmlspecialchars(basename($Burl));
$FormPostUrl = basename($path);
Html part :
Checkbox :
<div class="col-10 clmiddle" style="margin-top: 20px;">
<label for="production"><b>Individual</b></label>
<input type="checkbox" value="<?php echo htmlspecialchars("register.php"); ?>" name="checket"
onClick="if (this.checked) { window.location = this.value; }" <?php if($url === htmlspecialchars("register.php")){ echo 'checked="checked"';}?>>
<label for="development"><b>Business</b></label>
<input type="checkbox" value="<?php echo htmlspecialchars("register.php?business");?>"
name="checket"
onClick="if (this.checked) { window.location = this.value; }" <?php if($url === htmlspecialchars("business")){ echo 'checked="checked"';}?>>
</div>
First Form :
<?php if($url === htmlspecialchars("register.php")){?>
<div id="productionSettings" class="col-12">
<form action="<?php echo htmlspecialchars($FormPostUrl); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnRegister" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
Second form:
<?php } elseif($url === htmlspecialchars("business")){ ?>
<div id="developmentSettings" class="col-12">
<form action="<?php echo htmlspecialchars($FormPostUrl); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnbusiness" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
<?php } ?>
You can use PHP to control whether display:none is added to your divs or not. Use an if statement (or a ternary operator might be neater syntax in the context) to make the decision about what to echo. Since the default is to display the production settings form, we only need to check whether the other form has been submitted or not, in order to know whether to change that.
e.g. something like this (untested):
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="production" <?php echo (isset($_POST["btnRegister"]) ? "" : 'checked="checked"'); ?> />
and
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="development" <?php echo (isset($_POST["btnRegister"]) ? 'checked="checked"' : ""); ?> />
and
<div id="productionSettings" class="col-12" <?php echo (isset($_POST["btnbusiness"]) ? "style='display:none'" : ""); ?>>
and
<div id="developmentSettings" class="col-12" <?php echo (isset($_POST["btnbusiness"]) ? "" : "style='display:none'"); ?>>
P.S. Unless you've massively simplified these forms for the purpose of your example, they appear to be basically identical. It's questionable whether you actually need two separate forms at all. The only difference appears to be the choice between "individual" and "business" - that could be handled by a single form with a radio button to choose the type, which would then simplify how you handle the postback as well, and reduce the amount of duplicated code and HTML. Of course if you're actually capturing more distinct fields for these forms than you've shown, then these remarks don't really apply.
I need to create jQuery validation form if text field is empty then came the warning.
This is my code:
<form action="" method="POST">
<input type="checkbox" name="dropshiper_ceck" id="id_dropshiper_ceck">
<label><b><?php echo $text_dropship; ?></b></label>
<div class="" id="id_dropshiper_form" name="dropshiper_form">
<hr/>
<p>
<?php echo $text_dropship_name; ?>
</p>
<input type="text" name="nama_dropshiper" style="width: 97%" placeholder="<?php echo $text_add_name_dropshiper; ?>" id="id_nama_dropshiper" value="">
<br/>
<br/>
<p>
<?php echo $text_dropship_telp; ?>
</p>
<input type="text" name="nomor_telp" style="width: 97%" placeholder="<?php echo $text_add_number_phone_dropshiper; ?>" id="id_nomor_telepon_dropshiper" value="">
</div>
</form>
$('#id_dropshiper_ceck').change(function(){
// Check the textbox when the checkbox is checked
if ($('#id_dropshiper_ceck').prop('checked') == true){
if ($('#id_nama_dropshiper').val() == ""){
// alert message
alert('Warning Message');
}
if ($('#id_nomor_telepon_dropshiper').val() == ""){
// alert message
alert('Warning Message');
}
}
})
I guess you wanna check the textbox when the checkbox is clicked.
I generate table from database, assign each cell as checkbox value, group each row as form and display them all as table refer to [this].1 How I can get particular cell value when i click on the button since each form (row) have a same id. I want to pass the value as query parameter to update the database table. I have searched for similar technique and still not find the solution.
This code is within a cursor fetching loop:
<form class="tr" id="barisn" method="post" action="">
<span class="td"><input type="checkbox" name="id" value="<?php $data[0]?>"/><label for="id"><?php echo $data[0]?></label></span>
<span class="td"><input type="checkbox" name="name" value="<?php $data[1]?>" /><label for="name"><?php echo $data[1]?></label></span>
<span class="td"><input type="checkbox" name="gender" value="<?php $gender?>" /><label for="gender"><?php echo $gender?></label></span>
<span class="td"><input type="checkbox" name="sender" value="<?php $data[8]?>" /><label for="sender"><?php echo $data[8]?></label></span>
<span class="td"><input type="checkbox" name="date" value="<?php $data[5]?>" /><label for="date"><?php echo $data[5]?></label></span>
<span class="td"><input type="checkbox" name="time" value="<?php $data[6]?>" /><label for="time"><?php echo $data[6]?></label></span>
<span class="td"><input type="checkbox" name="state" value="<?php $state?>" /><label for="state"><?php echo $state?></label></span>
<div class="td">
<button class="btn-rawuh" type="submit" form="barisn" value="Rawuh">Rawuh</button>
<button class="btn-tundha" type="submit" form="barisn" value="Tundha">Tundha</button>
<button class="btn-mlebet" type="submit" form="barisn" value="Mlebet">Mlebet</button>
</div>
</form>
You have to put anchor tag instead of button like this
Edit
when you click on edit button then page will redirect to edit.php(you have to create new php file) then get the id from url :
echo $_GET method
then u will get the details of that particular row using id (using query).
I am trying to modify a joomla component and more specific a questionnaire that contains radio buttons. In php file the code is :
<form id="form-table" action="<?php echo JRoute::_('index.php?option=com_bisbas&task=table.save'); ?>" method="post" class="form-validate" enctype="multipart/form-data" target="iframe1">
<ul>
<input type="hidden" name="jform[id]" value="<?php echo $this->item->id; ?>" />
<input type="hidden" name="jform[state]" value="<?php echo $this->item->state; ?>" />
<?php echo $this->form->getInput('timecreated'); ?> <div class="control-group"><br><br><br>
<div class="control-label"><?php echo $this->form->getLabel('question1'); ?></div>
<div class="controls"><?php echo $this->form->getInput('question1'); ?></div><br><br>
and in firebug code is :
<div class="controls">
<fieldset id="jform_question1" class="radio" aria-required="true" required="">
<input id="jform_question10" type="radio" aria-required="true" required="" value="Yes" name="jform[question1]">
<label for="jform_question10">Yes</label>
<input id="jform_question11" type="radio" value="No" name="jform[question1]">
<label for="jform_question11">No</label>
<input id="jform_question12" type="radio" value="I am not sure" name="jform[question1]">
<label for="jform_question12">I am not sure</label>
</fieldset>
</div
I want when the user clicks the answer of radio button to check the value and print an alert. But I don't know how to do this in php file. I understand that
<div class="controls"><?php echo $this->form->getInput('question1'); ?></div>
prints the radio values based in an xml file that contains the values but how can I get them and check the value when the user selects it?
If I well understood your query I think that You must use javascript.
If your Joomla version is above 3.0, You can do it with jQuery :
jQuery('#radio_selector').on('click', function(){//verification script});
Actually, I have many checkboxes and textfields coming from database through single code. I need that when I check a particular checkbox, then a textfield in front of that checkbox to become editable. How can I do that ?
Here is my PHP code
<div class="my"><?php
while ($ass = mysql_fetch_array($rs)) {?>
<input type="checkbox" name="fees_name[]" id="fee_name" value="<?php echo $ass['fees_name']; ?>" onclick='toggleReadonly(this)'>
<?php echo $ass['fees_name']; ?>
<div style="padding:0px 10px 0px 0px; float: right;">
<input id="fee_amt" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" >
</div> <br><br><?php
}?>
</div>
and my Javascript
$(document).ready(function(){
$('#fee_name').click(function() {
$('#fee_amt').prop('disabled', !$(this).is(':checked'));
});
});
but it worked on only the first checkbox. Anyone can tell my what can i do for others???
All your text fields that are enabled/disabled have the same id. Try to set a different id inside the loop and in your javascript enable the one according to the checkbox that is checked.
Another way (without using ids) is to set the data attribute in each checkbox:
<div class="my">
<?php $i = 1; ?>
<?php while ($ass = mysql_fetch_array($rs)) { ?>
<input type="checkbox" name="fees_name[]" class="fee_name" data-mycheckbox="<?php echo $i; ?>" value="<?php echo $ass['fees_name']; ?>" onclick='toggleReadonly(this)'>
<?php echo $ass['fees_name']; ?>
<div style="padding:0px 10px 0px 0px; float: right;">
<input id="fee_amt<?php echo $i; ?>" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" >
</div> <br><br><?php
$i++;
}?>
</div>
And in your js script:
$(document).ready(function(){
$(".fee_name").click(function(event) {
var identifier = $(this).data('mycheckbox');
var input_identifier = "#fee_amt" + identifier;
$(input_identifier).prop('disabled', !$(this).is(':checked'))
});
});
solution by #eyetea also solves the problem with your non-unique ids.
just in case you don't want to rely on any ids:
$(document).ready(function(){
$('input[name="fees_name\\[\\]]"').click(function() {
$(this).next().children(':first').prop('disabled', !$(this).is(':checked'));
});
});
note that this sort of selecting the elements heavily relies on your dom structure and has to be changed accordingly when your html changes.
Here is the working code what you need,
$( "input[type=checkbox]" ).on( "click", function(){
if($(this).is(':checked')) {
$(this).next().prop('disabled', false);
} else {
$(this).next().prop('disabled', true);
}
});
HTML
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br/>
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br/>
<input type="checkbox" name="fees_name[]" >
<input type="text" disabled="disabled" /><br />
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br />
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" />
JSFIDDLE
If you need to give name then you could use input[name='fees_name[]']as,
$( "input[name='fees_name[]']" ).on( "click", function(){
if($(this).is(':checked')) {
$(this).next().prop('disabled', false);
} else {
$(this).next().prop('disabled', true);
}
});
JSFIDDLE
Use the following code-
<div class="my"><?php
$i=0;
while ($ass = mysql_fetch_array($rs)) {$i++;?>
<input type="checkbox" name="fees_name[]" id="fee_name[<?php echo $i?>]" value="<?php echo $ass['fees_name']; ?>" onChange='if(this.checked){toggleReadonly(this,true);} else{toggleReadonly(this,false)}'>
<?php echo $ass['fees_name']; ?>
<div style="padding:0px 10px 0px 0px; float: right;">
<input id="fee_amt[<?php echo $i?>]" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" readonly>
</div> <br><br><?php
}?>
JavaScript code
function toggleReadonly(chk_element, status)
{
chk_element_no=chk_element.id.substring(chk_element.id.indexOf('[')+1, chk_element.id.indexOf(']'));
txt_element_id="fee_amt["+chk_element_no+"]";
if(status==true)
document.getElementById(txt_element_id).readOnly=false;
else
document.getElementById(txt_element_id).readOnly=true;
}
check this fiddle.
Check the following similar sample code and execute it-
1.php
<html>
<head>
<script>
function toggleReadonly(chk_element, status)
{
chk_element_no=chk_element.id.substring(chk_element.id.indexOf('[')+1, chk_element.id.indexOf(']'));
txt_element_id="fee_amt["+chk_element_no+"]";
if(status==true)
document.getElementById(txt_element_id).readOnly=false;
else
document.getElementById(txt_element_id).readOnly=true;
}
</script>
</head>
<body>
<div class="my"><?php
$i=0;
while ($i++<=10) {?>
<input type="checkbox" name="fees_name[]" id="fee_name[<?php echo $i;?>]" value="<?php echo $i; ?>" onChange='if(this.checked){toggleReadonly(this,true);} else{toggleReadonly(this,false)}'>
<?php echo $i; ?>
<div style="padding:0px 10px 0px 0px; float: right;">
<input id="fee_amt[<?php echo $i;?>]" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" readonly>
</div> <br><br><?php
}?>
</div>
</body>
</html>