Select others, then show input text in Laravel

Select others, then show input text in Laravel - javascript

<select id="position" class="form-control" name="position" onchange='checkvalue(this.value)'>
<option value="Option A">Gedung A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
<option>Other...</option>
</select>
<input type="text" id="other_text" class="form-control" name="position" placeholder="Enter your location" required style='display:none' />
<script>
function checkvalue(val)
{
if(val==="Other...")
document.getElementById('other_text').style.display='block';
else
document.getElementById('other_text').style.display='none';
}
</script>
Everything works when picking up others, but I get an error when choosing another option. Please help,, i'm newbie in laravel
This is my controller to save to database #Tran Audi
My Controller

Yours:
<select id="position" class="form-control name="position" onchange='checkvalue(this.value)'>
Missing a closing speech mark
<select id="position" class="form-control" name="position" onchange='checkvalue(this.value)'>

Related

Transfer data from input to another input

I have some inputs. "input and select" data in the id value of "customer-1", I want to match and transfer with "class" value if click add button.
For example, id="customer-1" "input and select" data in, I want it imported into class="customer-1".
$('.customer-add').click(function(){
var customer_id = $('.customer-add').closest('.customer-bar').find("input").attr("id");
$("." + customer_id).val($("#" + customer_id).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-1">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-1">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
<br><br><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-2">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-2">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
I updated my code. I was able to transfer a single input, but I have to transfer them all

Change id to class
use closest and next
I assume you meant copy from customer1 to customer2
I cannot make a working snippet because you have the same IDs and no names, but the code will look this this
$(function() {
$(".customer-add").on("click",function() {
const $container = $(this).closest(".customer-bar")
const $nextContainer = $container.next(".customer-bar")
const $currentElements = $(":input",$container);
const $nextElements = $(":input",$nextContainer);
$currentElements.each(function(i) {
console.log(i,$(this).attr("class"))
$nextElements.eq(i).val($(this).val())
})
})
})

I updated my code. I was able to transfer a single input, but I have to transfer them all

Using javascript to calculate form

I have a question on how to use javascript to calculate a form, but I can't seem to get it. Sorry if it's obvious but I'm new to scripting. Okay, so I have a form in html where you can select different options:
if (((document.getElementById("age").value = "15")||(document.getElementById("gender").value = "male")||(document.getElementById("psy").value = "sedentary")))
{
return("2200cal");
}
<div class="container">
<div class="row">
<label for="age">Age</label>
<input type="text" id="age" name="age" placeholder="Enter age">
<div class="row">
<label for="gender">Gender</label>
<select id="gender" name="gender">
<option value="" disabled selected hidden>Select gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="row">
<label for="fname">Physical Activity</label>
<select id="psy" name="psy">
<option value="" disabled selected hidden>Select activity level</option>
<option value="sedentary">SEDENTARY</option>
<option value="mod">MOD. ACTIVE</option>
<option value="active">ACTIVE</option>
</select>
<input type="submit" value="Submit" onclick="if">
</div>
and using it I wanted to use javascript to output a number based on this chart:
output chart
I tried using an equation to output a value by using if and then statements but it doesn't work, especially when it needs to find the result from all three variables together in the code.
Edit: fixed values but still not outputting anything.

How to change attribute min in input field using jquery

I have input field with arrow (up, down). Next to it I have two buttons, + and -. When I click on the input field and then click the arrow the system gets the value from dropdown list. This is ok. But when I click the second one the system doesn't get the value from the dropdown list but he add 1 value. Where is the problem?
$(document).ready(function() {
$("#quantity_wanted").attr({
"min": parseInt($('#group_psoft :selected').val())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">
Dropdownlist above product name: http://prestashop.suszek.info/pl/summer-dresses/printed-summer-dress

You need to add a event listener to select so that min is updated every time dropdown is selected.
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print" onChange='group_psoft_onChange()'>
In javacript add the code to change value of min inside function group_psoft_onChange()
$(document).ready(function() {
function group_psoft_onChange(){
$("#quantity_wanted").attr({
"min": parseInt($('#group_psoft :selected').val())
});
}
});

As Rohit Agrawal Jquery solution works well, this is a JavaScript version of the answer because you tagged JavaScript.
Shorter version
function dropdownChanged(d){
document.getElementById("quantity_wanted").value = d.value;
}
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print" onchange="dropdownChanged(this)">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">
Other option
var d = document.getElementById("group_psoft");
d.addEventListener("change",dropdownChanged);
function dropdownChanged(){
var dropdownValue = d.options[d.selectedIndex].value;
document.getElementById("quantity_wanted").value = dropdownValue;
}
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">

How to set via selected options changes in popup menu?

I have these options:
<form>
<select id="poSelect" >
<option selected disabled>Choose here</option>
<option id="buyeroption" value="100101">I am a Buyer</option>
<option id="garageoption" value="100102">I am a Garage</option>
</select>
<label>Full Name</label>
<input type="text" />
<label>Email Address</label>
<input type="email" />
<label>Password</label>
<input type="password" />
<label id="industrylabel" >Select Your Brand</label>
<select id="industryoption">
<option selected disabled>Select</option>
<option value="Renault">Renault</option>
<option value="Pegaut">Pegaut</option>
<option value="Citroen">Citroen</option>
</select>
<div class="form-check-label">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
So what I need is when user select I am a Buyer label "Select your Brand" and industry option select to be hidden but when I click I am garage to appear.

<form>
<select id="mySelect">
<option id="apple">Apple</option>
<option id="orange">Orange</option>
<option id="pineapple">Pineapple</option>
<option id="banana">Banana</option>
</select>
</form>
<p></p>
<button onclick="myFunction()">textbox1</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").options.namedItem("banana").text;
document.getElementById("demo").innerHTML = x;
}
</script>
Maybe you want something like that if you want to change any thing please check this link:-http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_options6

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>

Develop Reference

JavaScript is the programming language of the Web.

Select others, then show input text in Laravel - javascript

Yours: <select id="position" class="form-control name="position" onchange='checkvalue(this.value)'> Missing a closing speech mark <select id="position" class="form-control" name="position" onchange='checkvalue(this.value)'>

Related

Transfer data from input to another input

Using javascript to calculate form

How to change attribute min in input field using jquery

How to set via selected options changes in popup menu?

Change the placeholder when the select option is changed using jQuery

Categories

Resources