Multiply parameter and textBox value in JavaScript - javascript

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>

Related

Problem passing arguments to function using .submit in JQuery

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>

Google Apps Script - Form inputs not submitting properly

<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.

How do I pass Bootstrap-tags input as an array to a form?

I need to pass an array to a form based on what is returned from bootstrap-tags input. I have followed the documentation to try and retrieve the array using the following code:
<form>
<input type="text" name = "language" value="Javascript,Ruby" id = "languages" data-role="tagsinput" />
<input type='hidden' name='languages_hidden[]' id = "languages_hidden" value='' />
<input name="save" onclick="mySubmit()" type="submit" value="Save">
</form>
<script>
function mySubmit() {
document.getElementById('skills_hidden').value = $("#skills").tagsinput('items')
}
</script>
I expect the resulting array that is passed on to be in the format when I click the submit button:
["Javascript", "Ruby"]
However, I see that that is actually how the array is passed on:
["Javascript, Ruby"]
How do i rectify this?
Change the function to the following. Also added a fall back just in case.
function mySubmit() {
document.getElementById('skills_hidden').value = ($("#skills").tagsinput('items') || [''])[0].split(', ');
}
Edit: Updated function to reflect returning of an array.

i want get string from Input text field and compare to some string, if it�s true send to some url

i still have problem in my code. i want the Java get the string froom the input text field and compare to another string, it´s true, send to some url. i did this code, but it doesn´t work.
<input type="text" name="procura" id="pro" value="" />
<script language="JavaScript">
function ver(){
var pp = document.getElementById('pro').value;
if (pp.equals('advogados'))
{
window.location = "http://www.jornalexemplo.com.br"
//do something
};
};
</script>
</div></td>
<td width="399"><input type="submit" name="Busca" id="Busca" value="AWR Procura" onsubmit="ver()"; /></td>
Change the type of button instead of submit. call that method onClick.
<input type="button" name="Busca" id="Busca" value="AWR Procura" onClick="ver()"; />
submit only use when you need to send data on server.
Instead of using pp.equals,use
if(pp == 'advogados')
then it works properly.
and change the submit button to button and call the function

jQuery (or just JS) choosing from multiple form submit buttons in onSubmit function

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
}
});
});

Categories