how to add up values with same textfield name attribute - javascript

Hello I have two select menus, that contain values, my intention is to multiple the values of the two select menus and show them in a TextField,
I've done this successfully carried this out by doing this :
<script type="text/javascript"><!--
function updatesum() {
document.form1.textfield3.value = (document.form1.selectt.value -0) * (document.form1.selecttt.value -0);
}
//--></script>
<form id="form1" name="form1" method="post" action="val.php">
<label><strong><br />
Chelsea vs Arsenal</strong>
<select name="selectt" onchange="updatesum()">
<option value="0">select</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</label>
<label><strong>odds</strong>
<select name="selecttt" onchange="updatesum()">
<option value="0">select</option>
<option value="100">L</option>
<option value="200">W</option>
<option value="400">D</option>
</select>
</label>
<input name="textfield3" type="text" /><br />
</form>
Now I'm trying to do a double of this select menus using the same name attribute, but it refuses to calculate.
This is what I'vve tried :
document.form1.textfield3.value = (document.form1.selectt.value -0) * (document.form1.selecttt.value -0) }
//--></script>
<form id="form1" name="form1" method="post" action="val.php">
<label><strong><br />
Chelsea vs Arsenal</strong>
<select name="selectt" onchange="updatesum()">
<option value="0">select</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</label>
<label><strong>odds</strong>
<select name="selecttt" onchange="updatesum()">
<option value="0">select</option>
<option value="100">L</option>
<option value="200">W</option>
<option value="400">D</option>
</select>
</label>
<input name="textfield3" type="text" /><br /> <label><strong><br />
Chelsea vs Arsenal</strong>
<select name="selectt" onchange="updatesum()">
<option value="0">select</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</label>
<label><strong>odds</strong>
<select name="selecttt" onchange="updatesum()">
<option value="0">select</option>
<option value="100">L</option>
<option value="200">W</option>
<option value="400">D</option>
</select>
</label>
<input name="textfield3" type="text" /><br />
</form>
I was hoping it would work this way, but it didn't, how can I achieve this?

I didn't understand what you are trying to say but i have write some pseudocode hope this will help you...
pseudocode
<script>
var globalVariable=1;
function updateSum(){
//get current element value
globalVariable*=document.form.select.value
textfield.value = globalVariable;
}
</script>

Related

Changing the language of menu items

I'm trying to add a new locale and the language change option to a menu I created.
Below you can see the code that I have my progress so far
Essentially, I'd like the menu items for "sports" and "districts" to change to Chinese after the radio button for "中文“ is clicked. My JavaScript skill is very low so I'm having problems making this happen. Since it's a short list and I can write Chinese without problem, I thought there may be a simple fix, but so far I haven't made any progress. Any suggestions on how to go about this is much appreciated.
<body>
<form action="">
<input type="radio" name="language" value="english">English<br>
<input type="radio" name="language" value="chinese">中文<br>
</form>
</body>
<b>Find your sport</b>
<form>
<select name="Sports">
<option value="basketball">Basketball</option>
<option value="football">Football</option>
<option value="badminton" selected>Badminton</option>
<option value="table tennis">Table Tennis</option>
<option value="swimming">Swimming</option>
<option value="billiards">Billiards</option>
<option value="archery">Archery</option>
<option value="baseball">Baseball</option>
<option value="bowling">Bowling</option>
<option value="climbing">Climbing</option>
<option value="darts">Darts</option>
<option value="fencing">Fencing</option>
<option value="golf">Golf</option>
<option value="squash">Squash</option>
<option value="tennis">Tennis</option>
</select>
</form>
<b>Find your district</b>
<form>
<select name="Districts">
<option value="xuhui">Xuhui</option>
<option value="jingan">Jingan</option>
<option value="huangpu" selected>Huangpu</option>
<option value="changning">Changning</option>
<option value="pudong">Pudong</option>
<option value="putuo">Putuo</option>
<option value="hongkou" selected>Hongkou</option>
<option value="yangpu">Yangpu</option>
<option value="minhang">Minhang</option>
<option value="songjiang">Songjiang</option>
<option value="qingpu" selected>Qingpu</option>
<option value="jiading">Jiading</option>
<option value="baoshan">Baoshan</option>
<option value="fengxian">Fengxian</option>
<option value="jinshan" selected>Jinshan</option>
<option value="chongming">Chongming</option>
</select>
</form>
<form method="post" name="form1" id="form1">
<input id="submit" name="submit" type="submit" value="Submit" onclick="getVenues();" />
</form>

