I cannot for the life of me understand why this doesn't work.
function test(event) {
alert(event.data.fieldone);
};
$('form').submit({fieldone: $('#field').val()}, test);
I just end up with a blank alert. If I hardcode a string and pass that instead it works fine and if I declare a variable within the function and fetch the data that way it also works. What gives?
It will not process the input field , because the form submit line will be executed only ONCE at the beginning, when the input field is blank.
If you wish to make it able to alert with the text inside the input field, you need to add event listener. For example, I add a button that will trigger the alert that prints the text inside the input field in the snippet below.
function test(event) {
event.preventDefault();
console.log(event.data);
alert(event.data.fieldone);
};
$('#submit').click(function() {
var data = $('#field').val();
$('form').submit({'fieldone': data}, test);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="field" id="field">
<button id="submit" type="submit">submit</button>
</form>
In this version the data argument contains a reference to the #field input element and the .value property is then read at submit time and not at the time the submit event was attached to the form:
function test(event) {
event.preventDefault();
console.log(event.data.value);
};
$('form').submit($("#field")[0], test);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="field" id="field">
<button>submit</button>
</form>
Related
<form id="colours" onsubmit="doSomething()">
<label for="startcolour" style="font-family:arial">Start:</label>
<input type="color" name="startcolour" id="startcolour" value="#123456">
<label for="endcolour" style="font-family:arial">End:</label>
<input type="color" name="endcolour" id="endcolour" value="#abcdef"><br><br>
<br>
<input type="submit" value="Submit">
</form>
<script>
var startcolour = document.getElementById("startcolour").value;
var endcolour = document.getElementById("endcolour").value;
function doSomething() {
google.script.run.withFailureHandler(function(error) {
console.log("error")
console.log(error.message)
}).withSuccessHandler(function(result) {
console.log("done!")
}).test(startcolour);
}
</script>
I have a Google Apps Script HTML sidebar. This is some of the code for the HTML sidebar. When I enter a colour and press 'Submit', I want it to run the test() function with the submitted value for startcolour as the input. However, it runs with '#123456', the default value, not the value the user submitted. How do I fix this?
The problem is that you are defining the "startcolour" and "endcolour" variables from outside of your doSomething function, so when that function is called, it uses the value that was defined when the page was loading, instead of a value that you could define when the form is being submitted.
The solution would be to define the variables "startcolour" and "endcolour" within your doSomething function.
i wanna to check item_price after click on particular item_code through ajax.In item_rate field if user gives price enter more than available price than i will show error message. "#Enter price under "this" available price". Both item_field and item_rate calls "onchange()" function.
i have two different input fields with onchange() method.
One is "item_code" and Second is "item_rate"
i want to call item_code onchange() function inside the item_rate onchange() function.
<input type="text"name="item_code" id="item_quantity" onchange="item_code(this.value)">
<input type="text"name="item_rate" id="item_rate" onchange="item_rate(this.value)">
function item_code(code_value){
function item_rate(rate_value){
}
}
thanks for answers this question.
Try using the .trigger() method to trigger the event on the second item:
function item_rate(code_value){
$("#item_code").trigger("change");
}
This will execute the function you assign as a listener.
ON my opinion why don't you do this?
<input type="text"name="item_code" id="item_quantity" onchange="myfunction()">
<input type="text"name="item_rate" id="item_rate" onchange="myfunction()">
<script type="text/javascript">
function myfunction(){
var subtotal=parseFloat($('#item_rate').val())*parseInt($('#item_quantity').val());
alert(subtotal);
}
</script>
In your item_code function just call on change method on item_rate element.
Also use oninput rather than on change method.
<input type="text" name="item_code" id="item_quantity" oninput="item_code(this.value)">
<input type="text" name="item_rate" id="item_rate" onchange="item_rate(this.value)">
<script>
function item_rate(rate_value){
console.log(rate_value);
}
function item_code(code_value){
console.log(code_value);
var element = document.getElementById('item_rate').onchange();
}
</script>
How to call function xxx when input type text id="username" change value ?
first, when you fill data into
<input type="text" name="thingy" onkeypress="updateInput(this.value)" onkeyup="updateInput(this.value)" />
Then data in
<input type="text" name="thingy" onkeypress="updateInput(this.value)" onkeyup="updateInput(this.value)" />
will change value.
OK, when input name="thingy" change i want to call function xxx , i try this code but not work.
How can i do that ?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function updateInput(ish){
document.getElementById("username").value = ish;
}
</script>
<form id="main_fid">
input1 : <input type="text" name="thingy" onkeypress="updateInput(this.value)" onkeyup="updateInput(this.value)" />
<span id="mySpan"></span>
<input type="submit" value="OK"/>
</form>
<script>
function xxx() {
$.ajax
(
{
url: 'other.php',
type: 'POST',
data: $('#username_send_value_fid').serialize(),
cache: false,
success: function (data) {
$('#mySpan').show();
$('#mySpan').html(data);
}
}
)
}
</script>
<br>
<form id="username_send_value_fid">
input2 : <input type="text" name="username" id="username" onchange="xxx()" readonly/>
</form>
I think calling xxx() on "onchange" event or inside updateInput(ish) will give the same effect.
Try
function updateInput(ish){
document.getElementById("username").value = ish;
xxx();
}
$("#username").on( "change", handler )
or in short form
$("#username").change( handler )
And get rid of the inline onchange attribute. You will also need to wrap the code in a ready function:
$(document).ready(function(){
$("#username").change( handler )
});
http://api.jquery.com/change/
Added after reading the question a bit more carefully:
If you want to link your input name="thingy" to username you can do something like this:
$('input[name="thingy"]').change(function(){
$("#username").val( $(this).val() ).trigger('change');
});
This will update the value of username and then trigger a change event as if the user had typed in the input.
However if what you are trying to accomplish is something like validating the uniqueness of an input the is no reason to jump though so many hoops - just call your ajax handler straight from the username change event.
I have an input text box that is in a form, and I'm trying to retrieve the value and multiply it to the parameter.
It doesn't run and I'm not sure if there's a syntax error or if my retrieval of textbox value is incorrect.
<script>
function product(parameter1) {
a=parseInt(document.myForm.myTextBox.value);
return parameter1*a;
};
</script>
HTML:
<form name='myForm'>
Insert your number: <input id='myTextBox' value=''><br>
</form>
<input type='button' value='CLICK HERE' onclick='product()'>
You miss an argument in the onclick trigger, it should be ="product(10)", where 10 is your paremeter1 argument.
I believe you would have to have a name on the input tag to access it the way you do, so an easier and probably faster way to access your input would be document.getElementById('myTextBox')
It is better to execute your product() function on form submit, rather than on button click event, since some users might want to just hit enter in the text field instead of the button, but then you would have to move it within the form boundaries and make it be type="submit"
MODIFIED CODE:
js:
<script>
function product(parameter1) {
a = parseInt(document.getElementById('myTextBox').value, 10);
var result = parameter1*a;
// alert(result);
return result;
};
</script>
html:
<form name='myForm' onsubmit="product(10); return false;">
Insert your number: <input id='myTextBox' value=''><br>
<input type='submit' value='CLICK HERE'>
</form>
You were calling method without argument. If you only want to retrieve value, below is the code. I dont know how ur going to use it
Insert your number:
<input type='button' value='CLICK HERE' onclick='product()'>
<script>
function product()
{
parameter1=10;
a=parseInt(document.myForm.myTextBox.value);
return parameter1*a;
}
</script>
I've got a form that has multiple submit buttons. One for changing data in a database, one for adding, and one for deleting. It looks like this:
<form action="addform.php" method="post" id="addform" onSubmit="return validate(this)">
<select name="listings" id="listings" size="1" onChange="javascript:updateForm()">
<!-- Here I have a php code that produces the listing menu based on a database query-->
</select>
<br />
Price: <input type="text" name="price" id="price" value="0"/><br />
Remarks: <textarea name="remarks" wrap="soft" id="remarks"></textarea><br />
<input type="submit" value="Update Database Listing" name="upbtn" id="upbtn" disabled="disabled"/>
<input type="submit" value="Delete Database Listing" name="delbtn" id="delbtn" disabled="disabled"/>
<br />
<input type="submit" value="Add Listing to Database" name="dbbtn" id="dbbtn"/>
<input type="button" value="Update Craigslist Output" name="clbtn" id="clbtn" onClick="javascript:updatePreview();"/>
</form>
There are actually more elements in the form, but that doesn't matter. What I want to know is, for my validation method, how can I check which submit button has been clicked?
I want it to do the following:
function validate(form){
if (the 'add new listing' or 'update listing' button was clicked'){
var valid = "Are you sure the following information is correct?" + '\\n';
valid += "\\nPrice: $";
valid += form.price.value;
valid += "\\nRemarks: ";
valid += form.remarks.value;
return confirm(valid);}
else {
return confirm("are you sure you want to delete that listing");
}
}
I assume there must be some way to do this relatively easily?
Why don't you set a global variable specifying which button was last clicked? Then you can check this variable in your validate method. Something like:
var clicked;
$("#upbtn").click(function() {clicked = 'update'});
// $("#delbtn").click(function() {clicked = 'delete'});
// ...
function validate(form) {
switch(clicked) {
case 'update':
break;
// more cases here ...
}
}
You can, for example, attach a click event to every submit button that will save a pointer to it in a variable or mark it with a specific attribute / class (it that case you will have to remove that marker from all other submit buttons in the event handler) and then in the submit callback you will know which one was clicked
I think it's easier to just use a click event on each button and handle it individually.
$(function() {
$('input[name=someName]').click(someFunc);
});
function someFunc() {
// Your validation code here
// return false if you want to stop the form submission
}
You could have a hidden field on a form and set the value of that field on clicking the button and then pick it up in your validation routine. You can use jquery to achieve this, let me know if you require an example.
You can use ajax submission with jQuery, you can try something like this:
$('form#addform input[type="submit"]').on('click',function(e){
e.preventDefault();
var current = $(this); //You got here the current clicked button
var form = current.parents('form');
$.ajax({
url:form.attr('action'),
type:form.attr('method'),
data:form.serialize(),
success:function(resp){
//Do crazy stuff here
}
});
});