提交按钮未执行功能 | 提交按钮未执行功能

本文介绍了提交按钮未执行功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这个代码.我希望提交的功能在单击提交"按钮时运行.提交功能旨在警告option中的值和滑块上的数字.但是，没有显示滑块的数量，也没有显示警报:

I have this code. I want the function submited to run on the submit button click. submited function is meant to alert the value in option and the number on the slider. But, the number of the slider is not being displayed, and the alerts aren't showing:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script>
window.onload = function() {
    //Range
    var val = $('#slider').val();
    output = $('#output');
    output.html(val);

    $('#slider').on('change', function() {
      output.html(this.value);
    });

    function showSlider() {
      $('#slider').show();
      $('#textInput').hide();
      output.html('0');
    }

    function showTextInput() {
      $('#slider').hide();
      $('#textInput').show();
      $('#textInput').val('');
      $("#output").html('skin url');
    }

    $('#Main').change(function() {
      switch (this.value) {
        case 'optiona':
          $('#slider').prop({
            'min': 0,
            'max': 20
          });
          showSlider();
          break;
        case 'optionb':
          $('#slider').prop({
            'min': -10,
            'max': 90
          });
          showSlider();
          break;
        case 'optionc':
          showTextInput();
          break;
        case 'optiond':
          showTextInput();
          break;
        default:
    }
    $('#slider').val(0);
  });
  function submited() {
    var selectedValue = document.getElementById("slider").value;
	var finaloutput = $("#output").html()
    if (selectedValue != 'optionc') {
		alert(selectedValue + ' has the value ' + finaloutput);
        }
    if (selectedValue == 'optionc') {
    	var textcontent = $('#textInput').val();
    	alert('your value is '+ textcontent);
    }
    if (selectedValue == 'optiond') {
        var textcontent = $('#textInput').val();
    	alert('your second value of the last option is '+ textcontent);

  };
}

</script>

  <body>
    <form>
      <fieldset>
        <legend>Options</legend>
        <p>
          <label>
            Select option:
          </label>
          <select id="Main">
          	<option value="default">select an option</option>
            <option value="optiona">a</option>
            <option value="optionb">b</option>
            <option value="optionc">c</option>
            <option value="optiond">d</option>
          </select>
        </p>
        <p>
          <span id="output"></span></br>
          <input type="range" min="0" max="9000" id="slider" value="0" name="range" style="display: inline-block;width: 150px">
          <textarea id="textInput" style="display: none; width: 259px; margin: 0px; height: 15px;"></textarea>
          <span id="output"></span></br>
          <input type="submit" onclick="submited()" value="Submit" style="margin-left: 82%;" class="button" id="submitDemo"/>
        </p>
      </fieldset>
    </form>
  </body>

请参阅代码段，您可以了解我的问题.

Please see the code snippet and you can understand my issue.

感谢您的帮助.非常感谢.

Any help is appreciated.Many thanks.

推荐答案

我发现您的代码有几个错误:

I found several errors with your code:

定义onload函数时，您缺少}结束符
您的函数在错误的范围内-将它们从onload函数中移出并置于全局范围内
将HTML按钮更改为type="button"，因为在这种情况下您不提交表单.
您应该抓住#Main而不是#slider.
从<select>的onchange中，您正在调用一个不存在的函数changeRange.删除onchange属性.

You are missing a closing } when defining your onload function
Your functions are in the wrong scope -- take them out of the onload function and place them in the global scope
Change your HTML button to type="button" because you are not submitting a form in this case.
You should be grabbing #Main for the selectedValue, not #slider.
From your <select>'s onchange, you are calling a function changeRange that does not exist. Remove the onchange attribute.

进行了这些更改之后，您将获得有效的代码:

After making those changes, you get working code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script>
window.onload = function() {
    //Range
    var val = $('#slider').val();
    output = $('#output');
    output.html(val);

    $('#slider').on('change', function() {
      output.html(this.value);
    });

    $('#Main').change(function() {
      switch (this.value) {
        case 'optiona':
          $('#slider').prop({
            'min': 0,
            'max': 20
          });
          showSlider();
          break;
        case 'optionb':
          $('#slider').prop({
            'min': -10,
            'max': 90
          });
          showSlider();
          break;
        case 'optionc':
          showTextInput();
          break;
        case 'optiond':
          showTextInput();
          break;
        default:
    }
    $('#slider').val(0);
  });

};

	function showSlider() {
      $('#slider').show();
      $('#textInput').hide();
      output.html('0');
    }

    function showTextInput() {
      $('#slider').hide();
      $('#textInput').show();
      $('#textInput').val('');
      $("#output").html('skin url');
    }

  function submited() {

    console.log("submitted");

    var selectedValue = document.getElementById("Main").value;
	  var finaloutput = $("#output").html()
    if (selectedValue != 'optionc') {
		alert(selectedValue + ' has the value ' + finaloutput);
        }
    if (selectedValue == 'optionc') {
    	var textcontent = $('#textInput').val();
    	alert('your value is '+ textcontent);
    }
    if (selectedValue == 'optiond') {
        var textcontent = $('#textInput').val();
    	alert('your second value of the last option is '+ textcontent);

  	};
  }

</script>

  <body>
    <form>
      <fieldset>
        <legend>Options</legend>
        <p>
          <label>
            Select option:
          </label>
          <select id="Main">
          	<option value="default">select an option</option>
            <option value="optiona">a</option>
            <option value="optionb">b</option>
            <option value="optionc">c</option>
            <option value="optiond">d</option>
          </select>
        </p>
        <p>
          <span id="output"></span><br>
          <input type="range" min="0" max="9000" id="slider" value="0" name="range" style="display: inline-block;width: 150px">
          <textarea id="textInput" style="display: none; width: 259px; margin: 0px; height: 15px;"></textarea>
          <span id="output"></span><br>
          <input type="button" onclick="submited();" value="Submit" style="margin-left: 82%;" class="button" id="submitDemo"/>
        </p>
      </fieldset>
    </form>
  </body>

这篇关于提交按钮未执行功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！