Ive got a button with id 'filter' and also two input fields:
<input type="text" name="Status" value="{{ $Status }}">
<input type="text" name="CusJobNum" value="{{ $CusJobNum }}">
Then I have this jQuery script
$(document).on('click', '#filter', function(){
var url = 'JobsByDate/?';
$('input').each(function(){
var a = $(this).attr('name');
var b = $(this).attr('value');
if(!(b == ''))
url = url + '&'+a+'='+b;
});
window.location = url;
});
The code is only getting the default value for the input even if i make a change to the field. Does anyone know why?
Use val() to get the value, as of now you are reading its attribute. the method .attr() is used to get attribute value
var b = $(this).val();
OR, Go native
var b = this.value;
You are using attr() method to get the value which always return the attribute value in the markup. You should use val() method to get the current value of the element.
var b = $(this).val();
Use val() to get value of input.
$(document).on('click', '#filter', function(){
var url = 'JobsByDate/?';
$('input').each(function(){
var a = $(this).attr('name');
var b = $(this).val();
if(!(b == ''))
url = url + '&'+a+'='+b;
});
window.location = url;
});
Related
Hi I need to change the hardcoded url in the value property of input attribute dynamically based on a dropdown selected.
Following is the code I tried but not working. I am new to Javascript. Please help
var returnValue = checkDropDown();
var myValue = returnValue === "DropDown1" ? "http://url1/..." : "http://url2..";
var input = document.getElementById('URLField');
input.value = myValue;
function checkDropDown() {
const platForm = $('#platform-select').val();
console.log("platform select"+platForm);
return platForm;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<label for="platform">Choose from dropdown :</label>
<select name="platform" id="platform-select" onchange="togglePlatformOptions()">
<option value="DropDown1" >foo</option>
<option value="DropDown2" selected>bar</option>
</select>
<input type="text" id="URLField" value="myValue"/>
</body>
As you already have a function defined on change event on dropdown(called togglePlatformOptions) you can just use it.
Just add to this function your functionality.
Like below
function togglePlatformOptions(){
//you old code if it exists already
var returnValue = document.getElementById('platform-select').value;
var myValue = returnValue === "DropDown1" ? "http://url1/..." : "http://url2..";
var input = document.getElementById('URLField');
input.value = myValue;
}
UPDATE: Seems you have a function checkDropDown, then add everything you have inside
function togglePlatformOptions(){
var returnValue = checkDropDown();
var myValue = returnValue === "DropDown1" ? "http://url1/..." : "http://url2..";
var input = document.getElementById('URLField');
input.value = myValue;
}
UPDATE #2: To have it on initialization just call it
function togglePlatformOptions(){
var returnValue = checkDropDown();
var myValue = returnValue === "DropDown1" ? "http://url1/..." : "http://url2..";
var input = document.getElementById('URLField');
input.value = myValue;
}
// below call added
togglePlatformOptions();
I have this input
<input id="look" type="number" min="0" step="0.01" max="100000" class="form-control" name="number" required>
and I want to read the value that user will put at that time. So I wrote
$(function() {
$('#look').on('keyup', function(e) {
var temp2 = $('look').val();
alert(temp2);
});
});
and when the user starts typing the value inside the alert is undefined..
it should be #look rather than look, but rather than a selector use $( this )
$(function() {
$('#look').on('keyup', function(e) {
var temp2 = $(this).val(); //look should have been #look
alert(temp2);
});
});
$('#look').on('keyup', function(e) {
var temp2 = $('#look').val(); // you are missing #
alert(temp2);
});
Try this :
$(function() {
$('#look').on('keyup', function(e) {
var temp2 = $('#look').val(); //# is used for id selectors
alert(temp2);
});
});
while you are getting value from the input field, you missed "#" before ID.
replace
var temp2 = $('look').val();
with
var temp2 = $('#look').val();
or you can use $(this).val()
Is there any way to append a text to input field?
So lets say instead of:
<input type="text" id="val" name="val" value="http://" style="width: 140px;" />
with "http://" already written, have a "http://" added automatically when someone types an address, and if someone types full url "http://www.****.com" the http should not be added so it's not doubled.
Any one has any ideas? I can't use php.
Why not just add the http:// if it is missing?
var input = document.getElementById('val').value;
if (input.search('http://') === -1) {
input = 'http://' + input;
}
edit: if you need to allow https also, change the search to a regex:
if (input.search(/https?:\/\//) === -1) {
http://jsfiddle.net/jbabey/Bt67X/
I strongly suggest using a scripting framework, e.g. jQuery (http://jquery.com) to access the input field.
See here:
http://jsfiddle.net/5BLrU/
Here is the JS code for reference
$(function() {
$("#some-form").submit(function(){
var $val = $("#val");
var url = $val.val();
if (!/^http:\/\/.+/.test(url)) {
$val.val("http://" + url);
}
// remove this to submit the form!
return false;
});
});
The following example assumes the ID of the target element is val.
// Store current element
var elem = document.getElementById('val'),
// Store current value
currentValue = elem.value;
// Prepend something if not present
if (currentValue.match(/^http:\/\//) == false) {
currentValue = 'http://' + currentValue;
}
// Re-assign
elem.value = currentValue;
Append:
document.getElementById('val').value += "http://www.google.co.uk";
Remove Duplicate:`
document.getElementById('val').value.replace("http://http://","http://");
This way, if they did type http:// twice, it would just remove it.
taking value in 1st textbox and want to display it in 2nd..
1st <input type="text" value=" " id = "marks1" name = "marks1" onblur = "myFunction('marks1')" />
2nd <input type="text" value=" " id = "marks2" name = "marks1" disabled = "disabled" />
and on oblur I am calling a function. Whenever I change the value from UI, on function call I am getting the old value i.e. ' ' instead of changed value.
in the variable "value" the old value which i am getting, i am unable to display it on 2nd textbox.
function myFunction( txtname )
{
alert("call");
var txtobj = document.getElementsByName(txtname);
var value = txtobj[0].value;
alert("my value : "+value);
txtobj[1].value = value;
}
I know the code is okay, but it is not working at me. Is there any other way?
Works for me:
function myFunction(element)
{
var txtobj = document.getElementsByName(element);
var value = txtobj[0].value;
txtobj[1].value = value;
}
http://jsfiddle.net/pwTwB/1/
Are you getting an error?
Try it this way:
function myFunction( txtname )
{
var txtobj = document.getElementById(txtname);
var target = document.getElementById("marks2");
target.value = txtobj.value;
}
Here is a simple way to set the next textbox's value.
function moveText(ele){
document.getElementById("marks2").value = ele.value;
}
Then use the following in your html markup
<input type="text" id="marks1" onblur="moveText(this)" />
<input type="text" id="marks2" disabled="disabled" />
Suppose that I have a simple form in my page like this :
<form action="/properties/search" method="GET" id="form_search">
<p>
<label for="price">Min price:</label>
<input type="text" name="min_price" id="min_price">
</p>
<p>
<label for="price">Max price:</label>
<input type="text" name="max_price" id="max_price">
</p>
<p>
<input type="submit">
</p>
</form>
When I submit my form, I have the following url :
http://.../properties/search?min_price=100000&max_price=200000
I want to change this url to have :
http://.../properties/search?price=100000,200000
To do that, I'm using JQuery and the JQuery querystring plugin :
$(document).ready(function() {
$("#form_search").submit(function() {
var querystring = rewrite_interval_qstring();
// querystring equals "?price=100000,200000" -> exactly what I want !
// ???
});
});
How can I change (comment "???") the submit url ? I have tested the following instructions separately, but it does not work.
window.location = querystring;
window.location.href = querystring;
window.location.search = querystring;
You're almost there. Intercept the submit event (as you are doing), extract the min and max values, build your url and set window.location.href
$(document).ready(function() {
$("#form_search").submit(function(event) {
event.preventDefault();
$this = $(this);
// var url = rewrite_interval_qstring();
var min_price = $('#min_price').val();
var max_price = $('#max_price').val();
var url = $this.attr('action') + '?price=' + min_price + ',' + max_price;
window.location.href = url;
});
});
You need to prevent the default submit action from happening
$(document).ready(function() {
$("#form_search").submit(function(event) {
event.preventDefault(); // <-- add this
var querystring = rewrite_interval_qstring();
// querystring equals "?price=100000,200000" -> exactly what I want !
window.location.href = querystring; // <-- this should work.
});
});
Answer by Rob Cowie is one method. Another one is adding a hidden field named "price" and fill it before submitting it with the value you want.