Select combobox value and send it to next page by hidden field - javascript

I have a select combo box , I have to catch the value of selected item of combo box and set it for a hidden field so that I can catch it in next page. But I am not able to do it. Can any one help me in this.
My form tag is as follow ,
<form class="well" name="ddm" id="ddm" style="margin-left: 30px;" action="<%=request.getContextPath()%>/controller/SMSManagementController">
<input type="hidden" name="flowName" value="PERSIST_SCHOOLYEAR_INFO" >
<input type="hidden" name="schoolYearId" id="schoolYearId" value="">
next my select tag is ,
<div class="form-group control-group">
<select class="form-control selectpicker" name="schoolYear" id="schoolYear">
<option>--Select Grade--</option>
<c:forEach var="grade" items="${gradeInfo}">
<option value="${grade.getDropDownId()}">${grade.getDropDownName()}</option>
</c:forEach>
</select>
</div>
I used javascript to do this as,
<script language="JavaScript">
var schoolYear = document.form.schoolYea.value;
document.ddm.schoolYearId.value = schoolYear;
document.write (schoolYear);
</script>
What is the mistake I am doing?

Guys I solved it like this. ,
<script type='text/javascript'>
$(function() {
$('#schoolYear').change(function() {
// get value from combobox
var x = $(this).val();
// set it to hidden fields
$('#schoolYearId').val(x);
});
});
</script>
it worked.

Related

Concatenate select field value and text field value in to one text filed

I have following form fields
<input type="text" id="domain" name="domain">
<select id="sub" name="sub">
<option value="TEST.SITE">TEST.SITE</option>
</select>
<input type="hidden" id="full" name="full">
How can I concatenate user inputs of text field and select field and insert that into the 3rd hidden
field?
Ex:
text field: HELLO
select field : TEST.SITE
value of full field should be : HELLO.TEST.SITE
You can use jQuery for the same:
$(function(){
$("#formId").on("submit", function(){ // change your formId here
const domain = $("#domain").val(); //get domain value
const sub = $("#sub").val(); // get sub value
$("#full").val(domain + "." + sub); // join them with .
})
})
You can use this code, It will change the hidden field on Blur event of sub text field,
You can change event according to your requirement,
<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
<input type="text" id="domain" name="domain">
<select id="sub" name="sub">
<option value="TEST.SITE">TEST.SITE</option>
</select>
<input type="hidden" id="full" name="full">
<script>
$(document).ready(function(){
$('#domain').on('blur', function(){
var domain = $('#domain').val();
var sub = $('#sub').val();
var full = domain + '.' + sub;
$('#full').val( full );
});
});
</script>
Working example: https://paiza.io/projects/P13ImGFxhiOfcEaEn4RxTA

Concatenate two fields and use this value to change/set value of a hidden field

Here is what I want to achieve. I have a requirement in which there is one dropdown for country codes and another input field for mobile number. I want to send country code and mobile input value as combined value so for that I am using a hidden field. When not using a hidden field it is easy to change value of a third tag element but that will not send value when form is submitted. So hidden field has to be used. So I have tried doing this but it is not changing value of hidden field.
<html>
<head>
<script language="javascript">
var dropdown = '';
var mobilenum = '';
function calldropdown()
{
dropdown = document.getElementById("country_code_id").value;
return dropdown;
}
function calltxtfield()
{
mobilenum = document.getElementById("mobileid").value;
return mobilenum;
}
function codemobile()
{
document.getElementById("codemobileid").value = calldropdown() + ' ' + calltxtfield;
alert(document.getElementById("codemobileid").value);
}
</script>
</head>
<body>
<form>
<select name="country_code" id="country_code_id" onchange="calldropdown()">
<option value="">Select</option>
<option value="+975">Bhutan</option>
<option value="+977">Nepal</option>
<option value="+94">Sri Lanka</option>
</select>
<input type="text" name="mobile" id="mobileid" onchange="calltxtfield()" />
<input type="hidden" name="codemobile" id="codemobileid" value="" />
<input type="submit" name="submit" value="Submit" onclick="return codemobile();" />
</form>
</body>
</html>
I can not explain it right now, but name="codemobile" seems to silently shadow function codemobile(). Rename one of the two and it works.
Also note that right now you are concatenating the function body (... + calltxtfield;), it should rather be ... + calltxtfield();

How to change the content of a page with javascript based on select input?