Change the placeholder when the select option is changed using jQuery

I have a site with the same form in different spots on the page. I would like to be able to have a placeholder in a text input change when I change the select option. I have a JSFiddle with a kinda example: http://jsfiddle.net/y1jhhqLz/
All the forms look like this:
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
And in this example, I would like to have the place holder change on the input with the id myInput, when I select the option Third.
I have tried many different ways to include the most recent attempt, which I put on the JSFiddle.
Any help would be greatly appreciated!
Set select onclick attribute to
onclick="changePlaceHolder(this,'#myInput1');"
and change javascript function to
function changePlaceHolder(dropdown, element) {
if (jQuery(dropdown).val() == "Third") {
jQuery(element).attr('placeholder', 'You did it correctly!');
} else {
jQuery(element).at}tr('placeholder', '');
}
}
in JSFiddle, you should set the loading behaviour to "no wrap - in head"
Done!
Add a change listener to the select, then get the value of the select and set the attribute placeholder to said value:
$('select').on('change',function(){
var place=$(this).val();
var num=$(this).attr('id').substring(8);
$('#myInput'+num).attr('placeholder',place);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p>How do I get it so that when I click on the option that says Third Choice (for any form), it will put in the text box (with the form and number ) a placeholder: "You did it correctly"? But it shouldn't change any other form but the one where you change the select to the Third Choice option. I tried using a onClick function.
</p>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Several things going on. First, remove the onClick events (we are not looking for when the select is clicked but rather when it is changed) and instead use jQuery's on method. Now changePlaceHolder has access to this which is the actual select box which was changed.
See below:
jQuery('select').on('change input', changePlaceHolder);
function changePlaceHolder() {
//I have to use jQuery instead of $ because it is on a wordpress site
if (jQuery(this).val() == "Third") {
jQuery(this).next().attr("placeholder","You did it correctly!");
} else {
jQuery(this).next().attr("placeholder"," ");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" >
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"/>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"/>
</form>
Other things to note: your <input> tags to not require an ending tag </input>, instead write them like this <input />. Note that the "/" ends the tag. You want to edit the input immediately following your select, in which case you can use jQuery(this).next() which will select the element immediately following the current this element.
For your specific case I would not touch source code, would define all functionality in script. Setting the onlick event inline is not a good idea, scripts should not go together with content.
I wrote this script having in mind that your select and input tags do not have to be siblings, the only condition is that both belong to same form:
/* This way you can use $ in your Wordpress */
(function ($) {
$('select').on('change', function(e) {
var thisSelect = $(this);
var thisSelectValue = thisSelect.val();
var thisInput = thisSelect.closest('form').find('input[id^=myInput]');
if (thisSelectValue == 'Third') {
thisInput.attr("placeholder", "You did it correctly!");
} else {
thisInput.attr("placeholder", "");
}
});
}(jQuery));
p {
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Please find the working code for you:
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function changePlaceHolder(element,target) {
alert(element);
if ( element == "Third") {
jQuery(target).attr("placeholder","You did it correctly!");
} else {
jQuery(target).attr("placeholder","");
}
}
</script>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" name="mySelect1" onclick="changePlaceHolder( this.value ,'#myInput1' );">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
</body>
</html>

Perform logic on HTML post form

I have a simple HTML form that is posting to a URL like this...
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input class="textinput1" type="text"></input>
<input class="textinput2" type="text"></input>
<input class="textinput2" type="text"></input>
</form>
This generates a URL like this www.example.com/?option_dropdown=option1 when submitted, it does not include the text input boxes as they do not have a name attatched to them.
What I would like to do is add some logic to the text inputs that will choose one depending on its content and then include that parameter when the form is submitted.
Is javascript the way to achieve this?
You ask for javascript way so you can try this.
In order to identify 3 textboxes i've given id's to them.
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input class="textinput1" id='txt1' type="text"></input>
<input class="textinput2" id='txt2' type="text"></input>
<input class="textinput2" id='txt3' type="text"></input>
<input type='submit' id='submit'>
</form>
on submitting this form script will add name property to any of the 3 text boxes based on a logic of yours. so only that textbox content will be submitted.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* Any logic which select the textbox to be submitted */
id='txt1'; // it can be txt2 or txt3
$("#submit").click(function(){
$("#"+id).attr("name","text");
});
});
</script>
1.Create a PHP file in the same directory as the html.
2.Edit your form to point to that php file and name your text fields so you could refer to them.
<form method="post" action="formTester.php">
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input name="textinput1" class="textinput1" type="text"></input>
<input name="textinput2" class="textinput2" type="text"></input>
<input name="textinput3" class="textinput2" type="text"></input>
</form>
3. In your file formTester.php
<?php
// define variables and and get data from the text fields
$text1= $_POST["textinput1"];
$text2= $_POST["textinput2"];
$text3= $_POST["textinput3"];
// Now you can manipulate the data however you want ..add it to database, trim, validate etc
?>
Hope it helps,
Best
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input type="text" class="textinput1" name="textinput[]" value="input1" />
<input type="text" class="textinput2" name="textinput[]" value="input2" />
<input type="text" class="textinput3" name="textinput[]" value="input3" />
</form>
One option is to stack your values in an array and parse it on the backend. This removes the need for JavaScript.
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input type="text" class="textinput1" name="textinput[]"></input>
<input type="text" class="textinput2" name="textinput[]"></input>
<input type="text" class="textinput3" name="textinput[]"></input>
</form>

Chaining an input option after a select?

I'm wondering how I can chain an input box after chaining a selection in my form.
I'm using http://www.appelsiini.net/projects/chained to chain my selects and it works. However, I need to adjust this to also allow for the chaining of an input. In the below example it would be someone would choose an option such has an item has Strength on it then the select menu of value options then input the value. I'm trying to also incorporate into this where after those 3 options of item, controller, value are inputed the user has the option to filter more so another box appear with the same options of strength, agility, etc. http://jsfiddle.net/isherwood/XMx4Q/ is an example of work I used to incorporate this into my own work.
<form id="myform" name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div>
<label for="searchterm">Name:</label>
<input type="text" name="searchterm">
</div>
<div>
<div class="chainedSelectFilter">
<select name="specificFilter" class="attribute">
<option value="" selected>Select a Filter</option>
<option value="strength">Has Strength</option>
<option value="agility">Has Agility</option>
<option value="spirit">Has Spirit</option>
<option value="stamina">Has Stamina</option>
</select>
<select name="specificFilter" class="valueController">
<option value=">" selected>></option>
<option value=">=">>=</option>
<option value="=">=</option>
<option value="<="><=</option>
<option value="<"><</option>
</select>
</div>
</div>
</div>
<div>
<label for="submit"></label>
<input type="submit" name="submit" value="Filter">
</div>
Code reference below shows how to accomplish this. Here is jsFiddle that shows it's working.
HTML
<form id="myform">
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="Type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value=""/>
</div>
</form>
JS
$('select').change(function () {
$(this).next('input').fadeIn();
});
$('body').on('keyup','input.chain',function () {
$(this).parent().next('div').fadeIn();
});

Handling multiple select and same name of checkbox

I am having problems when I want to pass multiple value to backend from form.
Questions are:
How can I get all values in the multiple select in the backend.
How can I get the different value with same name in checkbox in the backend.
From the code in Jsfiddle, I'd like to show the select result in result.
By the way, I am using Django.
Full code is here: Jsfiddle
<form method="POST">
<select id="select-tag" name="tagging" multiple="multiple">
<option value="">Tagging Sample... </option>
<optgroup label="Type A">
<option value="Aa">Aa</option>
<option value="Ab">Ab</option>
<option value="Ac">Ac</option>
</optgroup>
<optgroup label="TypeB">
<option value="Ba">Ba</option>
<option value="Bb">Bb</option>
<option value="Bc">Bc</option>
</optgroup>
</select>
<input type="checkbox" value='00001' name="sample"></input>
<input type="checkbox" value='00002' name="sample"></input>
<input type="submit" value="Submit" class="submitted_btn" name="btn_action"></input>
</form>
You can use array type name in the html to get the value in backend.
<form method="POST">
<select id="select-tag" name="tagging[]" multiple="multiple">
<option value="">Tagging Sample... </option>
<optgroup label="Type A">
<option value="Aa">Aa</option>
<option value="Ab">Ab</option>
<option value="Ac">Ac</option>
</optgroup>
<optgroup label="TypeB">
<option value="Ba">Ba</option>
<option value="Bb">Bb</option>
<option value="Bc">Bc</option>
</optgroup>
</select>
<input type="checkbox" value='00001' name="sample[]"></input>
<input type="checkbox" value='00002' name="sample[]"></input>
<input type="submit" value="Submit" class="submitted_btn" name="btn_action"></input>
</form>

Categories

Resources