I'm trying to loop over form fields and get the value.
What i'm expecting is "key=primary_account_id&value=123&key=primary_account_first_name&value=rose&key=primary_account_last_name&value=kent" and what I am getting from below code is "key=primary_account_id&value=123" thrice. Please let me know what am I missing. Thanks.
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_id" data-type="text">ID</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="123">
</div>
</div>
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_first_name" data-type="text">Primary First Name</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="rose">
</div>
</div>
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_last_name" data-type="text">Last Name</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="kent">
</div>
</div>
<script>
$('.search-field-form').each(function(){
console.log("key=" + $('.searchField').val() + "&value=" + $('.searchField').closest('.search-field-form').find('.search-text').find('input[name="search-value"]').val());
</script>
If you have a form, do below -
HTML
<form id="search-form">
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_id" data-type="text">ID</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="123">
</div>
</div>
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_first_name" data-type="text">Primary First Name</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="rose">
</div>
</div>
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_last_name" data-type="text">Last Name</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="kent">
</div>
</div>
<button type="button" id="submit-btn">Submit</button>
</form>
JS
<script>
$(function() {
$('#submit-btn').click(function() {
data = $('#search-form').serialize();
data = data.replace(/search-field/g, 'key');
data = data.replace(/search-value/g, 'value');
console.log(data);
});
});
</script>
If you don't have a form, follow Hairmot's answer.
Change $('.searchField') to $(this).find('.searchField')
Related
<div class="content">
<div class="row" style="margin-top: 27px;">
<div class="col-sm-2" style="width: 13%;">
<select id = "app" class="form_input_box">
<option value="" selected="selected">App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<select id = "app or not" class="form_input_box">
<option value="" selected="selected" hidden>App Type</option>
<option value="" selected>App Type</option>
<option value="1">App</option>
<option value="2">Not a App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;">
<select id = "dept" class="form_input_box">
<option value="" selected="selected">Department</option>
</select>
</div>
<div class="col-sm-1" style="margin-left: -25px;width: 12%;">
<input type="text" name="date_box" id="date_box" class="form_input_box filter_date" Placeholder="Created Date">
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<input type="text" name="search" id="search" class="form_input_box" Placeholder="Search">
</div>
<div class="col-sm-1" style="margin-left: -25px;">
<button id="erase" class="form-control btn btn-primary" name="erase">Clear values</button>
</div>
<div class="row">
<div class="col-sm-1">
<input type="month" id="month" name="month" class="form_input_box" placeholder="Month">
</div>
<div class="col-sm-2" style="right: 30px">
<button type="button" name="report" id="file" class="button">Report file</button>
</div>
</div>
</div>
</div>
i have html page with buttons drop downs like above i need to set a single button when i click on the button it will show all these things if i again click then these need to be hided how can i achieve this.
To solve the problem simply you could use javascript or jquery and hide or show the options based on the selected values...
$('idoption').hide();
$('idoption').show();
I am trying to check if all fields are filled when the form is being submitted. But I have noticed that, form without all filled fields is being sent. So, I started to investigate, and even with return false, which means that form is not sent, it is.
Here is the HTML code:
<form action="addproduct.php" onsubmit="checkinput()" method="post">
<style> <?php include 'css/addproduct.css'; ?> </style>
<div class="iRow">
<div class="lclass"> <label for="ProductSKU">Product SKU:</label> </div>
<div class="tclass"> <input type="text" name="ProductSKU"> </div>
</div>
<div class="iRow">
<div class="lclass"> <label for="ProductName">Product Name:</label> </div>
<div class="tclass"> <input type="text" name="ProductName"> </div>
</div>
<div class="iRow">
<div class="lclass"> <label for="ProductPrice">Product Price:</label> </div>
<div class="tclass"> <input type="text" name="ProductPrice"> </div>
</div>
<div class="iRow dvd">
<div class="lclass"> <label for="ProductSize">Product Size:</label> </div>
<div class="tclass"> <input type="text" name="ProductSize"> </div>
</div>
<div class="iRow book">
<div class="lclass"> <label for="ProductWeight">Product Weight:</label> </div>
<div class="tclass"> <input type="text" name="ProductWeight"> </div>
</div>
<div class="iRow furniture">
<div class="lclass"> <label for="ProductDimensions">Product Dimensions:</label> </div>
<div class="tclass"> <input type="text" name="ProductDimensions"> </div>
</div>
<div class="iRow">
<div class="lclass"> <label for="typeselector">Product Category</label> </div>
<div class="tclass">
<select id="typeselector" name="productoptions" onchange="selectorhandle()">
<option value=""></option>
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
<input type="submit" value="Add Product" >
<script>
<?php include 'js/addproduct.js'; ?> <!-- Adding this javascript for the dynamic form -->
</script>
</form>
And in addproduct.js I have:
function checkinput()
{
return false;
}
The root cause of the problem is in the call to the function by 'onsubmit' attribute
onsubmit="checkInput()" will only call the checkInput() function and submit form without waiting for the checkInput() to finish.
This behaviour of not waiting for a function / step to finish (Asynchronous nature) is inherent to javascript.
The problem can be fixed by explicitly using
onsubmit="return checkInput()"
instead of
onsubmit="checkInput()"
Working example for validating input using onsubmit:
<form action="addproduct.php" onsubmit="return checkInput()" method="post">
<!-- form fields here -->
</form>
<script>
function checkInput() {
if( all_input_is_Valid ) {
return true
}
return false
}
</script>
More information:
https://www.w3schools.com/js/js_validation.asp
<form action="addproduct.php" onsubmit="checkinput()" method="post">
<div class="iRow">
<div class="lclass"> <label for="ProductSKU">Product SKU:</label> </div>
<div class="tclass"> <input type="text" name="ProductSKU"> </div>
</div>
<div class="iRow">
<div class="lclass"> <label for="ProductName">Product Name:</label> </div>
<div class="tclass"> <input type="text" name="ProductName"> </div>
</div>
<div class="iRow">
<div class="lclass"> <label for="ProductPrice">Product Price:</label> </div>
<div class="tclass"> <input type="text" name="ProductPrice"> </div>
</div>
<div class="iRow dvd">
<div class="lclass"> <label for="ProductSize">Product Size:</label> </div>
<div class="tclass"> <input type="text" name="ProductSize"> </div>
</div>
<div class="iRow book">
<div class="lclass"> <label for="ProductWeight">Product Weight:</label> </div>
<div class="tclass"> <input type="text" name="ProductWeight"> </div>
</div>
<div class="iRow furniture">
<div class="lclass"> <label for="ProductDimensions">Product Dimensions:</label> </div>
<div class="tclass"> <input type="text" name="ProductDimensions"> </div>
</div>
<div class="iRow">
<div class="lclass"> <label for="typeselector">Product Category</label> </div>
<div class="tclass">
<select id="typeselector" name="productoptions" onchange="selectorhandle()">
<option value=""></option>
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
<input type="submit" value="Add Product" >
</form>
<?php echo '<script src="js/addproduct.js"></script>'; ?>
To verify function call, just add alert in addproduct.js
function checkinput() {
alert("Function called")
return false;
}
I have a requirement where i have to change the color of the row based on the onchange value in a dropdown. I have rows that are in the form of division. There are two main divisions which have rows in the form of division which were earlier two main tables.
Now when i change the value in the combo of a row in first division i want to change the color of the entire division row. Also with that i want to change the color of the row in the second main division as well. I could easily do it with tables but with division i am finding it difficult and also i am not sure about feasibility. Below is my code structure and my JQuery which i used for changing color.
$('#bodyLeft tr').bind('click', function(e) {
var bodyLeftTable = $("#bodyLeft tr").index(this);
var vehicleClassVal = $("#bodyLeft tr:nth-child(" + bodyLeftTable + ")").find('.vehicleClass').val();
if (scheduleStatusVal == 'Volvo') {
$("#bodyLeft tr:nth-child(" + bodyLeftTable + ")").addClass("runningVehicleClass");
$("#bodyRight tr:nth-child(" + bodyLeftTable + ")").addClass("runningVehicleClass");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--First Division-->
<div id="bodyLeft">
<div class="divTableRow">
<div class="divTableCell divWidth">
<select class="vehicleClass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="divTableCell divWidth">
<input type="text" name="address">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="pass">
</div>
</div>
<div class="divTableRow">
<div class="divTableCell divWidth">
<select class="vehicleClass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="divTableCell divWidth">
<input type="text" name="address">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="pass">
</div>
</div>
</div>
<!--Second Division -->
<div id="bodyRight">
<div class="divTableRow">
<div class="divTableCell width20">
<input type="text" name="parts">
</div>
<div class="divTableCell width85">
<input type="text" name="ischecked">
</div>
<div class="divTableCell width85" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="validity">
</div>
</div>
<div class="divTableRow">
<div class="divTableCell divWidth">
<input type="text" name="parts">
</div>
<div class="divTableCell divWidth">
<input type="text" name="ischecked">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="validity">
</div>
</div>
</div>
So, #bodyLeft tr targets what exactly?
I can's see a tr anywhere in there.
I am assuming you need to bind click to #bodyLeft.vehicleClass?
In your JS code, check every selector and make it match the structure in the HTML.
Or post a relevant code of a table where it should target.
EDIT: I just read text again and noticed you used to use table. Yeah, definitely rewrite your query selectors. Both in JS you posted and in other code and don't forget to check CSS as well while you are at it.
Following could be one of the solution following your approach.
$('#bodyLeft .divTableRow').bind('click', function(e) {
var curRow, curSelect, nextRow, nextSelect;
curRow = $( this );
curSelect = curRow.find('select.vehicleClass');
nextRow = curRow.next();
nextSelect = nextRow.find('select.vehicleClass');
// Following are sample stuff
// replace with your actual stuff
curRow.css('background-color', 'yellow');
curSelect.css('background-color', 'yellow');
nextRow.css('background-color', 'cyan');
nextSelect.css('background-color', 'cyan');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bodyLeft">
<div class="divTableRow">
<div class="divTableCell divWidth">
<select class="vehicleClass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="divTableCell divWidth">
<input type="text" name="address">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="pass">
</div>
</div>
<div class="divTableRow">
<div class="divTableCell divWidth">
<select class="vehicleClass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="divTableCell divWidth">
<input type="text" name="address">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="pass">
</div>
</div>
</div>
<!--Second Division -->
<div id="bodyRight">
<div class="divTableRow">
<div class="divTableCell width20">
<input type="text" name="parts">
</div>
<div class="divTableCell width85">
<input type="text" name="ischecked">
</div>
<div class="divTableCell width85" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="validity">
</div>
</div>
<div class="divTableRow">
<div class="divTableCell divWidth">
<input type="text" name="parts">
</div>
<div class="divTableCell divWidth">
<input type="text" name="ischecked">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="validity">
</div>
</div>
</div>
HTML:
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>
How to replace col-md-6 with col-md-4 inside div id payment_group by using jQuery? Sorry for my weak English.
Normally, you could simply do this:
$('#payment_group .col-md-6').toggleClass('col-md-6 col-md-4');
//Or
$('#payment_group .col-md-6').addClass("col-md-4").removeClass("col-md-6");
The toggle option is not the best, it will add a class if it does not exist and remove it if it does... It's a bit more concise tough...
<div id="payment_group">
<div class="col-md-6" id="changeclass">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
add one id named="changeclass" for col-md-6 div
then in jquery
$("#changeclass").toggleClass('col-md-4');
You can use $("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6")
Working demo
$("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6")
console.log("elements with class col-md-4: " + $("#payment_group .col-md-4").length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>
Use addClass() and removeClass()
$("#payment_group .col-md-6").addClass('col-md-4').removeClass('col-md-6')
.col-md-4 {
color: red
}
.col-md-6 {
color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>
You can set the class regardless of what it was.
$("#payment_group .col-md-6").attr("class", "class-name-you-want-to-assign");
$("#payment_group").find(".col-md-6").addClass("col-md-4");
$("#payment_group").find(".col-md-6").removeClass(".col-md-6");
Try with this one
$( "#payment_group div:first-child" )
$( this ).removeClass( ".col-md-6" );
$( this ).addClass( ".col-md-4" );
});
Thanks
Try this to remove the class
$(selector).removeClass(classname,function(index,currentclass))
And to add
$(selector).addClass(classname,function(index,currentclass))
You can check w3schools site here.
and for add class, check this.
I think this will going to help u as well !
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#payment_group .col-md-6').toggleClass('col-md-6 col-md-4');
});
</script>
</head>
<body>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>
<button id="gete">Submit</button>
</body>
</html>
You can use jQuery's addClass and removeClass for this:
$('#payment_group').addClass("col-md-4").removeClass("col-md-6");
I want to add the following div structure whenever the '+' button [the addMore() function] is clicked. Although i am able to add the div structure, but the alignment of the input text are not equal as compared to the hard coded.
html file:
<form class="align-center">
<p class="6u 12u$(medium)">
Start Date: <input type="date" name="startdate" id="startdate" />
End Date: <input type="date" name="enddate" id="enddate" />
</p>
<p>
<div class="6u$ 12u$(xsmall)"><input type="text" name="numParticipants" id="numParticipants" value="" placeholder="Number of Participants"/></div>
</p>
<p>
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<div>OR</div>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Venue" />
</div>
</div>
</div>
</p>
<p>
<div class="row" id="newProg">
</div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()"><div style="font-size: 35px">+</div></a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()"><div style="font-size: 35px">-</div></a>
</div>
</div>
<div class="2u 12u$(medium); image right">
Submit
</div>
</p>
</form>
main.js
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.setAttribute('class', 'row');
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <input type="text" value="" placeholder="Customize your own programme"/> </div> <div class="3u$ 12u$(medium)"> <input type="text" value="" placeholder="Venue" /> </div> ';
document.getElementById('newProg').appendChild(objNewDiv);
}
Result when page is loaded:
when page loaded
Actual and Expected result:
actual and expected outcome
You have differenc in the class names of the div tags which you are appending in jquery.
Make it same as the Static HTML content, And the expected result will be achieved.
Differences I see is as below.
Static HTML has - <div class="3u 12u$(medium)"> ,Your Jquery HTML has - <div class="5u 12u$(medium)">
Static HTML has - <div class="3u 12u$(medium)">, Your jquery HTML has - <div class="5u 12u$(medium)">
Static HTml has - <div class="2u$ 12u$(medium)">, Your Jquery HTML has <div class="3u$ 12u$(medium)">
Because of the differences in the class names you find the differences in the way its rendered in the UI.
You missed one of your divs in JavaScript inner HTML string. I think it should be like this:
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div> <div class="3u$ 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Venue" /> </div> </div> ';