如何使用提交的JavaScript捕获数据?

时间:2017-01-15 21:22:35

标签: javascript html

我需要在单击相同表单的提交按钮时使用2种不同的表单更改文本的背景和颜色我已经有了这段代码,并且已经可以更改文本。

$('#select').change(function() {
  if ($(this).val() == 'A') {
    $("h1").css('background-color', 'white');
  }
  if ($(this).val() == 'B') {
    $("h1").css('background-color', 'red');
  }
  if ($(this).val() == 'C') {
    $("h1").css('background-color', 'yellow');
  }
  if ($(this).val() == 'D') {
    $("h1").css('background-color', 'green');
  }
});

$('#select1').change(function() {
  if ($(this).val() == 'A') {
    $("h1").css('color', 'white');
  }
  if ($(this).val() == 'B') {
    $("h1").css('color', 'red');
  }
  if ($(this).val() == 'C') {
    $("h1").css('color', 'yellow');
  }
  if ($(this).val() == 'D') {
    $("h1").css('color', 'green');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
    H1 TEXT TO CHANGE
    </h1>
<h3>
    Background Text
    </h3>
<form method="POST">
  <select id="select">
    <option value="A">White</option>
    <option value="B">Red</option>
    <option value="C">Yellow</option>
    <option value="D">Green</option>
  </select>
  <h3>
    Color Text
    </h3>

  <select id="select1">
    <option value="A">White</option>
    <option value="B">Red</option>
    <option value="C">Yellow</option>
    <option value="D">Green</option>
  </select>
  <br>
  <br>

</form>

当我添加与提交按钮链接的功能时,我收到错误。

<button onclick="capture()">Change</button>

function capture(){
*Actual JS*
}

3 个答案:

答案 0 :(得分:0)

为了简单起见,使用ID设置表单:

NSMutableArray *redValues = [NSMutableArray array];
NSMutableArray *arrayOne = [NSMutableArray array];
NSUInteger arrayOneLength = [arrayOne count];

__block int counter = 0;
int amount = 1;
float totalOne, diffForAverage;
NSInteger j;

GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset640x480 cameraPosition:AVCaptureDevicePositionBack];
videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;

GPUImageAverageColor *averageColor = [[GPUImageAverageColor alloc] init];
[averageColor setColorAverageProcessingFinishedBlock:^(CGFloat redComponent, CGFloat greenComponent, CGFloat blueComponent, CGFloat alphaComponent, CMTime frameTime)
 { // the compiler runs until here, then skips everything within these brackets
     NSLog(@"%f", redComponent);
     [redValues addObject:@(redComponent * 255)];
 }]; // after the brackets close, it executes everything that is below this
 // once everything below this has been executed, it goes back to the brackets and executes
 // everything between them

[videoCamera addTarget:averageColor];
[videoCamera startCameraCapture];

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 27 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
    [videoCamera stopCameraCapture];
});

totalOne = [redValues[24] floatValue];
float average = totalOne / amount;
NSUInteger redValuesLength = [redValues count];

for (j = (counter + 24); j < (redValuesLength - 24); j++)
{
    diffForAverage = average - [redValues[j + 1] floatValue];

    if (diffForAverage > -1 && diffForAverage < 1)
    {
        totalOne += [redValues[j + 1] floatValue];
        amount++;
        [arrayOne addObject:[NSNumber numberWithInt:(j - 24)]];
        counter++;
    }
}

jQuery的:

<form id="form-id">
...
  <input type="submit" value="submit">
</form>

VanillaJS:

$('#form-id').submit(function (e) {
  e.preventDefault();

  $('body').css('background-color', 'red');
  // some more JS
});

答案 1 :(得分:0)

将此添加到您的函数中,并将ColorText id添加到您的h3标记;)

function capture(){
  var e = document.getElementById("select");
  var strUser = e.options[e.selectedIndex].text;
  var e2 = document.getElementById("select1");
  var strUser2 = e2.options[e2.selectedIndex].text;
  document.body.style.backgroundColor=strUser;
  document.getElementById("ColorText").style.color=strUser2;

}

答案 2 :(得分:0)

在按钮上输入ID:

<button id="submit">Change</button>

一个事件监听器,您可以在其中检索选择并应用相应的css:

$("#submit").click(function(event){
    // prevent the form from actually submitting
    event.preventDefault();

    var choices = {
        "A": "white",
        "B": "red",
        "C": "yellow",
        "D": "green"
    };

    var choiceBG = $("#select").val();
    $("h1").css('background-color', choices[choiceBG]);

    var choiceFG = $("#select1").val();
    $("h1").css('color', choices[choiceFG]);
});