We Keep Coding

Loop through fields in a form

Assume I have a table. Each row contains form fields that can be populated or not by the user. I need to check that for each row either all the form fields are populated or none.
The html is this:
<tr class="riga_gar">
<td class="report">
<input type="hidden" id="crediti[<?php echo $i; ?>]" name="crediti[<?php echo $i; ?>]"
value="<?php echo $cred['id_cre']; ?>" >
<?php echo $cred['id_cre'] ?>
</td>
<td class="report gbv" data-gbv="<?php echo $cred['gbv_tot']; ?>">
<?php echo num2cur($cred['gbv_tot']); ?>
</td>
<td class="report">
<?php echo veicolo2name($cred['titolare'],$pdo); ?>
</td>
<td class="report">
<?php echo $cred['stato']; ?>
</td>
<td class="report">
<input class="input_field numerico" id="chiesto" type="text" name="garanzia[<?php echo $i; ?>]" value="<?php echo $chiesto; ?>">
</td>
<td class="report">
<select name="tipo_gar[<?php echo $i; ?>]">
<option value="">Scegli</option>
<?php foreach($tipo_gars as $tipo_gar){
echo '<option value="'.$tipo_gar['id'].'">'.$tipo_gar['descrizione'].'</option>';
}?>
</select>
</td>
</tr>
What I am trying to do is to check that for each row both the input and the select have a value or none.
I started with this js:
function ajax_submit(){
var submit_val=$("#garante").serialize();
dest="anagrafiche/new_garante1.php";
$('.riga_gar').each(function(i,obj){
if ($(this).val()!='') {
}
});
}
and I want to run this ajax function:
$.ajax({
type: "POST",
url: dest,
data: submit_val,
success: function(data){
data1=data.split("|");
if(data1[0]=="Successo"){
$("#spnmsg").fadeTo(200,0.1,
function(){$(this).removeClass().addClass("spn_success").html(data1[1]).fadeTo(900,1)});
}else if(data1[0]=="Errore"){
$("#spnmsg").fadeTo(200,0.1,
function(){$(this).removeClass().addClass("spn_error").html(data1[1]).fadeTo(900,1)});
}
},
complete: function(){
$.fancybox.close();
//setTimeout(function(){ $('.container').load('sofferenze/dashboard.php?from=<?php echo $id_soff ?>');},3000);
setTimeout(function(){
$('#upper').load('sofferenze/soff.php?soff=<?php echo $id_soff ?>');
$("#spnmsg").fadeTo(200,0.1,
function(){$(this).removeClass().addClass("spn_normal").html('Cruscotto della sofferenza <?php echo soff2name($id_soff,$pdo); ?>').fadeTo(900,1)});
},3000);
} //chiudo complete function
}); //chiudo $.ajax
only when:
at least one row have both values;
all the rows that have values have both of them;
but I get stuck at how to refer to the value of input and select in the each loop so that I can check my conditions.

I think this will help you. This will read each row and ignore your hidden field. Once code will find both values populated than validateForm variable will be true and will become false if in next row one value from both input or select will be empty.
$(document).ready(function(){
var validateForm = false;
var check = 0;
$("form").on('submit',function(){
$("tr").each(function(){
console.log($.trim($(this).find("input.input_field").val()) +", "+ $.trim($(this).find("select").val()));
if($.trim($(this).find("input.input_field").val()) != "" && $.trim($(this).find("select").val()) != ""){
validateForm = true;
}
else{
if($.trim($(this).find("input.input_field").val()) == "" && $.trim($(this).find("select").val()) != ""){
if(validateForm){
validateForm = false;
check = 1;
return false;
}
}
if($.trim($(this).find("input.input_field").val()) != "" && $.trim($(this).find("select").val()) == ""){
if(validateForm){
validateForm = false;
check = 1;
return false;
}
}
}
});
if(validateForm && check == 0){
validateForm = true;
}
else{
validateForm = false;
}
if(validateForm){
//call ajax
}
});
});
Demo:https://jsfiddle.net/87tkraas/

This is untested but how about something like this:
var allowSubmit = false;
$("form").on("submit", function(e) {
$("tr").each(function() {
var input = $(this).find("input").val();
var select= $(this).find("select").val();
if ((input == "" && select != "") || (input != "" && select == "")) {
return;
} else if (input != "" && select != "") {
allowSubmit = true;
}
});
if (allowSubmit == false) {
e.preventDefault();
}
});

Get selected value of a 2 dropdown items using jQuery

