How can I update an element attribute with a modified value? - javascript

I am working with MachForm and in it when using pricing features it adds this to an li tag:
<li id="li_273" data-pricefield="text" data-pricevalue="8.48" >
The form also has this field as well:
<input type="text" class="element text medium" id="element_273" name="element_273" size="30" value="" />
Now what happens is, the form has been converted to an ajax auto complete which is fine and works. But the problem is that the first reference:
<li id="li_273" data-pricefield="text" data-pricevalue="8.48" >
Isn't going to be the right price for the item selected. So what I need is to be able to re-write that data-pricevalue based on an onclick function. In the autocomplete you are able to execute an onclick javascript command like so:
'onclick' => 'alert(\'You clicked on the '.$name.' fruit!\');',
Now I have the rest of the javascript that should allow me to take the data-pricevalue from the id (ex: id="li_273") and then multiple it by the value entered into the text box. The ultimate goal is to get data-pricevalue * input text to update the on-screen total value. But I am not sure how to get that data-pricevalue to re-write the proper price.

Related

How to Select a dropdown list in a javascrip site using selenium in python3?

I am stuck in the following html code taken from a site that uses Javascript. What I want is to select the item "Short_Budget_Report" in Selenium using Select moduele. The html code is as follows:
<input id="WD51" ct="CB" lsdata="{1:'20ex',8:'WD52',9:'2347',11:'Short_Budget_Report',14:'Load\x20View',18:'View',44:false,48:'WD51\x2dtlbl'}" lsevents="{Select:[{ResponseData:'delta',ClientAction:'submit'},{}]}" type="text" autocomplete="off" tabindex="0" ti="0" title="Load View" class="lsField__input urEdf2TxtEnbl lsEdfLeftBrdRadius lsEdf3TxtHlpBtn urEdfVAlign urBorderBox lsControl--explicitwidth" readonly="" value="Short_Budget_Report" style="vertical-align:top;width:20ex;">
What I have tried:
dropdown_id = driver.find_element_by_xpath('//*[#id="WD51"]')
dropdown = Select(dropdown_id)
dropdown.select_by_value('Short_Budget_Report')
This gives the following error:
raise UnexpectedTagNameException(
selenium.common.exceptions.UnexpectedTagNameException: Message: Select only works on <select> elements, not on <input>
You can simply use send_keys() function to select particular option in dropdown list.
First locate the element of dropdown list by any of find_element() function
use send_keys() function on that element to select any value from list right away
In short, doing it in following way should get done what you need:
driver.find_element_by_id('WD51').send_keys('Short_Budget_Report')

Different placeholder via Javascript on same input ID

I guess this is pretty basic yet I don't know how to solve this puzzle. What I have is two inputs generated by a plugin in Wordpress. What I want to do is to change the placeholders in the fields.
The problem is that the fields ID (which I use to call the inputs via Javascript) is the same, resulting in that only the first inputs placeholder changes.
The auto-generated HTML:
<input type="password" placeholder="Lösenord" name="swpm-19" id="swpm-19" value="" class="swpm-text swpm-large required ">
<input type="password" placeholder="Retype password Here" name="swpm-19_re" id="swpm-19" value="" class="swpm-text swpm-large required ">
The Javascript:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#swpm-19').attr("placeholder","Lösenord");
});
</script>
I have no idea how to call the second input since the ID's are the same. What I did notice is that the names of the inputs is different. The second inputs name is "swmp-19_re". Would it be possible to fetch the input in the Javascript via the name instead of the ID?
You cannot have duplicate id, this is invalid document.
You can use the attribute value selector to select the elements by using name attribute value.
$('input[name="swpm-19"], input[name="swpm-19_re"]').attr('placeholder', 'Lösenord');
You can also use starts with as
$('input[name^="swpm-19"]').attr('placeholder', 'Lösenord');
For more information on the type of CSS (attribute) selectors that jQuery supports check this page.

How to add another option to website and

