Javascript duplicate form input - javascript

I have a form and I need two fields to be the same. I am trying to use javascript to make the second one the same as the first, after the first is set.
Here is the javascript (above my tag)
<script type="text/javascript" charset="utf-8">
function updateDate(){
startDate = document.getElementById("startdate").value;
document.getElementById("enddate").value = startDate;
} </script>
and the HTML is as follows:
<span class="em-events-search-dates em-date-range">
<input type="text" id="startdate" class="em-date-input-loc em-date-start" onchange="updateDate();" />
<input type="hidden" class="em-date-input" name="scope[0]" value="<?php if( !empty($_REQUEST['scope'][0]) ) echo $_REQUEST['scope'][0]; ?>" />
<input type="text" id="enddate" class="em-date-input-loc em-date-end" />
<input type="hidden" class="em-date-input" name="scope[1]" value="<?php if( !empty($_REQUEST['scope'][1]) ) echo $_REQUEST['scope'][1]; ?>" />
</span>
The issue I'm having is that when you click the form field, it opens a date selector. I'm pretty sure it uses this exact plugin http://jqueryui.com/demos/datepicker/
Unfortunately, this means that you never actually click the form field after the date is selected, and you never type anything.
I tried onmouseout on the second field (the hidden one with class em-date-input)
I tried onchange on the first element with id startdate
There are a few that work, only if you go back and click the visible field with the date selected. The problem is, a user will never do this.
I even tried putting onsubmit="updateDate();" on the submit button, hoping that when you clicked it it would change the second date before submitting the form.. No luck. Any suggestions?
EDIT: Added alerts to see what was working and what wasn't
<input type="text" onchange="alert('first');" id="startdate" class="em-date-input-loc em-date-start" />
<input type="hidden" onchange="alert('second');" class="em-date-input" name="scope[0]" value="<?php if( !empty($_REQUEST['scope'][0]) ) echo $_REQUEST['scope'][0]; ?>" />
<input type="text" onchange="alert('third');" id="enddate" class="em-date-input-loc em-date-end" />
<input type="hidden" onchange="alert('fourth');" class="em-date-input" name="scope[1]" value="<?php if( !empty($_REQUEST['scope'][1]) ) echo $_REQUEST['scope'][1]; ?>" />
When I change the date on the second box (id="enddate") it fires the third alert. No other alerts fire, even when I change the date in the first box multiple times, or by typing.

use form before submit event:
onsubmit="return YOUR_FUNCTION_HERE()"
Just add it your submit button.
and then set the values inside that func:
var YOUR_FUNCTION_HERE = function(){
//set your hidden inputs
}

If I understood your question then you may want this (confused a little about your question)
$(function(){
$('#startdate, #enddate').datepicker();
$('#startdate').on('change', function(e){
$('#enddate').val($('#startdate').val());
});
});​
Demo or This One.

You need to hook up an onchange event to the textbox, then copy your data after it fires. It should fire once the datepicker updates the value.

Related

Jquery working in console but not in actual code for checkbox enable disable

I have created one checkbox on the click on which the date fields are enabled/disabled
this is my code for jquery:
$(document).ready(function() {
$("#mychechbox").click(function(){
$("#date_1").attr("disabled", !this.checked);
});
});
my html tags for same:
<input id="date_1" value="<?php echo $this->input->post('from'); ?>" name="from" class="form-control" type="date" placeholder=" From" disabled/>
<p class="pull-left" style="font-size:10px;">
From Date<br><br>Enable Date fiedls
<input type="checkbox" class="pull-left" id="mychechbox" name="mychechbox">
</p>
</div>
<div class="col-sm-2" >
<input id="date_2" value="<?php $to= $this->input->post('to');if($to){echo $to;}else{echo date('m/d/y'); } ?>" name="to" class="form-control" type="date" placeholder=" To" disabled/>
<p class="pull-left" style="font-size:10px;">End Date </p>
</div>
I am doing this in Codeigniter.
please suggest me some improvements if needed
Why use jQuery and start mixing HTML5 with a deprecated (not yet obsolete) framework like jQuery?
Example only HTML5 + Pure JS:
Enable/Disable input fields
and if you do wanna use jQuery
Don't use click cause than it will not work when checking/unchecking the checkbox when u use your keyboard.
Use the change event instead and verify the current state of the checkbox so whether it was checked or not.
Example:
$(document).ready(function() {
$("#mychechbox").change(function() {
$("#date_1").prop("disabled", !this.checked);
});
});
Also use prop instead of attr to add the disabled property on an input field. Also recommend to use #mycheckbox with a k instead of #mychechbox with an h just to make sure that other people don't mistake if they write correct English.
So finally after so many attempts I got the solution:
I was unaware that along with my checkbox icheck-helper class(which I had mentioned in one of the comments) is also being loaded automatically...
so I did this:
$('#mycheckbox').on('ifChanged', function(event) {
if(this.checked) {
// alert("yes");
$("#date_1").removeAttr("disabled");
$("#date_2").removeAttr("disabled");
}
else {
// alert("no");
$("#date_1").attr("disabled","disabled");
$("#date_2").attr("disabled","disabled");
}
});
thank you everyone for the answers
if Your need to enable and disable datepicker on the basis of checkbox is checked or not then, try below code:
$(document).ready(function() {
$("#mychechbox").click(function(){
$("#mychechbox").is(':checked') ? $('#mydate').datepicker('enable') : $('#mydate').datepicker('disable');
});
});

