javascript - 使用 onsubmit 方法发送输入数据

Question

我有一个包含一些输入的Multi表单

<form class="form" role="form" onsubmit="completeSave()">
 <div class="form-body">
    <div class="form-group">
        <label>نام محتوا</label>
        <input type="text" class="form-control" name="name"
               value="{{$media->name}}">
    </div>
    <div class="form-actions">
        <button type="submit" id="{{$media->id}}" class="btn blue">ارایه</button>
    </div>
</form>
<form class="form" role="form" onsubmit="completeSave()">
 <div class="form-body">
    <div class="form-group">
        <label>نام محتوا</label>
        <input type="text" class="form-control" name="name"
               value="{{$media->name}}">
    </div>
    <div class="form-actions">
        <button type="submit" id="{{$media->id}}" class="btn blue">ارایه</button>
    </div>
</form>

我想获取提交表单上的输入值我尝试了此代码，但没有成功

function completeSave() {
        event.preventDefault();
        var thisForm = $(this);
        console.log(thisForm.find('input[name="name"]').val())
}

它在控制台中返回未定义

Answer 1

在本例中您使用的是 jQuery。 你需要导入你的 jQuery 然后使用下面的函数 jQuery 可以在

找到

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

function completeSave(e) {
   event.preventDefault();
   var thisForm = $(e).find("[name=name]");
   console.log(thisForm.val());
}

表格

<form class="form" role="form" onsubmit="completeSave(this)"> <!-- add this -->
 <div class="form-body">
    <div class="form-group">
        <label>نام محتوا</label>
        <input type="text" class="form-control" name="name"
               value="{{$media->name}}">
    </div>
    <div class="form-actions">
        <button type="submit" id="{{$media->id}}" class="btn blue">ارایه</button>
    </div>
</form>