js mulipe-input does not pass all values? - javascript

i have problem plz help
when i click on button it pass just an array(speaker) without any other parameters(sub,compose)
i try to sent just the parameter (sub,compose) but its does not pass,
i need when i click button pass all(array(speaker) and (sub,compose)
this is hrml code
<multi-input>
<input list="speakers">
<datalist id="speakers">
<option value="Banquo"></option>
<option value="Bishop Stokesly of London"></option>
<option value="Caesar’s Second Watchman"></option>
<option value="Celia"></option>
<option value="Cleopatra"></option>
<option value="Dogberry"></option>
<option value="Falstaff"></option>
<option value="First Servant"></option>
<option value="Hamlet"></option>
<option value="Juliet"></option>
<option value="Macbeth"></option>
</datalist>
</multi-input>
<div class="form-group">
<input class="form-control" placeholder="Subject:" id="sub">
</div>
<div class="form-group">
<textarea id="compose" class="form-control" style="height: 300px">
<button type="submit" name="submit" class="btn btn-primary" id="get"><i class="far fa-envelope"></i> Send</button>
and this is js code
const getButton = document.getElementById('get');
var sub = document.getElementById('sub').value;
var compose= document.getElementById('compose').value;
const multiInput = document.querySelector('multi-input');
getButton.onclick = () => {
var src="sent.php?sub="+multiInput.getValues()+'&sub='+sub+'&compose='+compose+'';
window.location.href=src;
}
just the array (multi-input) pass the other not whay ?

To specify your array as URL parameters, you need to add "[]" before "=" sign. In that way php recognizes it as array. Otherwise the value will be just a string.
/*------ Change This -------*/
var src="sent.php?sub="+multiInput.getValues()+'&sub='+sub+'&compose='+compose+'';
window.location.href=src;
/*----- To this -------*/
var src="sent.php?sub[]="+multiInput.getValues()+'&sub='+sub+'&compose='+compose+'';
window.location.href=src;
Secondly, since your 'onclick' function does not update the values of variables you've defined above; it just not get the latest value of them. To solve this issue moving variables inside the function is enough.
const getButton = document.getElementById('get');
const multiInput = document.querySelector('multi-input');
getButton.onclick = () => {
/*----- Define them in here -------*/
var sub = document.getElementById('sub').value;
var compose= document.getElementById('compose').value;
var src="sent.php?sub="+multiInput.getValues()+'&sub='+sub+'&compose='+compose+'';
window.location.href=src;
}

Related

Get the selected option inside a <select> tag with javascript

Hello I am trying to get the value from a select tag, using javascript, that is generated within a razor view using C#.
This is the html where the select tag is generated:
<form id="asignRol" method="post">
<select name="users" id="userChange">
#foreach (var user in Model.UserAndRolesInfo)
{
<option value="#user.Username">#user.Username</option>
}
</select>
<select name="rol" id="roleChange">
#foreach (var rol in #Model.roleAvailability)
{
<option value="#rol.Name">#rol.Name</option>
}
</select>
<button type="button" id="submitButton" class="btn btn-primary">Asignar rol</button>
</form>
The html select tag is generated as expected:
HTML phot
In a different js file I am trying to get the values of the selected options:
var submitButton = document.getElementById("submitButton");
var userSelect = document.getElementById("userChange");
var userSelectValue = userSelect.options[userSelect.selectedIndex].value;
var roleSelect = document.getElementById("roleChange");
var roleSelectValue = roleSelect.value;
submitButton.addEventListener("click", function () {
console.log(userSelectValue);
console.log(roleSelectValue);
})
With the result of only getting the default value:
Result
I tried passing the event and event.preventdefault.
You need to get the value when the event occurs not before it. In your case event click.
var submitButton = document.getElementById("submitButton");
var userSelect = document.getElementById("userChange");
var roleSelect = document.getElementById("roleChange");
submitButton.addEventListener("click", function() {
var userSelectValue = userSelect.options[userSelect.selectedIndex].value;
var roleSelectValue = roleSelect.options[roleSelect.selectedIndex].value;
console.log(userSelectValue);
console.log(roleSelectValue);
})
<form id="asignRol" method="post">
<select name="users" id="userChange">
<option value="#user.Username">#user.Username</option>
<option value="moses">moses</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
</select>
<select name="rol" id="roleChange">
<option value="#rol.Name">#rol.Name</option>
<option value="mouse">mouse</option>
<option value="elephant">elephant</option>
<option value="fox">fox</option>
</select>
<button type="button" id="submitButton" class="btn btn-primary">Asignar rol</button>
</form>

How to use a value as a name of a file?

I'm a newbie in JS. I want to change the background image of a div by using values from tag. I can change the background-color but now I want to use the value as the name of a jpg file. Does anyone know how? The values will be 1,2,3 and the name of the graphic files are 1.jpg, 2.jpg and 3.jpg.
<div class="container" id="wrapper">
<form>
<label for="my-select">Choose the continent: </label>
<select
name=""
id="my-select"
value="Choose the continent"
onChange="myFunction()"
>
<option value="default">default</option>
<option value="1">Asia</option>
<option value="2">Australia</option>
<option value="3">South america</option>
</select>
</form>
</div>
const myWrapper = document.querySelector("#wrapper");
function myFunction() {
var x = document.getElementById("my-select").value;
myWrapper.style.backgroundImage = url("images/x.jpg");
}
// I know the last line won't work.
You were close, try something like this:
const myWrapper = document.querySelector("#wrapper");
function myFunction() {
var x = document.getElementById("my-select").value;
myWrapper.style.backgroundImage = "url(images/" + x + ".jpg)";
}
<div class="container" id="wrapper">
<form>
<label for="my-select">Choose the continent: </label>
<select
name=""
id="my-select"
value="Choose the continent"
onChange="myFunction()"
>
<option value="default">default</option>
<option value="1">Asia</option>
<option value="2">Australia</option>
<option value="3">South america</option>
</select>
</form>
</div>
If you want even more readable code, you can use template literals instead of string concatenation, like this:
myWrapper.style.backgroundImage = `url(images/${x}.jpg)`;
Your Solution is mostly correct. You only needed to insert the entire string to the CSS-Styling, as you would normally in CSS.
You then needed to concatenate the X-Value to the string, so it gets the number stored in it instead of the x as a direct character.
const myWrapper = document.querySelector("#wrapper");
function myFunction() {
var x = document.getElementById("my-select").value;
// You'll need to insert the CSS-Style as an entire string.
// We concatenate the Variable X to the string, so it gets dynamicly used.
myWrapper.style.backgroundImage = "url('images/"+x+".jpg')";
}

Javascript and HTML - Getting value from a SPAN and Selection [duplicate]

This question already has answers here:
Get selected option text with JavaScript
(16 answers)
Closed 4 years ago.
I am fairly new to Javascript programming. I would like to get the selected value from the list of values presented to the customer. I want to display this as a simple text saying, the selection was from the options provided. Let me paste the code snippet
<span id="Step2" style="display:none">
<form>
<fieldset>
<legend>Type of Customization</legend>
<p>
<label>Available Customization</label>
<select id = "myCust">
<option value = "1">New Dimension Table</option>
<option value = "2">Add a Fact Table</option>
<option value = "3">Completely New Form</option>
<option value = "4">Edit an Old Form</option>
<option value = "5">Others</option>
</select>
</p>
</fieldset>
</form>
so from the provided options, if the person chooses, say, "Completely New Form" I would like to display that into the HTML
I tried
document.getElementById("myCust")
but that won't work.
function getCust() {
var typeofCust = document.getElementById("myCust");
var cust = typeofCust.querySelector('option[value="'+typeofCust.value+'"]');
document.getElementById('selected-customer').innerText=cust.innerText;
}
document.getElementById('myCust')
.addEventListener('change', getCust)
<div id="FooterTableStep2" style="background-color:Silver">
Selected Customization : <span id="selected-customer"></span>
</div>
<form>
<fieldset>
<legend>Type of Customization</legend>
<p>
<label>Available Customization</label>
<select id="myCust">
<option value="1">New Dimension Table</option>
<option value="2">Add a Fact Table</option>
<option value="3">Completely New Form</option>
<option value="4">Edit an Old Form</option>
<option value="5">Others</option>
</select>
</p>
</fieldset>
</form>
getElementById returns the actual HTML element object.
const selectEl = document.getElementById('myCust');
const customer = selectEl.value;
console.log(customer); // selected value
It's also worth noting that most elements can also query their children
const row = document.querySelector('td:nth-child(13)');
const selectEl = row.getElementById('some-id');
Updated to include your comment:
<td id="FooterTableStep2" style="background-color: silver;">
Selected Customization: <span id="selected-customer"></span>
</td>
<script>
function getCust() {
var typeofCust = document.getElementById("myCust");
var cust = typeofCust.querySelector('option[value="' + typeofCust.value + '"]');
document.getElementById('selected-customer').innerText = cust.innerText;
}
</script>

Passing dynamic values to a jQuery Plugin

The jQuery plugin is looking for some value to set:
$('.toClone_example88888').metalClone({
position:'after',
btnClone : '.btn_toClone_example88888'
});
The problem is the class names for the item to be cloned, and the corresponding button will be coming from a database so the values need to be dynamic.
I've tried this and while it did not work, it did not produce any console errors either. What am I missing or is this even possible to do?
I found this SO question and believe it has the same core components (Sending dynamic variable to jquery) but applying those same concepts didn't work with my implementation.
$('.cloneBtn').on('click', function(){
var getDestinationOfWhereClonedCopyShouldGo = $(this).data("destinationclone");
$('#' + getDestinationOfWhereClonedCopyShouldGo).metalClone({
position:'after',
btnClone : '.cloneBtn'
});
});
I also tried this but same this, didn't work but no error message either:
var cloneThis = function(){
$('.cloneBtn').on('click', function(){
var getDestinationOfWhereClonedCopyShouldGo = $(this).data("destinationclone");
putCloneHere(getDestinationOfWhereClonedCopyShouldGo);
});
}
var putCloneHere = function(element){
$('#' + element).metalClone({
position:'after',
btnClone : '.cloneBtn'
});
}
Additional HTML as requested:
<div id="firstOne">
<input type="text">
<select id="m">
<option value="">--Please Select</option>
<option value="Hello">Hello</option>
</select>
</div>
<div class="container_body">
<input type="button" class="cloneBtn" value="Create New Copy" data-destinationclone="firstOne">
</div>
<div id="secondOne">
<input type="text">
<select id="m">
<option value="">--Please Select</option>
<option value="Hello">Hello</option>
</select>
</div>
<div class="container_body">
<input type="button" class="cloneBtn" value="Create New Copy" data-destinationclone="secondOne">
</div>
Here is a jsfiddle (which includes the plugin code).

Trying to redirect with javascript

I'm very new to javascript and I'm trying to make different events occur depending on types of input. I have the following in my html header:
<script type="text/javascript">
function validateForm(){
var val=document.getElementsByName("destination");
if (val == "deprecated"){
window.location="http://website.com/";
}
}
</script>
Then in the body, I have the following:
<select name="destination">
<option value="current_builds">Current Builds</option>
<option value="deprecated">Deprecated Files</option>
<option value="mailing_list">Mailing List</option>
</select><br/>
<input type="button" value="next >" onClick="validateForm()" />
This however doesn't do anything. It just stays on the same page. I also tried wrapping it inside a form tag by saying:
<form name="my_form" onSubmit="validateForm()">
...
</form>
and then having matching javascript:
var val = document.forms["my_form"]["destination"].value
But this didn't work either.
Anyone see what the issue is?
Thanks.
I fixed your function and tested it:
function validateForm(){
var val=document.getElementsByName("destination");
var theSelectedOption = val[0].options[val[0].selectedIndex].value;
if (theSelectedOption == "deprecated"){
window.location="http://website.com/";
}
}
You need to grab the value from the selected element. Since document.getElementsByName returns an array, try using this
var val = ​document.getElementsByName("destination")​​​​​[0].value
You need to get the value from the selected option. Like so:
var index = document.getElementsByName("destination").selectedIndex;
var val=document.getElementsByName("destination").options[index].value;
That will retrieve the value of the selected option.
You're missing the href attribute, you want to use:
window.location.href = 'URL';
do the following
<select name="destination" id="destination">
Your JavaScript
val=document.getElementsById("destination").value;
Put an alert(val) in your if to see if ever evaluates to true
Try this with a little bit of jquery
Redirect using drop down
<form name="my_form">
<select id="destination">
<option value="current_builds">Current Builds</option>
<option value="deprecated">Deprecated Files</option>
<option value="mailing_list">Mailing List</option>
</select><br/>
<input type="button" value="next >" id="submit">
</form>
​
$('#submit').click(
function validateForm(){
var e = document.getElementById("destination");
var val = e.options[e.selectedIndex].value;
if (val == "deprecated"){
window.location="http://website.com/";
}
});
Try it with id's instead of name, an id is a unique element. Javascript supports
var destination = document.getElementById("destination");
if (destination.options[destination.selectedIndex].value == "deprecated"){
window.location="http://website.com/";
}
HTML
<select id="destination">
<option value="current_builds">Current Builds</option>
<option value="deprecated">Deprecated Files</option>
<option value="mailing_list">Mailing List</option>
</select>
<br />
<input type="button" value="next >" onclick="javascript:validateForm();" />

Categories