Let's say I have a webpage like this:
<div style="margin:auto;text-align:center;padding-top:10px;">
<form action="" method="POST">
<p style="text-align:center;">
<select>
<option value="blogs">blogs.php</option>
<option value="portfolio">portfolio.php</option>
<option value="contact">contact.php</option>
<option value="home">home.php</option>
</select>
</p>
<p style="text-align:center;">
<input type="submit" name="submit" value="Submit"/>
</p>
</form>
</div>
<div class="pagetitle">
<h5>Option Value (for example blogs)</h5>
</div>
As you can see, a user can choose from 4 options in the select menu. I want to know ,is there any way to change the content of this div => <div class="pagetitle"> with javascript onsubmit ? For example if a user choosed blogs.php ,the h5 tag will change to <h5>blogs</h5> & if he choosed portfolio.php ,it'll be changed to <h5>portfolio</h5> . I really appreciate if you know how to do this ... thanks in advance!
You'll need to start by adding a javascript function to handle the event.
<script>
function changedSelect(x)
{
document.getElementById('pageTitleDiv').innerHTML = "<h5>"+x+"</h5>";
}
</script>
And then you'll need to trigger the event when the "select" box is changed.
<select onchange="changedSelect(this.value)">
Finally, I would give the div an "ID" so that it is specifically altered.
<div class="pagetitle" id="pageTitleDiv">
You need to bind a jquery .change event to the select element and have it's selected value populated as the text of h5 tag
<script>
$(document).ready(function(){
$('select').change(function()
{
$('h5').text($(this).val());
}).change(); // this is optional - it basically invokes the change event as soon as the function is registered.
});
</script>
Example : https://jsfiddle.net/DinoMyte/6x80vabm/4/
Using vanilla javascript, I added an id to the select element and used javascript to get the value of the select option, then I updated the element on the DOM.
<div style="margin:auto;text-align:center;padding-top:10px;">
<form action="" method="POST">
<p style="text-align:center;">
<select id="myselect">
<option value="blogs">blogs.php</option>
<option value="portfolio">portfolio.php</option>
<option value="contact">contact.php</option>
<option value="home">home.php</option>
</select>
</p>
<p style="text-align:center;">
<input type="submit" name="submit" onclick="myFunction()" value="Submit"/>
</p>
</form>
</div>
<div class="pagetitle">
<h5>Option Value (for example blogs)</h5>
</div>
<script>
function myFunction() {
var x = document.getElementById("myselect").selectedIndex;
var _value = document.getElementsByTagName("option")[x].value;
document.getElementsByTagName('h5')[0].innerText = _value
}
</script>
Note: This can be achieved in several ways using vanilla JS or libraries, but I think this answers your question.

Issue with copying selected text using jQuery

This is my function to copy the selected item from the select box and below that is the HTML code.
<script type="text/javascript">
$(document).ready(function() {
$("#copy").click(function() {
var selected = $("#basket").val();
$("#ingredient").append(selected + '\n');
});
});
</script>
Basket
<select size=3 class="form-control" name="basket" id="basket">
<option value='apples'>apples</option>
<option value='chicken'>chicken</option>
<option value='potato'>potato</option>
</select>
<br>
<center>
<a id="copy" class="btn btn-primary" role="button">Copy to Ingredients</a>
</center>
Ingredients
<textarea rows=10 style="resize: none" class="form-control" id="ingredient" name="ingredient"></textarea>
I'm able to select and copy using the button. However, the issue I'm facing is that when the textarea is cleared manually and when the item is selected to copy using the button, it doesn't work.
Any form of help is appreciated. Thank you.
You need to make use of .val():
$("#copy").click(function(){
var selected = $("#basket").val();
$("#ingredient").val($("#ingredient").val() + selected+'\n');
});
DEMO
$("#copy").click(function(){
var selected = $("#basket").val();
alert(selected);
var x=$("#ingredient").val()+selected;
$("#ingredient").val(x);
});

Using JQuery to display a hidden div with slideup and slidedown

I have made this form to let certain options appear when the user selects 'Yes' from my select form. I cannot get the div I have hidden to display at all, but I have used the Console and found that at least changing the select to yes does infact make my if statement run. I've ran a test and JQuery is working, but
Can anyone help me identify where I am going wrong?
<form method="post" action="quizcreatescript.php" name="quizcreateform" id="quizcreateform">
<select name="choosemarks" id="choosemarks">
<option value="noweights">No</option>
<option value="yesweights">Yes</option>
</select>
<!-- >This div is hidden until the user selects yes to add own marks<-->
<div class="hide" id="hiddendiv1"><!-- this select box will be hidden at first -->
<div class="input select">
<input type="text" name="quizcorrectaward" id="quizcorrectaward"><br>
<input type="text" name="quizincorrectaward" id="quizincorrectaward"><br>
</div>
</div>
<script type="text/javascript">
$("#choosemarks").change(function(){ // when #choosemarks changes
if ($(this).val() == "yesweights" ) { // if user selects to add own marks $(".hiddendiv1").slideDown("fast"); // if yes show the hidden div
}
else { $(".hiddendiv1").slideUp("fast"); //otherwise, hide the div again.
}
});
</script>
<input type="submit" name="createthequiz" id="createquiz" value="Create Quiz">
</form>
And the CSS form has
.hide {
display:none;
}
This:
$(".hiddendiv1")
does not select this element:
<div class="hide" id="hiddendiv1">
That would be this:
$("#hiddendiv1")
Use # for ID and . for classes, and it probably works ?
FIDDLE

Categories