Member Avatar for badmullah_1
badmullah_1 0 Newbie Poster

hi
I need your help if you know JS to fetch 3 values

//value of JID2 input
//value of slider
//value of the NOTES

but since JS is new to me i would need your help please.
it is a form with a few controls that user can check , then he she clicks on submit and
then I need to know what the values of the controls are when constructing 'yourMessage' variable

Thank you

<body onload="loaded();">
<p>Job ID:</p>
<input type="text" id ="jid2" name="jid2">
<p>Use the slider to select your Satisfacion  </p>
<p>score for the service provided.
<div class="slidecontainer">
  <input type="range" min="1" max="10" value="5" class="slider" id="myRange">
  Value: <span id="demo"></span>/10</p>
</div>
<div>
   <textarea rows="5" cols="40" name="NOTES" placeholder="Additional comments:"></textarea>
   <br>
</div>

<script>
var slider = document.getElementById("myRange");
var input = document.getElementById("input");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
const button = document.createElement('button')
button.innerText = 'SUBMIT'
button.id = 'mainButton'
button.addEventListener('click', () => {
//NEED:
//value of JID2 input
//value of slider
//value of the NOTES

var yourMessage = "my message"
var subject = " my subject "
var emailto = "abc@gmail.com"
var wmail="mailto:"+emailto +"?subject="+subject+"&body="+yourMessage;
window = window.open(wmail, 'emailWindow')
  })
  document.body.appendChild(button)

slider.oninput = function() 
{
  output.innerHTML = this.value;
}
function loaded()
{
    const urlSearchParams = new URLSearchParams(window.location.search);
    const params = Object.fromEntries(urlSearchParams.entries());
    if(params.jid2)
    {
      document.getElementById("jid2").value = params.jid2;
    }
    if(params.demo)
    {
      document.getElementById("demo").value =params.dem;

    }
}
  • 1 Contributor
  • 0 Replies
  • 133 Views

Dani AI

Generated

— a simple, robust pattern is to wrap the inputs in a form, give every control a name, and read them with FormData inside a submit handler. That avoids brittle ID lookups and works even if you create the submit button in script. When building a mailto: URL always encodeURIComponent the subject/body and do not reassign the global window object.

Example (replace names/addresses to match your page):

<form id="surveyForm">
  <input name="jobId" id="jobId" type="text">
  <input name="satisfaction" id="satisfaction" type="range" min="1" max="10" value="5">
  <textarea name="notes" id="notes" rows="5"></textarea>
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('surveyForm').addEventListener('submit', function(e){
  e.preventDefault();
  const data = new FormData(this);
  const jobId = (data.get('jobId') || '').trim();
  const score = data.get('satisfaction');
  const notes = data.get('notes') || '';
  const subject = encodeURIComponent('My subject');
  const body = encodeURIComponent(`Job ID: ${jobId}\nScore: ${score}\n\n${notes}`);
  const mailto = `mailto:abc@gmail.com?subject=${subject}&body=${body}`;
  console.log(mailto); // inspect before opening
  window.location.href = mailto; // or window.open(mailto)
});
</script>

Key points and common traps:

  • Inputs must have name to be included in FormData. A range without name will not appear.
  • Use encodeURIComponent for subject/body so spaces, ampersands and newlines are safe.
  • Avoid window = window.open(...) — that overwrites the global window. Use window.open(...) or location.href = mailto.
  • mailto: URLs have practical length limits and depend on the client. For long notes or reliable delivery, POST the data to a server or use an email API.

Quick debug tips: log values in the submit handler, inspect the generated mailto: string in the console before navigation, and verify element names/ids if a value comes back empty.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.