[Resolved] get the select value of a select field of a form using JS

[Author]

Posts

[nabils]

Dear,
In my form, I have this field of type "select"
<div class="cred-field cred-field-booking-contract-type">
<label class="cred-label"> contract </label>
[cred_field field='booking-contract-type' post='booking' value='' urlparam='']
</div>
In the JS editor of the form, I am trying to capture the select value because I need it in my JS code. Could you please help?

Thank you

[Beda]

It would usually require a simple JS:
https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript

If you have a select element that looks like this:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Running this code:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Would make strUser be 2. If what you actually want is test2, then do this:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

However Toolset Forms will produce a Select Field like this, when you have a Form with ID 82, and this is the first form on the page.
If it's the second, or third, the Select Field ID will become from "cred_form_82_1..." to "cred_form_82_2...":

<select id="cred_form_82_1-select-1-1533974175" class="form-control wpt-form-select form-select select" output="bootstrap" preset_value="" urlparam="" value_escape="" make_readonly="" placeholder="" select_text="--- not set ---" data-wpt-type="select" name="wpcf-select">
<option value="" class="wpt-form-option form-option option" data-wpt-type="option" data-wpt-id="cred_form_82_1_cred_form_82_1-select-1-1533974175" data-wpt-name="wpcf-select" selected="selected">--- not set ---</option>
....
</select>

So in this case it's much better to use getElementsByName() instead of listening to the ID of that select field.

So the code to get the selected value of a Select field in a Form with JS is

var e = document.getElementsByName("wpcf-field-slug");
var strUser = e.options[e.selectedIndex].value;

Note that now you can just use your Field's Slug prefixed with wpcf.

That will give you the selected value of the select field.

Make sure to first fix Toolset Forms with this Erratum other wise JS and CSS will fail:
https://toolset.com/errata/quotes-in-the-extra-css-or-js-content-will-get-backslashed/

[nabils]

Hi
I have download the fix last week already.
I tried both
var e = document.getElementsByName("wpcf-booking-contract-type");
var aa = e.options[e.selectedIndex].value;

and

var ee = document.getElementById("cred_form_6910_1-select-1-1534010971");
var aa = ee.options[ee.selectedIndex].text;:

But none of them worked.
When I window.alert(aa) nothing shows up (the windows does not appear even)

[Christian Cox]

In the JS editor of the form, I am trying to capture the select value because I need it in my JS code.
- When are you trying to capture the value? When the select field is changed, when the form is submitted, or when the page first loads, etc?
- Please share all the JavaScript code you have placed in the JS panel. The code you provided has no context, so I can't tell why it's not working.

[nabils]

Hi
Here part of my form:
<div class="cred-field cred-field-date-join" >
<label class="cred-label">
Enter the first day you will come to accommodation<font color="red">*</font> (it should be on [types field='first-day-of-semester' style='text' format='F j, Y' id="643"][/types] or AFTER)
</label>
[cred_field field='date-join' post='booking' value='[wpv-post-today]' urlparam='']
</div>
[wpv-conditional if="( '[types usermeta="gu-student" user_current="true"][/types]' eq 'No' )"]
<div class="cred-field cred-field-booking-departure-date" >
<label class="cred-label">
Your departure date
</label>
[cred_field field='booking-departure-date' post='booking' value='' urlparam='']
</div>
[/wpv-conditional]
[wpv-conditional if="( '[types usermeta="gu-student" user_current="true"][/types]' eq 'Yes' )"]
<div class="cred-field cred-field-booking-contract-type">
<label class="cred-label">
You want to rent a room until...<font color="red">*</font> Check the semester rental and annual rental hidden link" target="_blank">HERE
.
</label>
[cred_field field='booking-contract-type' post='booking' value='' urlparam='']

</div>
[cred_show_group if="($(booking-contract-type) eq '4')" mode="fade-slide"]
<font color="red">You will have to checkout 20 weeks after your arrival date </font>
[/cred_show_group]

[cred_show_group if="($(booking-contract-type) eq '8')" mode="fade-slide"]
<font color="red">You will have to checkout 40 weeks after your arrival date </font>
[/cred_show_group]

[/wpv-conditional]

<p hidden id='semesterstartdate'>[types field='first-day-of-semester' style='text' format='F j, Y' id='643'][/types] </p>

and here my JS (problematic code is commented):

jQuery(document).ready(function($){
var x = $('#semesterstartdate').text();
var d = Date.parse(x);

from = jQuery('input[name="wpcf-date-join[display-only]"').attr('id');
to = jQuery('input[name="wpcf-booking-departure-date[display-only]"').attr('id');

$( "#"+from ).on('change',function(){

//first code
//var e = document.getElementsByName("wpcf-booking-contract-type");
//var aa = e.options[e.selectedIndex].value;

//second code
//var e = document.getElementById("cred_form_6910_1-select-1-1534010971");
//var aa = e.options[e.selectedIndex].text;

// window.alert("aa");

if($( "#"+from ).val() !=''){
$('.cred-field-date-join .js-wpt-date-clear').show();
}else{
$('.cred-field-date-join .js-wpt-date-clear').hide();
}

});

$( "#"+to ).on('change',function(){

if($( "#"+to ).val() !=''){
$('.cred-field-booking-departure-date .js-wpt-date-clear').show();
}else{
$('.cred-field-booking-departure-date .js-wpt-date-clear').hide();
}

});

$( "#"+from ).datepicker({
changeMonth: true,
changeYear: true,
minDate: new Date(d),
onClose: function( selectedDate ) {
$( "#"+to ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#"+to ).datepicker({
changeMonth: true,
changeYear: true,
minDate: 0,
onClose: function( selectedDate ) {
$( "#"+from ).datepicker( "option", "maxDate", selectedDate );
}
});

$("form.cred-form").on("submit", function(e){
if ($('form.cred-form').valid()) {
$('input.wpt-form-submit').hide();
$("cc").text("Submitting... please wait...");
} else {
$("input.wpt-form-submit").show();
}
});
});
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}

In JS, I tried "first code" and "second code", but both did not work.

Thank you

[Christian Cox]

I think you can use jQuery's attribute selector to get the element, then get its value and its selected option text.

var $e = $('select[name="wpcf-booking-contract-type"]');
var val = $e.val();
var text = $e.find('option:selected').text();

[nabils]

Thank you
It works!