I have a javascript that shows and hides options from a html form. What I am trying to do is be able for the user to add a new category and then write that into the database as an option and add that subject to the option form.
Here is an example of the html code,
<select id="team1" name="team1" style="display:none">
<option value="subcat1">subcat1</option>
<option value="subcat2">subcat2</option>
<option value="subcat3">subcat3</option>
I then want them to be able to add another subcat4 via the website.
the javascript i'm using is an if statement with show and hides from different selects.
The user needs to be able to enter the category name and add it to the relevant select.
Currently im unsure on how to get this to add and save the new subcat4 to the database and to the html.
Any help would be appreciated.
When you first load the page you construct the select element by using the values stored in the database.
Then you can have a form that posts the filled info and stores subcategories into the database. This form may contain the identifier of your select for knowing in which select you are assigning the new option. It could be in a hidden input.
here comes a simple example of that form
<form method='post' action='/your/action/here' >
<input type='hidden' name='main_category' value='team1' />
Subcategory: <input type='text' name='subcategory' value='' />
<input type='submit' name='submit_btn' value='submit' />
</form>
You could also do it without page refresh by using an ajax post (this should be your next step, make it first work the simple way) to store the info and then by appending the option to your select using javascript. Check the jquery append or the appendChild() if you are not using jquery.
With jquery you can do this code to append new child in your select element.
$('#team1').append('<option value="subcat4">subcat4</option>');

How to remove the values with jquery on deleting characters in textbox

I have this code
<input type="hidden" value="[{"value":1,"label":"Emmoia Boently"},{"value":6,"label":"John Smith"}]" name="group[users][]" id="users">
<input type="text" value="Emmoia--Boently, John--Smith, " name="autocompleter_group[users][]" id="autocompleter_userss" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
Now my problem is the current javascript is adding the values from textbox to the hidden feilds.
But when i delete the text then it don't deletes from the hidden input fields.
So i want to do in jquery that when i start deleting the text in main textbox then the value gets deleted in the hidden input field as well.
just like we do in SO when we delete the tag characters in ask question page
$("#autocompleter_userss").on("keyup", function() {
$("#users").val($(this).val());
});
Fiddle
UPDATE: Seems like you're looking for a tag editor. See this post for exhaustive links :)
$('input#1').change(function(){
$('input#hidden').val($(this).val());
});
Additionally, you could try some data-binidng libaries like knockout.js among others.

How do I make a drop down list selection update an image on a web page?

On the site http://www.gofundme.com/sign-up/ they have the cool ability to select your currency underneath where you enter an amount. When you change the currency it changes the symbol beside the amount you type in.
I'd like to do something similar with my website but don't have much of a clue about how to even go about it. Can anyone point me in the right direction?
Go easy on me guys; I've done a bit of website making before but never anything too spectacular.
The code on that site is all client-side, and is fairly simple.
You click the link, it invokes Javascript that shows the selection popup div.
When you select an item on the selection popup div, it also calls Javascript. That javascript modifies:
The original div's label text for the amount field (i.e. the big €)
The text below that describes your currently selected currency type (the one that pops up the div)
The data in the hidden form field, with the selected currency type
...and closes the popup div.
Edit: Apparently you also need the jQuery library in order to use the code in my answer :) You could substitute your own Javascript code, and get identical results, but it wouldn't look exactly like the code below.
Here is the code, ripped straight off "view source":
The amount box:
<div class="amt_box bg_white">
<label class="currency-display">$</label>
<input type="text" name="Funds[goalamount]" value="" class="big-field"
tabindex="1" />
</div>
The link that opens the popup div:
<h4>Display: US Dollars</h4>
The popup div:
<div class="currency currency-select-div" style="position:absolute; display:none;margin-left:45px;">
<ul>
<li>$ USD Dollar</li>
<li>$ CAD Dollar</li>
<li>$ AUD Dollar</li>
<li>£ GBP Pound</li>
<li>€ EUR Euro</li>
</ul>
</div>
The hidden form field:
<input type="hidden" id="currencyfield" value="USD" name="Organizations[currencycode]" />
The Javascript (jQuery) code that binds it all together:
$('.currency-select').click(function() {
$('.currency-select-div').show();
return false;
});
$('.currency-item').click(function() {
$('.currency-select-div').hide();
$('.currency-display').text($(this).attr('title'));
$('.currency-select').text($(this).text());
$('#currencyfield').val($(this).attr('code'));
You're going to want to uniquely identify the text that you're trying to change with your drop-down list first.
<span id="currencySymbol">$</span>
Then you're going to want to create a drop-down list that has the values you want.
<select id="currencySelect">
<option value="$">Dollars</option>
<option value="£">Pounds</option>
<option value="€">Euros</option>
</select>
Then you need to use JavaScript to change the value of the text based on the value of the drop-down.
document.getElementById('currencySelect').onchange = function(){
document.getElementById('currencySymbol').innerHTML = this.value;
}

Categories