Send value with Onchange and javascript function

I'm new at JavaScript and I need some help to submit my form when anyone select anything from the dropdown list. Here is the sample code :
<form action="" method="post">
<select name="car" onChange="this.form.submit()">
<option value="car1">car1</option>
<option value="car1">car1</option>
<option value="car1">car1</option>
</select>
<!-- Some other code -->
<input type="submit" name="sentvalue">
</form>
This is my form and when anyone selects the dropdown, the form automatic submit but I also need the sentvalue when automatic submit the form. So can anyone help me to capture the sentvalue when anyone select the dropdown.
If you want to send any other data with the form submit you can send it in hidden inputs
<input type='hidden' name='data1' value='Test1' />
<input type='hidden' name='data2' value='Test2' />
//etc
And if you want the value of submit button with the form just set the value attribute into your code for submit button every this else seems fine,
<input type="submit" name="sentvalue" value="Test1" />
Hope this answers your question
Just give the <input> tag a name
<input name="submitbtn" type="submit" value="sentvalue" />
then you can get it by $_POST['submitbtn'] in case of PHP which value is "sentValue"
It sounds like you want the value of the input field (sentvalue) to be submitted as well. But how do you guarantee that the value was specified by the user? Is this supposed to be a hidden input field?
Either way your input tag is incomplete. This sounds better:
<input type="text" name="sentvalue"></input>
Also, when you submit, the value of this field (sentvalue) will be passed in too. As long as your tags are right you don't need to worry.
You will have to create a hidden input element
<input type='hidden' id='sentvalue' value='' />
and call a function on submit instead of directly submitting
Use this in the function to set the values and submit
var e = document.getElementByName("car");
document.getElementById("sentvalue").value = e.options[e.selectedIndex].value;
this.form.submit();

Refresh value in text field with JavaScript/jquery

