CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectorsdropdown
ageans
ageans

Reputation: 557

Submitting data from different fields depending on selection of dropdown - laravel

My form contains a dropdown were yes or no can be selected. If yes is selected a dropdown will appear. When no is selected an input text filed will appear. However, this function is working but I can't submit my data. I can only submit my data when one of the "Dropdown 2" or "input 1" is removed (see code which field I mean).

If I submit the data I got the following error htmlspecialchars() expects parameter 1 to be string, array given . I think it is because of the fact that I have two fields that can send data. This both fields (hidden and displayed field) send data then as an array instead of sending data to the controller from the field that is diplayed. How can this be solved. Could someone help me?

Thansk

function displayField() {
      if (document.getElementById("isYes").selected) {
        document.getElementById("ifyes").style.display = "block";
        document.getElementById("check").style.display = "block";
        document.getElementById("ifno").style.display = "none";
        document.getElementById("ifyes").required = true;
      } else if (document.getElementById("isNo").selected) {
        document.getElementById("ifno").style.display = "block";
        document.getElementById("check").style.display = "block";
        document.getElementById("ifyes").style.display = "none";
        document.getElementById("ifno").required = true;
      } else {
        document.getElementById("ifno").style.display = "none";
        document.getElementById("ifyes").style.display = "none";
        document.getElementById("check").style.display = "none";
      }
    };
<form action="/tests" method="POST">

<div class="row">
  <div class="col-2">
    <div class="d-flex">
      <div class="p-1">
        <label class="p-2" for="type">Type </label>
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="d-flex">
      <div class="flex-fill p-2">
        <select name="type" class="form-control" onchange="displayField()" required>
          <option></option>
          <option id="isYes">Yes</option>
          <option id="isNo">No</option>
        </select>
      </div>
    </div>
  </div>

  <div class="col-2">
    <div class="d-flex">
      <div class="p-1">
        <label id="check" style="display: none;" class="p-2" for="select">Select</label>
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="d-flex">
      <div class="flex-fill p-2">
# Dropdown 2
        <select name="select" class="form-control" id="ifyes" style="display: none;" >


          <option>IC</option>
          <option>PD</option>
          <option>RB</option>
          <option>VDQ</option>
          <option>VDS</option>
        </select>
# input 1
        <input style="display: none;" id="ifno" type="text" class="form-control input-text" placeholder="select" name="select">
      </div>
    </div>
  </div>
</div> 
<div class="row">
  <div class="col-4 offset-4">
    <button type="submit" class="btn btn-primary btn-block" style="margin: 10px;">New </button>
  </div>
</div>  
</form>

Upvotes: 1

Views: 61

Answers (2)

Nemo
Nemo

Reputation: 513

The solution to this is disabling fields when the field is hidden. You can use therefore 

document.getElementById('id_of_field_to_disable').disabled = true

Here a link to a similar problem with a solution.

Also, check-in your controller's validation if your field is indicated as required.

Upvotes: 1

Swati
Swati

Reputation: 496

I have also the same problem that form is not submit. but using below code 
this works well for me.You should change according to your code.    
<!-- This is my html code -->
 <select id="imA" name="imA" onchange="addfield();" required="">
                <option value="">I am a ...</option>
                <option value="teacher">Teacher</option>
                <option value="student">Student</option>
 </select>

 <div id="showField">
 </div>

 <script type="text/javascript">
function addfield(){
    var evalue = $('#imA').val();
    if(evalue == 'student'){            
        $('#showField').html('<input type="text" placeholder="  Enrollment 
 No." name="eno" id="eno" required>');
    }
    else{
        $('#showField').html('');
    }      

}

Upvotes: 0

Related Questions