I am using the sql to retrieve the values for dropdown. I am only able to get only the 1st dropdownbox item. how do i get the second dropdown value. I am fetching the data from sql.
<label for="category">Category</label>
<select name="parent_cat" id="parent_cat">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label for="city">city</label>
<select name="city" id="city">
<?php while($row = mysql_fetch_array($query_parent1)): ?>
<option value="<?php echo $row['city']; ?>"><?php echo $row['city']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
and my jquery looks like below
$(document).ready(function(){
$("#parent_cat").change(function(){
var selectedCountry = $("option:selected").val();
alert("You have selected the Country - " + selectedCountry);
});
});
I am able to get the 1st dropdown value how can i also get the second dropdown value
$(document).ready(function(){
$("#city").change(function(){
var selectedCountry1 = $("option:selected").val();
alert("You have selected the city- " + selectedCountry1);
});
});
Can i know where i went wrong

Looks like you are trying to get the value of the selected city in the change event handler.
In the event handler this refers to the changed element, so you can just read the its value
$(document).ready(function () {
$("#city").change(function () {
var selectedCountry1 = this.value; //or $(this).val()
//if you want to get the text of the selected option
var text = $(this).find('option:selected').text(); //find the selected option inside the current select
alert("You have selected the city- " + selectedCountry1);
});
});
$(document).ready(function () {
$("#parent_cat").change(function () {
var selectedCountry = this.value; //or $(this).val()
alert("You have selected the Country - " + selectedCountry);
});
});
The problem with your code is $("option:selected") returns all the option elements which are selected, but when you use the getter .val() it will return only the value of the first selected option element's value, so you will be getting the same value everywhere.

you need to use
$(this).val();
instead of
$("option:selected").val();

Dynamically changing dropdown to textfield opencart

I am trying to change a drop down so that a user can add a custom input instead.
I am using VQMod and have currently set up a PHP array as follows:
<td><select name="electricColours">
<?php foreach (array("", "White", "Black", "Add Custom Colour..." ) as $eColours) { ?>
<?php if ($electricColours == $eColours) { ?>
<option value="<?php echo $eColours;?>" selected="selected"><?php echo $electricColours; ?></option>
<?php } else { ?>
<option value="<?php echo $eColours;?>"><?php echo $eColours; ?></option>
<?php }?>
<?php } ?>
<td class="left"><a onclick="AddCustomColour();" class="button"><?php echo "Add Custom Colours"; ?></a></td>
</select>
How would I be able to add new values to the eColours using the "Add Custom Colour..." so that the user inputs something and that colour is added on to the array.
I thought using Javascript so that it shows up as an alert and the user gets to choose their option would work however it keeps saying the variable is not defined.
<SCRIPT TYPE="text/javascript">
function AddCustomColour()
{
var colour=prompt("Please add custom colour","Silver");
var arrays = <?php echo json_encode($electricColours); ?>;
if (colour!=null)
{
electricColours.push(colour);
}
}
</SCRIPT>
Thanks

Use the DOM API:
var option = document.createElement("option");
option.setAttribute("value", value);
option.appendChild(document.createTextNode(value));
document.getElementById("the_select_element").appendChild(option);
Instead of:
document.getElementById("the_select_element")
You could do something like:
document.forms.the_form.electricColours

replace this code
<SCRIPT TYPE="text/javascript">
function AddCustomColour()
{
var colour=prompt("Please add custom colour","Silver");
var arrays = <?php echo json_encode($electricColours); ?>;
if (colour!=null)
{
electricColours.push(colour);
}
}
</SCRIPT>
With this Code
<script type="text/javascript">
function AddCustomColour()
{
var colour=prompt("Please add custom colour","Silver");
var ob = $("#electricColours");
if (colour!=null)
{
ob.prepend("<option value="+ val +">" + text + "</option>");
}
}
</script>

onClick event is not working in Safari but its working fine in IE/FF/Chrome/Opera browser

I am using JavaScript onClick event it's working good with IE/FF/Chrome browser but it not working for Safari browser.
The code which I am using are as follows:
heartSelectHandler = {
clickCount : 0,
action : function(select)
{
heartSelectHandler.clickCount++;
if(heartSelectHandler.clickCount%2 == 0)
{
selectedValue = select.options[select.selectedIndex].value;
heartSelectHandler.check(selectedValue);
}
},
blur : function() // needed for proper behaviour
{
if(heartSelectHandler.clickCount%2 != 0)
{
heartSelectHandler.clickCount--;
}
},
check : function(value)
{
alert('Changed! -> ' + value);
}
}
<select onclick="javascript:heartSelectHandler.action(this);" onblur="javascript:heartSelectHandler.blur()" id="heart" data-role="none">
<?php for ($i = 20; $i <= 150; $i++): ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endfor; ?>
</select>