I have a function that calculate price for a product. I'm not JavaScript developer so my knowledge is very limited.
By changing the value in the text field script calculate price for product.
<input type="text" value="" name="options[22]" class="input-text"
onfocus="opConfig.reloadPrice()">
Problem is that the script triggers only if the following is done:
insert value into the textfield
click somewhere outside the textfield
click back into the text field
All I need is a button saying refresh that by clicking it will have functionality of step 2 and step above.
I'm not sure if I explained it properly so if there is any more information required to resolve this issue please let me know.
Here is the link to the site.
http://www.floorstodoors.mldemo.co.uk/spotlight/oak-value-lacquered-3-strip.html
The field im trying to amend/add refresh button is Enter Square Metre
You'd add your event to a button, and retrieve a reference to your input by assigning an ID:
<input type="text" value="" name="options[22]" id="price" class="input-text" />
<input type="button" value="Refresh" onclick="reloadPrice();" />
function reloadPrice() {
var price = "0.00"; // set your price here
// get a ref to your element and assign value
var elem = document.getElementById("price");
elem.value = price;
}
I'm not sure I fully understand you, but is this what you need?
<input type="text" value="" name="options[22]" class="input-text">
<input type="button" onclick="opConfig.reloadPrice()" value="Refresh" />
A button with an click-event listener, so that when you click the refresh-button the opConfig.reloadPrice() method gets executed.
Edit based on comment:
I'm not sure what JavaScript library you are using, but you have these two lines in you code that seems to add event-listeners to the input with id qty.
$('qty').observe('focus',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('focus',this.getFromQties.bind(this))
They are listening for the focus event, thus only triggers when your input field gains focus.
If you modify those to listen for the keyup event instead, I believe it will work better. Without being familiar with the framework, I guess the only thing to change would be this:
$('qty').observe('keyup',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('keyup',this.getFromQties.bind(this))
Use onchange or onblur instead of onfocus!
use onchange. This will activate anytime the value changes:
<input type="text" value="" name="options[22]" class="input-text" onchange="opConfig.reloadPrice()">
First: this is JavaScript and not Java - so you have to be a javascript and not a java developer.
to solve your problem you can make a new button with a onclick attribute and execute your function there which you have in your onfocus attribute in the text-field.
or you can take another event - like onchange or onblur for instance..
<input type="text" onchange="..yourfunctionhere...">
http://www.w3schools.com/js/js_events.asp
All I need is a button saying refresh that by clicking it will have functionality
For that you need a button with onclick listener,
do the below things.
<input type="button" value="Refresh" onclick="opConfig.reloadPrice();" />
<input type="text" value="" name="options[22]" class="input-text"/>

Remove Submit Button if the form is validated

I am using Magento and created a custom form, and basically what I want to do is prevent a submit button to be click more than once (whether that is a double click, or if the user just gets impatient and clicks the button again after a few seconds).
The form is using the Magento Javascript validation method to validate the fields and IF the fields are all validated then what I would like to do is to remove the submit button on the first click and replace it with a "In process..." message. This way there is no way that a user can double click or multiple click the button.
If the fields are not all validated then move the submit button down and just above it display a message that may read "Please fill out all required fields and submit form again".
Below is the form with just validation, but I would really like to know how to apply the what I mentioned above.
Any help would be SO appreciated!!! Thanks in advance.
<form name="<em><strong>my-custom-form</strong>" id="my-custom-form" action="" method="post">
<label for="firstname">< ?php echo $this->__('First name') ?> <span class="required">*</span></label><br />
<input id="firstname" name="firstname" class="<em/><strong>input-text required-entry</strong>" />
<label for="lastname">< ?php echo $this->__('Last name') ?> <span class="required">*</span></label><br />
<input id="lastname" name="lastname" class="<em/><strong>input-text required-entry</strong>" />
<label for="useremail">< ?php echo $this->__('Email') ?> <span class="required">*</span></label><br />
<input type="text" name="useremail" id="useremail" class="<em/><strong>input-text required-entry validate-email</strong>" />
<input type="submit" name="submit" value="<?php echo $this-/>__('Submit') ?>" />
</form>< ?php /* END OF my-custom-form */?>
<script type="text/javascript">
//< ![CDATA[
var customForm = new VarienForm('<em><strong>my-custom-form</strong>');
//]]>
</script>
Not sure how Magento might fit in because I'm not overly familiar with it, but the process typically works like this:
$('#my-custom-form').submit(function(){
$('input[type=submit]', this).attr('disabled', true);
// validate form
if (valid) {
return true;
} else {
$('input[type=submit]', this).attr('disabled', false);
return false;
}
});
You could look into UI blocking as one possible solution. I use this one.
If you're not using jQuery already, you could try just hiding the submit button, rather than removing it completely. Removing the button can cause issues with event binding, depending on how you set them up.
This is probably the most help you're going to get without a little more code/information.
I don't see your validate code above, but if we assume that it's a boolean function you can just:
if (validatation()) {
$('#my-custom-form').submit(function(){
$('input[type=submit]', this).attr('enabled', 'enabled');
$('input[type=submit]', this).val('In process...');
});
} else {
$('#my-custom-form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});
}
I would suggest two things:
1) Drop the "In process..." thing, it just makes things harder for the user the 2nd time unless you keep doing validation() on every change and setting the text back.
2) Add a double-click prevention:
$('my-custom-form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
$('select', this).attr('disabled', 'disabled');
$('input[type=text]', this).attr('readonly', 'readonly');
$('textarea', this).attr('readonly', 'readonly');
});

how to submit the values in the form in javascript when there are 2 submit values?

I have one form where there are 2 inputs those are submit type of inputs like this.
<form>
<input type="text" name="payee" value="">
<input type="text" name="amount" value="">
<input type="text" name="date" value="">
<input type="submit" name="deposit" value="Distribute">
<input type="submit" name="distribute" value="Deposit">
</form>
In jQuery like this:
$("form submit").click(function() {
// i wrote code.
}
If I click on the deposit button some action should occur. If I click on the distribute button some other action should occur.
First of all you need to change your submit inputs to buttons (or at least one of them) as 2 submit buttons in 1 form is invalid. Then give each button its' own Id.
<input type="button" name="deposit" value="Distribute" id="distribute">
<input type="button" name="distribute" value="Deposit" id="deposit">
Then, in jQuery you can then use the Id of each button to run specific code when it is clicked, like this:
$("#distribute").click(function() {
// code to run when distribute is clicked
}
$("#deposit").click(function() {
// code to run when deposit is clicked
}
insert another input type :
<input type="hidden" name="hf" id="hf" value="">
and
$("form :submit").click(function() {
if ($(this).attr('id')=='distribute') $("#hf").val('sent by distribute');
else $("#hf").val('sent by deposit');
}
and in the server you can see who send by reading the hiddenField value ( hf)
You can add a custom attribute on your buttons in document.ready function and on click of the button you can identify which button has posted an request to form.
Example to add custom attribute
<input type="submit" id="deposit" value="Distribute">
<input type="submit" id="distribute" value="Deposit">
$(function () {
$("#deposit").attr('isDeposit','1');
$("#distribute").attr('isDeposit','0');
});
and on submit click
$("form submit").click(function()
{
var identifyButton = $(this).attr('isDeposit');
}
some thing like this.
Try to use the jQuery submit() function, like this:
$('#deposit').submit(function(){
//Code to run
});
It's better because you can cancel the client event, if some field is wrong.
http://api.jquery.com/submit/
You don't need a plugin to do it, however there's a lot of them:
http://www.designyourway.net/blog/resources/55-jquery-form-plugins-to-download-and-use/

Categories