I have my code with a form.
I validate this with a javascript function sub().
When validation successful inside the javascript function i post to a php file by $.POST.
I can fetch the name field by its id name.
But I cant fetch the Cities as it has multiple value.
I am using jquery asmselect for multiple selection.
Can any one help me to fetch the multiple values of cities.
I tried by its id but failed to do.
Plz help me.............
My javascript code
<link rel="stylesheet" type="text/css" href="../jquery.asmselect.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript" src="jquery.asmselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select[multiple]").asmSelect({
addItemTarget: 'bottom',
animate: true,
highlight: true,
sortable: true
});
});
</script>
<script type="text/javascript">
function sub(){
var udt;
var name = document.getElementById('name').value;
var cities = document.getElementById('cities').value;
if(name!=""&&cities!=""){
udt ="name="+name+"&cities="+cities;
$.post( "submit.php", udt, function( data ) {
window.location.href = "/";
});
return false;
} else {
alert("Please, Complete the Registration Form...");
return false;
}
}
</script>
My html code is below
<form action="" onsubmit="return sub()" method="post">
<input type="text" id="name" name="name"/>
<select id="cities" multiple="multiple" name="cities[]" title="Select City">
<option>Paris</option>
<option>San Diego</option>
<option>San Francisco</option>
<option>Vancouver</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>
Plz help me to solve my problem.
I can not find any solution. So I post this question here, thanks.
Try this (add whatever delimiter you want):
cities = '';
$("select[multiple] option:selected").each(function(){
cities += $(this).val() + '|';
});
Related
I am trying to pass the value of currentDate to a REST GET service when Submit button is clicked. Here I don't understand two things.
Whether I can put REST service URL on action attribute of form tag this way.
Whether I can pass currentDate var value to the web service as a parameter this way.
$(function() {
$("#datepicker").datepicker();
});
$(document).ready(function() {
$("#submit1").click(function() {
var currentDate = $(".selector").datepicker("getDate");
$("#testForm").submit();
});
});
<body>
<form name="myForm" id="testForm" method="GET" action="http://localhost:8080/LocWebService/rest/tracollect/currentDate">
Date: <input type="text" id="datepicker">
</form>
<br/>
<input type="button" id="submit1" value="SUBMIT" />
</body>
No, variables are not expanded in action attributes. You can change the attribute in the function.
I've also changed the handler to be on the submit event, so you don't need to call .submit() explicitly.
$(document).ready(function() {
$(function() {
$("#datepicker").datepicker();
});
$("#myForm").submit(function() {
var currentDate = $("#datepicker").datepicker("getDate");
$("#testForm").attr("action", `http://localhost:8080/LocWebService/rest/tracollect/${currentDate}`);
});
});
<body>
<form name="myForm" id="testForm" method="GET" action="http://localhost:8080/LocWebService/rest/tracollect/currentDate">
Date: <input type="text" id="datepicker">
</form>
<br/>
<input type="button" id="submit1" value="SUBMIT" />
</body>
Whether I can put REST service URL on action attribute of form tag this way.
Whether I can pass currentDate value to the web service as a parameter this way.
These are very confusing. As mentioned in the comments, you can pass variables in a GET request in a number of ways. This will really depend on what your REST API is expecting. For example, what date format is needed?
mm/dd/yy
yy-mm-dd
ddmmyy
Then how should it be passed?
http://localhost:8080/LocWebService/rest/tracollect?currentDate=06-26-2019
http://localhost:8080/LocWebService/rest/tracollect/currentDate/06/26/2019
There are just a ton of ways it could be done that we cannot anticipate. You will need to determine that.
Consider the following code:
$(function() {
var dF = "yy/mm/dd";
$("#datepicker").datepicker({
dateFormat: dF
});
$(".fancy").button();
$("#testForm").submit(function(e) {
var dObj = $("#datepicker").datepicker("getDate");
var dStr = $.datepicker.formatDate(dF, dObj);
var act = $(this).attr("action") + "/" + dStr;
$(this).attr("action", act);
console.log("New Action: " + act);
return true;
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form name="myForm" id="testForm" method="GET" class="ui-widget" action="https://localhost:8080/LocWebService/rest/tracollect/currentDate">
Date: <input type="text" id="datepicker"> <button class="fancy" type="submit">Go</button>
</form>
Hope that helps.
i am trying to use ajax in form so that it checks the data base with a php script and then i would like to change the values of some disabeled fields in my form but it doest seem to work although the ajax is working and the jquery too .
heres the script
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta charset="utf-8" />
<title>F2 Form</title>
<script type="text/javascript">
function checkDB(){
var itr = document.getElementById( "itr" ).value;
$.ajax({
type : 'POST',
url : 'checkDB.php',
data : {itr: itr},
success: function(response){
$("v_id").attr("value","hi");
}
});
}
</script>
heres the html form snippet :
<form name="f2" method="post" action="form_submission2.php">
ITR:<input type="text" name="itr" id="itr" onkeypress="checkDB()" /><br />
Vehicle ID:<input type="text" name="id" id="v_id" value="" disabled><br />
Please check the code under the success :
Change
$("v_id").attr("value","hi");
To
$("#v_id").val("hi");
The value attribute is not the value of the input, it's the default value of the input. The value property is the value of the input.
To set the value, use val:
$("v_id").val("hi");
(Or you could use .prop("value", "hi"), but idiomatically, you'd use val.)
But note also that you're missing the # on the id selector, so:
$("#v_id").val("hi");
Re
still not working
Yes, it does:
function checkDB() {
var itr = document.getElementById("itr").value;
// Simulate ajax with timeout
setTimeout(function() {
$("#v_id").val("hi");
}, 10);
}
checkDB();
<form name="f2" method="post" action="form_submission2.php">
ITR:
<input type="text" name="itr" id="itr" onkeypress="checkDB()" />
<br />Vehicle ID:
<input type="text" name="id" id="v_id" value="" disabled>
<br />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is really strange. I am trying to get the value of a text field by id but what I am seeing in console is an empty string. Below is my complete code. All scripts are included correctly.
<html>
<head>
<meta charset="UTF-8">
<title>Awok- Scrapper</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="form">
<form>
<input type="text" name="query" id="test"/>
<input type="button" id="send" value="Submit" />
</form>
</div>
<div id="result">
</div>
<script>
$(function () {
var query = document.getElementById('test').value;
$('#send').click(function () {
console.info(query);
});
});
</script>
</body>
Since you use jQuery you can use it like this:
$('#send').click(function () {
var query = $('#test').val();
console.log(query);
});
$('#send').click(function () {
var query = $('#test').val();
console.info(query);
});
You tried to get value of query which has modified at the time of page load.
I have html form and want to make a validation by submitting the form with its specific id and validate it using jquery.
Here is my code:
HTML
<html>
<head>
<script src="jquery-1.11.2.min" type="text/javascript"></script>
</head>
<body>
<form method="post" name="frmhot" id="contactform3412">
<input type="text" name="status"/>
<input type="text" name="line"/>
<input type="text" name="reason"/>
<input type="text" name="partnum"/>
<input type="text" name="badgescan"/>
<input class="button_text" type="submit" value="Submit"/>
</form>
<script type="text/javascript">
var url = "";
jQuery("#contactform3412").submit(function(e){
url= 'works well!';
});
alert(url);
</script>
</body>
For this example, i want to get the value of the javascript variable 'url' within the jQuery condition submit. Thanks in advance :)
Use this -> Fiddle
var url = "";
$("#contactform3412").submit(function(e){
url= 'works well!';
alert(url);
return true;
});
Anyways you set url value and perform operations after submit,so use url value there only. In your problem, url could not set to "works well" as submit event was not fired.
You're missing the js file extension in your script declaration. It should be
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
instead of
<script src="jquery-1.11.2.min" type="text/javascript"></script>
With that, if you wrap your submit handler in document.ready(), it should work on click of form submit.
$(document).ready(function(){
var url = '';
$('#contactform3412').on('submit', function(e){
e.preventDefault();
url= 'works well!';
alert(url);
});
});
I'd like to use How do I use jQuery's form.serialize but exclude empty fields but it does not work. I used a minimal example that redirects to a php script:
<html><head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function(){
$("#myForm :input[value!='']").serialize();
alert('JavaScript done');
});
});
</script>
</head>
<body>
<form id="myForm" action="php.php" method="get">
<input id=id1 name=name1 type="text" /><br>
<input id=id2 name=name2 type="text" /><br>
<input id=id3 name=name3 type="text" /><br>
<input id=id4 name=name4 type="text" />
<input type="submit" value="submit form"/>
</form>
</body></html>
An here is the php script
<?php
print_r($_GET);
?>
If I write "111" only into the first textbox, I get from php:
Array ( [name1] => 111 [name2] => [name3] => [name4] => )
Thus, all fields made it into the get parameters.
Can you please help me?
TIA
You cannot use attribute selector for value as it is a changing property.
Use .filter()
$(document).ready(function () {
$('#myForm').submit(function () {
$(this).find(":input").filter(function () {
return $.trim(this.value).length > 0
}).serialize();
alert('JavaScript done');
});
});
Demo: Fiddle
Note: just serializing the input fields does not change in form submission, it can be used only if the form is submitted via ajax.
If you want to do a normal form submission but want to remove the empty fields then use .remove()
$(document).ready(function () {
$('#myForm').submit(function () {
$(this).find(":input").filter(function () {
return $.trim(this.value).length == 0
}).remove();
alert('JavaScript done');
});
});
You can try it with ajax, and get the array data in php file, see below code.
<html><head>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit_form').click(function(e){
$("#myForm :input[value!='']").serialize();
var form_data= $("#myForm :input[value!='']").serializeArray();
$.post("php.php",form_data,function(data){
alert('JavaScript done');
},"json");
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="myForm">
<input id=id1 name=name1 type="text" /><br>
<input id=id2 name=name2 type="text" /><br>
<input id=id3 name=name3 type="text" /><br>
<input id=id4 name=name4 type="text" />
<input type="submit" id="submit_form" value="submit form"/>
</form>
You need to AJAX the form - just calling serialize does not remove the fields from the request
Live Demo
$('#myForm').on("submit",function (e) {
e.preventDefault(); // cancel the form itself
var opts = $(this).find(":input").filter(function () {
return $.trim(this.value).length > 0;
}).serialize();
$.get($('#myForm').attr("action"),opts,function(data) {
alert(data);
});
});