Use onchange instead of onclick, as that will ensure that changes to selection purely via the keyboard will also trigger the event as expected (right?).
i.e. use:
onchange="javascript:heartSelectHandler.action(this);"
instead of:
onclick="javascript:heartSelectHandler.action(this);"

onchange event to handle URL redirect and form submit()

I have the form submission because it is a simple
onchange="submit();"
<div class="cities">Select City <form method="post" action="<?php echo $PHP_SELF;?>" style="float:right;"><select name="city_select" id="city_select" onchange="submit();"><option>-----</option>
<option value="Beijing" <?php if($_SESSION['city_selected'] == 'Beijing') { echo 'selected=selected';} else { echo ''; }?> >Beijing</option>
<option value="Shanghai" <?php if($_SESSION['city_selected'] == 'Shanghai') { echo 'selected=selected';} else { echo ''; }?> >Shanghai</option>
<option value="Guangzhou" <?php if($_SESSION['city_selected'] == 'Guangzhou') { echo 'selected=selected';} else { echo ''; }?> >Guangzhou</option>
<option value="Manila" <?php if($_SESSION['city_selected'] == 'Manila') { echo 'selected=selected';} else { echo ''; }?> >Manila</option>
<option value="HongKong" <?php if($_SESSION['city_selected'] == 'HongKong') { echo 'selected=selected';} else { echo ''; }?> >Hong Kong</option>
<option value="Tokyo" <?php if($_SESSION['city_selected'] == 'Tokyo') { echo 'selected=selected';} else { echo ''; }?> >Tokyo</option>
<option value="Seoul" <?php if($_SESSION['city_selected'] == 'Seoul') { echo 'selected=selected';} else { echo ''; }?> >Seoul</option>
<option value="Taipai" <?php if($_SESSION['city_selected'] == 'Taipai') { echo 'selected=selected';} else { echo ''; }?> >Taipai</option>
</select></form>
<div style="clear:both;"></div>
</div>
I'm trying to submit the form and also redirect to a url. I was wondering if this was possible. I've tried implementing a jquery $.change event but it didn't fire before the form submit()
if anyone could help, that would be fantastic. Thanks!

Just do it in php by:
header('Location: ' . the_url_to_redirect);

where is your submit function?
Can you try like this
<select name="city_select" id="city_select" onchange="this.form.submit();">
It should work

You have not shown what your submit function does, but if it does a normal form submission (not AJAX), then you will need to redirect at a later time.
Normally, you would have your form submit normally, and then when the next page loads, that page would set a 'Location' header telling the browser to redirect.
For example, in whatever PHP code runs when the form submits, you will need to redirect by doing this:
header('Location', 'http://mysite.com/page-to-redirect-to.php');

All you need is "Jquery Form Plugin"
http://jquery.malsup.com/form/#ajaxForm
With this plug-in the form submits to the 'action' address without leaving the page. When it's done you can redirect with the callback function.
<script>
$(document).ready(function(){
$('#FORM_ID').ajaxForm(function(data) {
window.location="http://www.REDIRECT_URL.com/";
});
});
</script>
If you need this onchange you can use this one :
<script>
$(document).ready(function(){
$('#FORM_ID').ajaxForm(function(data) {
window.location="http://www.REDIRECT_URL.com/";
});
$('#city_select').change(function(){
$('#FORM_ID').trigger('submit');
});
});
</script>

if(isset($_POST['city_select'])) {
$_SESSION['city_selected'] = $_POST['city_select'];
if($_POST['city_select'] == "Beijing") {
header("Location: /city-beijing/");
}
if($_POST['city_select'] == "Shanghai") {
header("Location: /city-shanghai/");
}
if($_POST['city_select'] == "Guangzhou") {
header("Location: /city-guangzhou/");
}
if($_POST['city_select'] == "Manila") {
header("Location: /city-manila/");
}
if($_POST['city_select'] == "HongKong") {
header("Location: /city-hong-kong/");
}
if($_POST['city_select'] == "Tokyo") {
header("Location: /city-tokyo/");
}
if($_POST['city_select'] == "Seoul") {
header("Location: /city-seoul/");
}
if($_POST['city_select'] == "Taipai") {
header("Location: /city-taipai/");
}
else{
}
}
this worked for me :), cheers.